Question

我有一张画在画布上的图像。当鼠标点击并拖动时，我得到鼠标坐标并使用它们来设置图像的positionX和Y.完成之后，我重绘画布。这就像一个魅力，我可以在画布上移动图像。

但现在我制作2个按钮，这样我就可以左右旋转图像了。当我旋转图像时，它现在相对于我旋转的角度移动。因此，当我将图像旋转180度并向上拖动图像时，它会下降！我不知道为什么会发生这种情况或者我如何弥补它。：（

我明白我可能有点含糊，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);

在画布中旋转图像并使其保持可拖动状态

3 个答案: