html5 canvas防止线宽缩放

Question

如果我画一个线宽=2的矩形，然后将其缩放到矩形大小的两倍，我会得到一个矩形，其边框大小是初始线宽的两倍。

有没有办法将线宽保持在感知尺寸 2 或原始尺寸。

简而言之，我只想缩放矩形的大小，但在视觉上保持线宽大小为 2。

我尝试在scale(2,2) 命令之前和之后设置线宽，但边框宽度也会增加。

一种选择是将线宽除以比例因子，如果 x 和 y 比例因子相同，则此方法有效。

我没有缩放矩形宽度和高度的选项，我需要使用缩放命令，因为矩形内有其他需要缩放的对象。

Answer 1

您可以使用变换来定义路径，而无需变换来描边它。这样线宽就不会改变。

例子：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save(); //save context without transformation
ctx.scale(2, 0.5); //make transformation
ctx.beginPath(); //define path
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.restore(); //restore context without transformation
ctx.stroke(); //stroke path

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 2

线宽应事先缩小。

ctx.lineWidth = 2 / Math.max(scaleX, scaleY);
ctx.scale(scaleX, scaleY);
ctx.fillRect(50, 50, 50, 50);

Answer 3

好的，您有几个选择：

您可以自己缩放坐标和尺寸，例如

ctx.strokeRect( scaleX * x, scaleY * y, scaleX * width, scaleY * height) ;

，您还需要将缩放应用于所有其他对象。

或者，您可以应用缩放但不依赖 lineWidth 来绘制矩形的边框。一种简单的方法是通过填充正确的区域然后删除内部并减去边框来绘制矩形，如下所示：

var scaleX = 1.5, scaleY = 2;
var lineWidth = 2;

ctx.scale(scaleX, scaleY);

ctx.fillStyle = "#000";
ctx.fillRect(100, 50, 100, 
ctx.clearRect(100+lineWidth/scaleX, 50+lineWidth/scaleY, 100-(2*lineWidth)/scaleX, 60-(2*lineWidth)/scaleY);