旋转后如何将画布平移设置为左上角

Question

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

不，我计算尺寸，并设置画布大小。然后我将旋转中心设置为画布中心（通过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

希望这会有所帮助。

更新：

是的。好的，所以你有点误解了一些东西。平移和旋转应用在之前绘图。这是因为很多复杂的数学，并且确实超出了这个问题的范围。所以如果你想画出你的画布的一部分以一种方式旋转，而另一部分以不同的方式旋转，你首先save，然后应用转换，做绘图的第一部分，然后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 个绘图函数，并且您只需在绘制不同的组件之前设置一个上下文。