鼠标坐标和旋转

时间:2010-06-04 01:20:04

标签: javascript graphics canvas 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)))

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

3 个答案:

答案 0 :(得分:2)

这是因为翻译是在轮换之前完成的。让我解释一下:

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以弧度为单位。

答案 1 :(得分:1)

你有一些生活在世界坐标中的图像,你正在应用仿射变换(旋转,平移和缩放的组合)来获得它在屏幕上的样子:

世界------- [仿射变换] -------&gt;屏

现在,如果要将屏幕坐标中的内容(例如,鼠标光标位置)映射到世界坐标,则需要使用该仿射变换的

如果您的转化只是一次轮换,就像在代码段中一样,否定rotation将会解决问题。

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

要将另一个转换T添加到A,请将左侧的A 乘以T,将右侧的A ^ -1 乘以T ^ -1:

A = TA
A^-1 = A^-1 T^-1

答案 2 :(得分:1)

将度数转换为弧度应为

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