Add one-space gap between watermark icons and text (preview + export)
This commit is contained in:
@@ -536,17 +536,18 @@ export default function Viewfinder({
|
||||
: area.dy + area.dh - padBottom;
|
||||
const xOffset =
|
||||
area.dx + (selectedFrame === 'polaroid' ? area.dw * 0.08 : Math.min(16, area.dw * 0.04));
|
||||
const gap = (rect: { width?: number } | null) =>
|
||||
Math.round((rect?.width ?? Math.round(vw * 0.032)) + vw * 0.012);
|
||||
// One clear space (0.6em ≈ a mono space) between each icon and its text.
|
||||
const iconSize = Math.round(vw * 0.032); // matches customFont/iconFont size
|
||||
const gap = (w: number) => Math.round(Math.max(w, iconSize) + iconSize * 0.6);
|
||||
const pinW = iconFont.measureText('📍');
|
||||
const camW = iconFont.measureText('📷');
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<SkiaText x={xOffset} y={yOffset - 16} text="📍" font={iconFont} color="#f59e0b" />
|
||||
<SkiaText x={xOffset + gap(pinW)} y={yOffset - 16} text={locationName} font={customFont} color="#f59e0b" />
|
||||
<SkiaText x={xOffset + gap(pinW.width)} y={yOffset - 16} text={locationName} font={customFont} color="#f59e0b" />
|
||||
<SkiaText x={xOffset} y={yOffset} text="📷" font={iconFont} color="#f59e0b" />
|
||||
<SkiaText x={xOffset + gap(camW)} y={yOffset} text={timestampStr} font={customFont} color="#f59e0b" />
|
||||
<SkiaText x={xOffset + gap(camW.width)} y={yOffset} text={timestampStr} font={customFont} color="#f59e0b" />
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -285,7 +285,7 @@ export async function processAndExportPhoto(
|
||||
|
||||
const yOffset = height - (frameId === 'polaroid' ? height * 0.15 : fontSize * 1.5);
|
||||
const xOffset = frameId === 'polaroid' ? width * 0.08 : fontSize * 1.2;
|
||||
const gap = Math.round(fontSize * 1.2); // icon box (~1em) + spacing
|
||||
const gap = Math.round(fontSize * 1.6); // icon box (~1em) + one clear mono space (~0.6em)
|
||||
|
||||
canvas.drawText('📍', xOffset, yOffset - fontSize * 1.4, textPaint, iconFont);
|
||||
canvas.drawText(locationName, xOffset + gap, yOffset - fontSize * 1.4, textPaint, font);
|
||||
|
||||
Reference in New Issue
Block a user