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/components/map/canvasDraw.ts
+2 -2
View File
@@ -128,7 +128,7 @@ function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source:
ctx.textBaseline = "middle";
ctx.font = `bold ${30 * scale}px Monda`;
const titleText = title.trim().toUpperCase();
const titleWidth = Math.max(360 * scale, ctx.measureText(titleText).width + horizontalPadding * 2);
const titleWidth = ctx.measureText(titleText).width + horizontalPadding * 2;
const titleX = canvasWidth - right - titleWidth;
ctx.fillStyle = "#9b0008";
@@ -139,7 +139,7 @@ function drawTitleOverlay(ctx: CanvasRenderingContext2D, title: string, source:
if (source.trim()) {
ctx.font = `bold ${19 * scale}px Monda`;
const sourceText = source.trim().toUpperCase();
const sourceWidth = Math.max(130 * scale, ctx.measureText(sourceText).width + horizontalPadding * 2);
const sourceWidth = ctx.measureText(sourceText).width + horizontalPadding * 2;
const sourceX = canvasWidth - right - sourceWidth;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(sourceX, top + titleHeight, sourceWidth, sourceHeight);
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);
}