在畫布上旋轉圖像並保持可拖拽

Question

我在畫布上繪製了一張圖像。當鼠標點擊並拖動時，我得到鼠標座標並使用它們來設置圖像的位置X和Y.在完成之後，我重畫了畫布。這就像一個魅力，我可以在畫布上移動圖像。

但現在我做了2個按鈕，這樣我就可以左右旋轉圖像。當我旋轉圖像時，它現在相對於我旋轉的角度移動。所以當我旋轉圖像180deg並拖動圖像時，它就會下降！我不知道爲什麼會發生這種情況，或者我可以如何補償它。 :(

嗯，我明白我可能有點含糊所以here is a demo of the problem.

Answer 1

我無法訪問演示網址你提供了，但這應該是通用的。

你需要將你的對象移動到你的座標空間的底部o:(0,0)，做你的旋轉，然後把你的對象移回到它移動之前的位置，因爲所有的變換都被加入到一個單獨的變換矩陣中，變換的順序非常重要，而且你基本上只需要做它們成反比，即移動你的對象返回到初始位置，然後旋轉它，然後把它移動到座標空間基地：

ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 

瞧。 這裏的演示：http://jsfiddle.net/ArtBIT/CdbWx/1

Answer 2

嘗試交換這兩條線

 
oContext.translate(oImage.size.x /2 ,oImage.size.y/2); 
oContext.rotate(oImage.rotate * Math.PI/180); 

先旋轉，然後進行翻譯。

Answer 3

類似ArtBIT的答案，但考慮到你想要從中心旋轉，我將使用代碼：

ctx.translate(width/2, height/2); 
ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 
ctx.translate((width/-2), height/-2);