如何在旋轉後將畫布平移設置到左上角

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個繪圖功能，您只需設置一個環境下，你繪製不同的組件之前。