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

Question

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

不，我计算尺寸，并设置画布大小。然后我将旋转中心设置到画布中心（通过ctx.translate）并旋转到任意角度。

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

谢谢。

Answer 1

伟大的问题！ translaterotate和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

希望这有助于。

更新：

是的。好的，所以你有点误解了一些东西。翻译和旋转应用之前图纸。这是因为很多复杂的数学，并且超出了这个问题的范围。所以如果你想绘制画布的一部分以一种方式旋转，而其另一部分以不同的方式旋转，那么首先你需要save，然后应用变换，做第一部分绘画，然后restore返回到pre转换状态。在这一点上，你可以重复。 因此，举例来说，你可以这样做：

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个绘图功能，您只需设置一个环境下，你绘制不同的组件之前。