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

feat: monochrome Noto Emoji subset icons (pin, camera) before watermark lines

Browse Source
This commit is contained in:
3dtours
2026-09-08 11:30:47 +07:00
parent 43a73c541b
commit ea281d7974
3 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Viewfinder.tsx
+15 -3
View File
@@ -93,6 +93,12 @@ export default function Viewfinder({
require('../../assets/CourierPrime-Regular.ttf'),
Math.round(vw * 0.032)
);
// Monochrome Noto Emoji subset (📍 U+1F4CD, 📷 U+1F4F7) for the watermark
// icons — glyphs painted with the same color as the text next to them.
const iconFont = useFont(
require('../../assets/NotoEmoji-GPS.ttf'),
Math.round(vw * 0.032)
);
const adjustments = recipe.adjustments;
// Camera captures apply exposure compensation as a hardware AE bias (see the
@@ -478,7 +484,7 @@ export default function Viewfinder({
};
const renderGPSWatermark = () => {
if (!useGeotag || !gpsInfo || !customFont) return null;
if (!useGeotag || !gpsInfo || !customFont || !iconFont) return null;
const locationName = gpsInfo.locality || 'STREET VIEW';
const d = new Date(gpsInfo.timestamp);
@@ -489,11 +495,17 @@ export default function Viewfinder({
// readable; polaroid frames push it further up onto the white area edge.
const yOffset = vh - (selectedFrame === 'polaroid' ? vh * 0.18 + 24 : 150);
const xOffset = selectedFrame === 'polaroid' ? vw * 0.08 : 16;
const gap = (rect: { width?: number } | null) =>
Math.round((rect?.width ?? Math.round(vw * 0.032)) + vw * 0.012);
const pinW = iconFont.measureText('📍');
const camW = iconFont.measureText('📷');
return (
<Group>
<SkiaText x={xOffset} y={yOffset - 16} text={`📍 ${locationName}`} font={customFont} color="#f59e0b" />
<SkiaText x={xOffset} y={yOffset} text={timestampStr} font={customFont} color="#f59e0b" />
<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} y={yOffset} text="📷" font={iconFont} color="#f59e0b" />
<SkiaText x={xOffset + gap(camW)} y={yOffset} text={timestampStr} font={customFont} color="#f59e0b" />
</Group>
);
};