Question

我的数据集变化很大，有时点数为self.a[index][w]=self.a[index][w]-aux[w]，有时点数为[-34343, 343434]。

无论如何，＆＃34;缩放以适应＆＃34;所以画布的内容总是适合数据吗？

我看过[10, 20]但是当我放大时，线条会变粗。无论变焦如何，我都希望线条的宽度始终相同。

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

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

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

如果要从弧函数创建椭圆形状，或者在不获得不一致的线宽的情况下进行任何非均匀缩放，这将非常有用。

缩放以适合，画布，JavaScript

1 个答案: