Bigger wind font for higher resolution map

This commit is contained in:
Guntis Smaukstelis
2024-02-12 15:57:16 +02:00
parent b49bd50dfd
commit 4cc2bb9a87
2 changed files with 8 additions and 7 deletions
+2 -2
View File
@@ -54,7 +54,7 @@ export function drawOnMap(
if (!props.showWind) return; if (!props.showWind) return;
// wind values // wind values
ctx.font = "bold 45px Rubik"; ctx.font = `bold ${props.windFontSize}px Rubik`;
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.fillStyle = "#FFFFFF"; ctx.fillStyle = "#FFFFFF";
@@ -70,7 +70,7 @@ export function drawOnMap(
ctx.font = "bold 25px Rubik"; ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", windProp.offsetX + boxMiddleX + speedWidth / 2 - 22, (windProp.offsetY + 590)*windProp.scaleY); ctx.fillText("M/S", windProp.offsetX + boxMiddleX + speedWidth / 2 - 22, (windProp.offsetY + 590)*windProp.scaleY);
ctx.font = "bold 45px Rubik"; ctx.font = `bold ${props.windFontSize}px Rubik`;
const gustsWidth = ctx.measureText(windGusts).width; const gustsWidth = ctx.measureText(windGusts).width;
ctx.fillText(windGusts, windProp.offsetX + boxMiddleX - gustsWidth / 2 - 30, (windProp.offsetY + 790)*windProp.scaleY); ctx.fillText(windGusts, windProp.offsetX + boxMiddleX - gustsWidth / 2 - 30, (windProp.offsetY + 790)*windProp.scaleY);
ctx.font = "bold 25px Rubik"; ctx.font = "bold 25px Rubik";
+6 -5
View File
@@ -15,13 +15,14 @@ export type ResolutionPropsValue = {
map: string; map: string;
fontSize: number; fontSize: number;
boxSize: number; boxSize: number;
windFontSize: number;
}; };
export const resolutionProps: Record<string, ResolutionPropsValue> = { export const resolutionProps: Record<string, ResolutionPropsValue> = {
"map_1920x1080": { offsetX: 290, offsetY: 120, width: 1920, height: 1080, scale: 1.35, fontSize: 30, boxSize: 80, showWind: false, map: map_1920x1080 }, "map_1920x1080": { offsetX: 290, offsetY: 120, width: 1920, height: 1080, scale: 1.35, fontSize: 30, boxSize: 80, showWind: false, map: map_1920x1080, windFontSize: 45, },
"map_1920x1080_wind": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, fontSize: 30, boxSize: 80, showWind: true, map: map_1920x1080_wind }, "map_1920x1080_wind": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, fontSize: 30, boxSize: 80, showWind: true, map: map_1920x1080_wind, windFontSize: 45, },
"map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: false, map: map_3840x1440 }, "map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: false, map: map_3840x1440, windFontSize: 60, },
"map_3840x1440_wind": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: true, map: map_3840x1440_wind }, "map_3840x1440_wind": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, fontSize: 68, boxSize: 140, showWind: true, map: map_3840x1440_wind, windFontSize: 60, },
} }
export type WindProps = { export type WindProps = {
@@ -32,5 +33,5 @@ export type WindProps = {
export const windProps: Record<string, WindProps> = { export const windProps: Record<string, WindProps> = {
"map_1920x1080_wind": { offsetX: 0, offsetY: 0, scaleY: 1, }, "map_1920x1080_wind": { offsetX: 0, offsetY: 0, scaleY: 1, },
"map_3840x1440_wind": { offsetX: 1610, offsetY: 80, scaleY: 1.24, }, "map_3840x1440_wind": { offsetX: 1610, offsetY: 75, scaleY: 1.24, },
} }