Add one-space gap between watermark icons and text (preview + export)

This commit is contained in:
2026-09-08 12:06:07 +07:00
parent b64d7245c9
commit 58335d8cd1
2 changed files with 6 additions and 5 deletions
+5 -4
View File
@@ -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>
);
};
+1 -1
View File
@@ -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);