Javascript 鼠标坐标和旋转

在二维环境中，如何将鼠标坐标映射到世界坐标

例如，您有一个可以拖动的图像。接下来，对该图像应用旋转并重新绘制。现在，当您拖动图像时，它无法正确转换。例如，旋转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)))

---

但这似乎不起作用…

您得到了一些生活在世界坐标系中的图像，您正在对其应用仿射变换（旋转、平移和缩放的组合），以获得屏幕上的图像：

世界----[仿射变换]------>屏幕

现在，如果要将屏幕坐标（例如，鼠标光标位置）中的某个对象映射到世界坐标，则需要使用仿射变换的倒数

如果您的转换只是一个旋转，就像在您的代码片段中一样，那么负的

旋转将起到作用

通常，您需要将变换及其逆表示为3x3矩阵A和A^-1。如果W和S是世界和屏幕仿射坐标，则
S=AW，W=A^1 S

若要将另一个变换T添加到A，请将左侧的A乘以T，将右侧的A^-1乘以T^-1：

你得到了一些生活在世界坐标系中的图像，你正在对其应用仿射变换（旋转、平移和缩放的组合），以获得它在屏幕上的外观：

世界----[仿射变换]------>屏幕

现在，如果要将屏幕坐标（例如，鼠标光标位置）中的某个对象映射到世界坐标，则需要使用仿射变换的倒数

如果您的转换只是一个旋转，就像在您的代码片段中一样，那么负的
旋转将起到作用

通常，您需要将变换及其逆表示为3x3矩阵A和A^-1。如果W和S是世界和屏幕仿射坐标，则
S=AW，W=A^1 S

若要将另一个变换T添加到A，请将左侧的A乘以T，将右侧的A^-1乘以T^-1：

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

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

旋转此对象时，将使用它旋转平移：

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

这样做

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

其中，
rot
以弧度为单位。
这是因为平移是在旋转之前完成的。让我解释一下：

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

旋转此对象时，将使用它旋转平移：

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

这样做

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

其中，
rot
以弧度为单位。
度到弧度的转换应为

double angle = (double) angleOfRotation / (double)180 * 3.14;

度到弧度的转换应为

double angle = (double) angleOfRotation / (double)180 * 3.14;