javascript - 旋转后如何将 Canvas 平移设置为左上角

Question

我正在用简单的线条绘制符号，但希望用户能够指定旋转(仅限 90 度)。这也意味着我的 Canvas 尺寸发生了变化。

不，我计算尺寸，并设置 Canvas 大小。然后我将旋转中心设置为 Canvas 的中心(通过 ctx.translate)并旋转到任意度数。

现在我的问题是:如何将平移设置回左上角，以便我可以从该位置正常绘制我的符号？我真的必须用旋转来计算值吗？

谢谢。

Answer 1

好问题! translate rotate 和scale 都是对当前矩阵进行操作的函数。这为您提供了很多选择。可能最简单的事情是对上下文矩阵进行保存恢复

ctx.save();
ctx.translate ( to the center );
ctx.rotate ( do rotation );
//Draw rotated stuff
ctx.restore();
//Draw non-rotated stuff

现在调用 restore 后，矩阵恢复到上次保存之前的状态 - 在 opengl 中，这实际上是一个堆栈，您可以推送许多上下文，但我不确定 webgl 是否支持。

此链接也可能有帮助:https://developer.mozilla.org/en/drawing_graphics_with_canvas

希望这对您有所帮助。

更新:

是的。好的，所以你有点误解了。平移和旋转在绘图之前应用。这是因为有很多复杂的数学运算，确实超出了这个问题的范围。因此，如果您想绘制 Canvas 的一部分以一种方式旋转，而另一部分以不同的方式旋转，您首先要保存，然后应用转换，执行绘图的第一部分，然后restore 返回到转换前的状态。在这一点上，你可以重复。因此，例如，您可以这样做:

ctx.save();
ctx.translate ( x_center, y_center );
ctx.rotate ( 90 );
//Draw your rotated stuff starting at the center
ctx.translate ( -x_center, -y_center );
//Draw your main frame stuff that is all rotated around the center
ctx.restore();
ctx.save();
ctx.rotate ( 90 );
//Draw your text which is rotated around the top-left corner
ctx.restore();

这样，您就有了 1 个绘图函数，并且在绘制不同的组件之前只需设置一个上下文。