在画布中旋转图像并使其可拖动

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);