bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix broadcast overlay scaling

Browse Source
This commit is contained in:
b0txec
2026-08-20 09:52:58 +03:00
parent ffcf3a2595
commit e36ddbe9ad
5 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/water-temperature/WaterTemperature.tsx
+14 -10
View File
@@ -107,9 +107,12 @@ export function WaterTemperature() {
function drawRanges(ctx: CanvasRenderingContext2D, width: number, height: number, values: Record<WaterArea, RangeValue>) {
const scaleX = width / 3840;
const scaleY = height / 1440;
const fontSize = 88 * Math.min(scaleX, scaleY);
const badgeHeight = 132 * scaleY;
const padding = 56 * scaleX;
// Backgrounds use their target aspect ratio, but production graphics scale
// uniformly so boxes and type are never stretched vertically or horizontally.
const graphicScale = scaleX;
const fontSize = 88 * graphicScale;
const badgeHeight = 132 * graphicScale;
const padding = 56 * graphicScale;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = `700 ${fontSize}px Monda`;
@@ -131,26 +134,27 @@ function drawRanges(ctx: CanvasRenderingContext2D, width: number, height: number
function drawNameplate(ctx: CanvasRenderingContext2D, width: number, height: number) {
const scaleX = width / 3840;
const scaleY = height / 1440;
const graphicScale = scaleX;
const x = 2698 * scaleX;
const y = 145 * scaleY;
const titleWidth = 1062 * scaleX;
const titleHeight = 124 * scaleY;
const sourceWidth = 290 * scaleX;
const sourceHeight = 60 * scaleY;
const titleWidth = 1062 * graphicScale;
const titleHeight = 124 * graphicScale;
const sourceWidth = 290 * graphicScale;
const sourceHeight = 60 * graphicScale;
ctx.fillStyle = '#8f090b';
ctx.fillRect(x, y, titleWidth, titleHeight);
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.font = `700 ${56 * Math.min(scaleX, scaleY)}px Monda`;
ctx.font = `700 ${56 * graphicScale}px Monda`;
ctx.fillStyle = '#fff';
ctx.fillText('ŪDENS TEMPERATŪRA', x + 66 * scaleX, y + titleHeight / 2);
ctx.fillText('ŪDENS TEMPERATŪRA', x + 66 * graphicScale, y + titleHeight / 2);
const sourceX = x + titleWidth - sourceWidth;
ctx.fillStyle = '#f4f4f4';
ctx.fillRect(sourceX, y + titleHeight, sourceWidth, sourceHeight);
ctx.fillStyle = '#000';
ctx.font = `700 ${39 * Math.min(scaleX, scaleY)}px Monda`;
ctx.font = `700 ${39 * graphicScale}px Monda`;
ctx.textAlign = 'center';
ctx.fillText('LVĢMC', sourceX + sourceWidth / 2, y + titleHeight + sourceHeight / 2);
}