html5画布防止线宽缩放答案

【问题标题】：html5 canvas prevent linewidth scalinghtml5画布防止线宽缩放
【发布时间】：2011-04-17 04:46:53
【问题描述】：

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

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

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

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

一种选择是将线宽除以比例因子，如果 x 和 y 比例因子相同，这将起作用。

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

【问题讨论】：

标签： html canvas scaling

【解决方案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

&lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"&gt;

【讨论】：

你用哪些浏览器测试过它？在 Chrome 38 上它似乎不起作用。
太棒了！在 Chrome 44、FF 39、IE 9+ 中为我工作
这很好用。但是，如果在恢复之前有一个 clip() 区域，它会丢失，并且如果在笔划之前添加了剪辑区域，则会对剪辑路径进行笔划。还有其他解决方案吗？
您可以重置转换，这样就可以了。 ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.stroke();。您也可以像ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.stroke(); ctx.restore(); 一样保存和恢复，以便只影响抚摸，但保留其他所有内容。不知道这将如何影响剪辑
有什么方法可以使用已经设置的 Path2D 对象来做到这一点？

【解决方案2】：

lineWidth 应该事先按比例缩小。

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

【讨论】：

但这并不能阻止线宽缩放，只是确保线宽不超过一个值。

【解决方案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);

【讨论】：

OP 似乎正在经历完全相反的情况……lineWidth 是受到缩放的影响吗？
天哪！那是我的一些非常糟糕的阅读理解！并为自己测试，是的，它受到了影响。
w3d 是对的，我的线宽受缩放影响。我的解决方案是将线宽除以比例因子，如果 scale =2 然后 linewidth=original_linewidht/scale。这对感知厚度很有效