缩放画布而不扭曲 lineWidth 或破坏剪辑

Question

我想在绘图中缩放一个轴。正如其他人指出的那样，天真地这样做也会在描边路径时缩放 lineWidth 。其他解决方案也指出，您可以执行以下操作以避免扭曲线宽：

ctx.save();
ctx.scale(1, 2);
ctx.beginPath();
// draw shape
ctx.restore();
ctx.stroke();

不幸的是，我还需要一个复杂的剪辑区域，而 restore() 会破坏剪辑区域。我试着简单地恢复规模：

ctx.save();
ctx.scale(1, 2);
ctx.beginPath();
// draw shape
ctx.scale(1, 1);
ctx.stroke();

但这不起作用，lineWidth 仍然失真。

这是一个物理系统的建模，所涉及的形状是弧线和直线。重要的是各种形状的交点要准确，因此在没有剪辑的情况下计算所有可能的交点要困难得多。同样，简单地不使用比例尺会产生椭圆曲线，这是我试图避免的，但这是最后的手段。

有什么想法吗？

Answer 1

我不太清楚你在做什么，我想你可以通过使用 compositing 来避免剪辑，这在大多数情况下提供了更好的性能和更清晰的结果。

但无论如何，让我们假设您绝对想要剪辑......

---

ctx.save() 会将保存的状态堆叠在内部 ArrayLike 对象中。每次调用restore() 只会恢复popped out 元素（即堆栈中最新的元素）。

因此，您可以通过在这两个操作之间调用ctx.save() 来很好地恢复缩放之前但裁剪之后的状态。

ctx = c.getContext('2d');
ctx.save(); // stack a first state without clipping, just in case
// define our clipping region
ctx.arc(53,50,30,0,Math.PI*2);
ctx.stroke();
ctx.clip();

// draw once at normal scale
drawShape();
ctx.strokeStyle = 'blue';
ctx.stroke();

// save our context state before we scale
ctx.save();
// now draw scaled
ctx.scale(2, 1);
drawShape();
// restore to before we applied the scale
ctx.restore();
ctx.strokeStyle = 'red';
ctx.stroke();

// restore before clipping
ctx.restore();
// next drawings would be unclipped...

function drawShape() {
  ctx.beginPath();
  ctx.rect(25, 30, 20, 20);
}

<canvas id="c"></cavnas>

---

---

现在，您甚至不必管理这些混乱的上下文状态，并且可以简单地恢复上下文的转换矩阵。

在您的代码中，您在哪里使用ctx.scale(1, 1)。这是一个无操作（不会做任何事情）。 ctx.scale(factor, factor) 会将当前比例值乘以您传递的 factors。因此，由于 n*1=n，这将无济于事。

所以，是的，您可以计算需要传入的反因子（如在您的示例中，它将是 ctx.scale(1, 0.5)），但最简单的解决方案是使用绝对的 setTransform(xScale, xSkew, ySkew, yScale, xTranslate, yTranslate) 方法。
要将上下文矩阵重置为其默认值，您只需记住ctx.setTransform(1,0,0,1,0,0);。

ctx = c.getContext('2d');
// as a bonus, we will use compositing instead of clipping
// but this has no incidence on the demo

// draw once at normal scale
drawShape();
ctx.strokeStyle = 'blue';
ctx.stroke();

// now draw scaled
ctx.scale(2, 1);
drawShape();
// restore the context's matrix
ctx.setTransform(1,0,0,1,0,0);
ctx.strokeStyle = 'red';
ctx.stroke();

// clipping (compositing)
// only the pixels that are currenlty on the context,
// and whose position will match with one of the to be drawn will be kept
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.arc(53,50,30,0,Math.PI*2);
ctx.fill();
// restore to default
ctx.globalCompositeOperation = 'source-over';
// just to show the clipped area
ctx.strokeStyle = '#000';
ctx.stroke();

function drawShape() {
  ctx.beginPath();
  ctx.rect(25, 30, 20, 20);
}

<canvas id="c"></canvas>