鼠标坐标和旋转
您将如何在 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)))
但这似乎不起作用......
How would you go about mapping mouse coordinates to world coordinates in a 2d context?
For example, you have an image which you can drag. Next, you apply a rotation to that image and redraw it. Now when you drag the image it does not get translated correctly. For example after rotating 90 degrees, dragging up would cause the image to translate to the right.
Any ideas?
Currently attempting to rotate the mouse coordinates like so:
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)))
But this doesn't seem to be working...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是因为平移是在旋转之前完成的。让我解释一下：
当你旋转这个对象时，你将随之旋转平移：
为了解决这个问题；当对象位于原点时，您应该首先旋转该对象，然后进行平移。
旋转对象可能也会旋转该对象的平移（内置），因此您必须反转“平移”，这样它将到达正确的点，但旋转正确。
为了做到这一点；
其中
rot以弧度为单位。This is because the translation is done before the rotation. Let me explain this a little bit:
When you rotate this object, you'll rotate the translations with it:
To solve this; you should first rotate the object, when it's in it's origin, and then translate.
Rotating the object probably will also rotate the translation of that object (built-in), so you'll have to reverse the "translation", so it'll get at the correct point, but with correct rotation.
To do this;
Where
rotis in radians.你有一些位于世界坐标中的图像，并且你正在对其应用仿射变换（旋转、平移和缩放的组合）以获得它在屏幕上的样子：
世界-------- 【仿射变换】------>屏幕
现在，如果您想将屏幕坐标中的某些内容（例如，鼠标光标位置）映射到世界坐标，则需要使用该仿射变换的逆。
如果您的转换只是旋转（如代码片段中所示），则负
旋转即可解决问题。一般来说，您需要将变换及其逆表示为 3x3 矩阵 A 和 A^-1。如果 W 和 S 是世界坐标和屏幕仿射坐标，则有
S = AW 且 W = A^1 S。
要将另一个变换 T 添加到 A，请将左侧的 A 乘以 T，并将右侧的 A^-1 乘以T^-1:
You've got some image that lives in world coordinates, and you're applying an affine transformation (composition of rotations, translations, and scaling) to it to get what it looks like on the screen:
World -------[affine transformation]-------> Screen
Now if you want to map something that's in screen coordinates (for instance, mouse cursor position) to world coordinates, you need to use the inverse of that affine transformation.
If your transformation is just a rotation, as in your code snippet, negative
rotationwill do the trick.In general, you'll want to represent your transformation and its inverse as 3x3 matrices A and A^-1. If W and S are world and screen affine coordinates, you have
S = AW and W = A^1 S.
To add on another transformation T to A, multiply A on the left by T and A^-1 on the right by T^-1:
角度到弧度的转换应该是
The conversion of degree to radian should be