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

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

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

此链接也可能有帮助：https://developer.mozilla.org/en/drawing_graphics_with_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 个绘图函数，并且您只需在绘制不同的组件之前设置一个上下文即可。