javascript - 缩放以适合， Canvas ，javascript

Question

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

有没有“缩放以适合”这样 Canvas 的内容总是适合数据？

我查看了transform，但是当我放大时，线条变粗了。无论缩放如何，我都希望线条始终具有相同的宽度。

https://jsfiddle.net/s2cfp34n/

Answer 1

在保持渲​​染线不变的情况下进行缩放。

首先找到数据的范围，这样你就可以得到像素的宽度和高度

// 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);

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

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

现在计算原点需要位于何处，以便左上角的数据位置至少接触到 Canvas 的一个边缘

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

直到您创建了所有路径并且在调用 stroke 之前将转换重置为默认比例。渲染器将​​在当前变换中使用线宽，而路径仍保持您添加时使用的比例

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

如果您想从 arc 函数创建椭圆形，或者进行任何非均匀缩放而不得到不一致的线宽，这将很有用。