缩放以适合画布，javascript

Question

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

无论如何，要“缩放以适合”，以便画布的内容始终适合数据吗？

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

https://jsfiddle.net/s2cfp34n/

Answer 1

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

首先找到数据的范围，以便最终获得像素的Width和Height

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

如果要通过弧函数创建椭圆形，或者进行任何不均匀的缩放而不会导致线宽不一致，这将非常有用。