Optically center weather font glyphs

2026-08-18 23:01:07 +03:00
parent 82199b8a45
commit 0c78d3c1b0
4 changed files with 40 additions and 5 deletions
@@ -49,7 +49,7 @@ export function drawOnMap(
            ctx.fillStyle = "#FFFFFF";
            ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`;
            const iconSize = ctx.measureText(icon);
-            ctx.fillText(icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
+            drawOpticallyCenteredGlyph(ctx, icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
        }
    });

@@ -81,6 +81,15 @@ export function drawOnMap(
    ctx.fillText("M/S", windProp.offsetX + boxMiddleX + gustsWidth / 2 - 22, (windProp.offsetY + 805)*windProp.scaleY);
 }

+function drawOpticallyCenteredGlyph(ctx: CanvasRenderingContext2D, glyph: string, centerX: number, centerY: number): void {
+    const metrics = ctx.measureText(glyph);
+    ctx.textAlign = "left";
+    ctx.textBaseline = "alphabetic";
+    const x = centerX + (metrics.actualBoundingBoxLeft - metrics.actualBoundingBoxRight) / 2;
+    const y = centerY + (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2;
+    ctx.fillText(glyph, x, y);
+}
+
 function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source: string, canvasWidth: number): void {
    if (!title.trim() && !source.trim()) return;