在畫布中旋轉圖像並使其可拖動

Question

我有一張畫在畫布上的圖像。 當鼠標單擊並拖動時，我得到了鼠標坐標，並使用它們來設置圖像的positionX和Y。 完成之后，我重新繪制畫布。 這就像一種魅力，我可以將圖像移到畫布上。

但是現在我做了兩個按鈕，以便可以左右旋轉圖像。 當我旋轉圖像時，它現在相對於我旋轉的角度移動。 因此，當我將圖像旋轉180度並向上拖動圖像時，它就會掉下來！ 我不知道為什么會這樣，或者我怎么能彌補。 :(

好吧，我知道我可能有點含糊，所以這里是問題的演示。

Answer 1

我無法訪問您提供的演示URL，但這應該是通用的。

您需要將對象移動到坐標空間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);