3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
3dtours
2026-09-08 12:06:07 +07:00
parent b64d7245c9
commit 58335d8cd1
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Viewfinder.tsx
+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>
);
};