javascript - 在 Canvas 中旋转图像并保持其可拖动

Question

我有一个在 Canvas 上绘制的图像。当鼠标单击并拖动时，我获取鼠标坐标并使用它们来设置图像的 X 和 Y 位置。完成后，我重新绘制 Canvas 。这就像一个魅力，我可以在 Canvas 上移动图像。

但现在我制作了 2 个按钮，这样我就可以左右旋转图像。当我旋转图像时，它现在相对于我旋转的 Angular 移动。因此，当我将图像旋转 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