Html 在mousemove上旋转对象以面对鼠标指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15653801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating object to face mouse pointer on mousemove
提问by CaptainCarl
I've got a mousemove cursor in my game which will make my object shoot towards my mouse cursor. I'd like my object to always rotate along to be in line with my mousecursor. How can i convert the X and Y of where the cursor is to a degree angle to rotate my object to?
我的游戏中有一个 mousemove 光标，它将使我的对象朝着我的鼠标光标射击。我希望我的对象始终旋转以与我的鼠标光标保持一致。如何将光标所在位置的 X 和 Y 转换为角度以将对象旋转到哪个角度？
I hope my fiddle will make things a little clearer of to what i mean by rotating the player(Black block): http://jsfiddle.net/3nEUv/4/
我希望我的小提琴能让我通过旋转播放器（黑色块）更清楚我的意思：http: //jsfiddle.net/3nEUv/4/
Here's my mouseMove function now; Only making sure the cursor remains in it's bounding box
现在这是我的 mouseMove 函数；只确保光标保持在它的边界框中
function mouseMove(e) {
if (cursor) {
if (e.rawX && e.rawY) {
cursorBoundingBox(e.rawX, e.rawY);
}
}
}
回答by OpherV
Basically you need to find the vector between the the point in the center of your box, and the point of the mouse cursor, then calculate the angle and convert it to degrees. Then just apply the angle via CSS:
基本上，您需要找到框中心点与鼠标光标点之间的向量，然后计算角度并将其转换为度数。然后只需通过 CSS 应用角度：
var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];
var angle = Math.atan2(e.pageX - boxCenter[0], - (e.pageY - boxCenter[1]) )*(180/Math.PI);
box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
WHAT
什么
Ok, let's take this apart. This is what we have:
好吧，让我们把它拆开。这就是我们所拥有的：
The vector AB goes between the center of the box and the mouse position. We went to calculate Θ (theta), which is the angle between the X axis and AB. Since AB creates a triangle with the X and Y axes, we can use the Arctan function to calculate it. More precisely, we use the convenience function of Arctan2which gives a positive angle when y>0 and negative angle when y<0.
矢量 AB 在框的中心和鼠标位置之间。我们去计算 Θ (theta)，它是 X 轴和 AB 之间的角度。由于 AB 创建了一个带有 X 轴和 Y 轴的三角形，我们可以使用 Arctan 函数来计算它。更准确地说，我们使用Arctan2的便利函数，当 y>0 时给出正角度，当 y<0 时给出负角度。
atan2 returns the degrees in radians, and CSS works with degrees, so we convert between the two using 180/Math.PI. (A radian is the measure of an angle that, when drawn a central angle of a circle, intercepts an arc whose length is equal to the length of the radius of the circle. - Taken from here)
atan2 以弧度返回度数，CSS 使用度数，因此我们使用180/Math.PI. （弧度是角度的量度，当绘制圆的中心角时，截取长度等于圆半径长度的弧。-取自此处）
One last caveat - Since in the browser the Y axis is inverted (meaning, the further down you go in the page, the higher the Y value gets), we had to flip the Y axis: We did so by adding a minus sign on the Y term:
最后一个警告 - 由于在浏览器中 Y 轴是倒转的（意思是，您在页面中越往下，Y 值越高），我们必须翻转 Y 轴：我们通过在Y 项：
- (e.pageY - boxCenter[1])
- (e.pageY - boxCenter[1])
I hope this helps clear some things...
我希望这有助于澄清一些事情......
Here's an isolated jsfiddle example
这是一个孤立的jsfiddle 示例
BTW, Your game is hard! :)
顺便说一句，你的游戏很难！:)
回答by Devdutt Sharma
I have create a rotation script for the every html element with passing angle of rotation.
我为每个带有旋转角度的 html 元素创建了一个旋转脚本。
Hope it will help
希望它会有所帮助
function MouseRotate(e, elt) {
var offset = elt.offset();
var center_x = (offset.left) + (elt.width() / 2);
var center_y = (offset.top) + (elt.height() / 2);
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
$(elt).css('-moz-transform', 'rotate(' + degree + 'deg)');
$(elt).css('-webkit-transform', 'rotate(' + degree + 'deg)');
$(elt).css('-o-transform', 'rotate(' + degree + 'deg)');
$(elt).css('-ms-transform', 'rotate(' + degree + 'deg)');
}
$(document).ready(function() {
$('#'+tagVal).mousedown(function(e) {
$(document).bind('mousemove', function(e2) {
rotateOnMouse(e2,$('#'+tagVal));
});
});
$(document).mouseup(function(e) {
$(document).unbind('mousemove');
});
});
