javascript - 鼠标坐标和旋转

Question

在 2d 上下文中，您将如何将鼠标坐标映射到世界坐标？

例如，您有一个可以拖动的图像。接下来，对该图像应用旋转并重新绘制它。现在，当您拖动图像时，它无法正确翻译。例如旋转 90 度后，向上拖动会使图像向右平移。

有什么想法吗？

目前正在尝试像这样旋转鼠标坐标:

mouseX = ((mouseX*Math.cos(rotation*180/Math.PI))-(mouseY*Math.sin(rotation*180/Math.PI))),
mouseY = ((mouseX*Math.sin(rotation*180/Math.PI))+(mouseY*Math.cos(rotation*180/Math.PI)))

但这似乎不起作用......

Answer 1

这是因为平移是在旋转之前完成的。让我稍微解释一下:

O=====>     (translate X)
      |     (translate Y)
      |
      x     (location)

当你旋转这个对象时，你会旋转它的平移:

      O     
      |     
      |     (translate X)
      |
      |
   x==<     (translate Y & location)

解决这个问题；你应该首先旋转对象，当它在原点时，然后平移。

旋转对象可能也会旋转该对象的平移(内置)，因此您必须反转“平移”，这样它才能到达正确的点，但旋转正确。

translate ---> rotate ---> inverse-translate

为此；

x = x * cos(-rot) - y * sin(-rot)
y = x * sin(-rot) + y * cos(-rot)

rot 的单位是弧度。