缩放以适合，画布，JavaScript

Zoom to fit, canvas, javascript

本文关键字：画布 JavaScript 缩放      更新时间：2023-09-26

>我得到了一个变化很大的数据集，有时点是[-34343, 343434]，有时是[10, 20]。

是否有任何"缩放以适应"的方法，以便画布的内容始终适合数据？

我看过transform但当我放大时，线条变粗了。我希望无论缩放如何，线条始终保持相同的宽度。

https://jsfiddle.net/s2cfp34n/

在保持渲染线相同的同时进行缩放。

首先找到数据的范围，以便最终得到像素宽度和高度

// what ever data format you have do what you need to fine width and height
var dataWidth = Math.max(...data.x)-Math.min(...data.x);
var dataHeight = Math.max(...data.y)-Math.min(...data.y);

您还需要数据的左上角坐标

var dataX = Math.min(...data.x);
var dataY = Math.min(...data.y);

然后，通过将画布大小除以数据大小，使用您获得的两个比例中的最小比例找到适合所有数据的比例

var scale = Math.min(canvas.width / dataWidth, canvas.height / dataHeight);

现在计算原点需要的位置，以便左上角的数据位置至少接触画布的一个边缘

originX = (canvas.width / 2) - ((dataWidth / 2) + dataX) * scale;
originY = (canvas.height / 2) - ((dataHeight / 2) + dataY) * scale;

因此，您现在拥有创建转换矩阵所需的所有数据。

ctx.setTransform(scale,0,0,scale,originX,originY);

有两种方法可以以固定宽度呈现线条。

获取反比例并乘以所需的线宽

var invScale = 1 / scale;
ctx.lineWidth = 2 * invScale; // the line width will always be 2 pixels
ctx.lineWidth = 1 * invScale; // the line width will always be 1 pixels
... etc

或者，一个不错的技巧是在创建路径之后但在渲染笔画之前重置转换。

设置缩放的转换并创建路径

ctx.setTransform(scale,0,0,scale,originX,originY);
ctx.beginPath();
ctx.moveTo(data[0].x,data]0].y);
ctx.lineTo(data[1].x,data]1].y);
... and so on
在

创建所有路径之前，在调用笔触之前，将转换重置为默认比例。渲染器将在当前变换中使用 lineWidth，而路径将保持您添加它们的比例

ctx.setTransform(1,0,0,1,0,0);
ctx.lineWidth = 2; // two pixels
ctx.stroke();

如果要从 arc 函数创建椭圆形，或者执行任何不均匀缩放而不会获得不一致的线宽，这将非常有用。

相关文章：