Bigger wind font for higher resolution map
This commit is contained in:
@@ -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";
|
||||||
|
|||||||
@@ -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, },
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user