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

发布于 2024-09-14 04:48:54 字数 312 浏览 8 评论 0原文

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

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

嗯，我知道我可能有点含糊，所以这里是问题的演示。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清音悠歌 2024-09-21 04:48:54

我无法访问您提供的演示网址，但这应该是通用的。

您需要将对象移动到坐标空间 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

I cannot access the demo url you provided, but this should be universal.

You need to move your object to the base of your coordinate space o:(0,0), do your rotation, and then move your object back to where it was before you moved it, and since all your transformations are joined into a single transformation matrix, the order of transformations is very important, and you basically just need to do them inversely, i.e. move your object back to its initial position, then rotate it, and then move it to the coordinate space base:

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

And voila.
Here's the demo: http://jsfiddle.net/ArtBIT/CdbWx/1

回复收藏 0 原文

猫腻 2024-09-21 04:48:54

交换这两行。

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

尝试先旋转然后平移

try to swap this two lines

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

first rotate and then translate.

回复收藏 0 原文

梦开始←不甜 2024-09-21 04:48:54

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

Similar to ArtBIT's answer, but taking into consideration you wanting to rotate from the center, I would use the code:

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

回复收藏 0 原文

~没有更多了~