我的游戏中有一个 mousemove 光标，它可以让我的对象朝着我的鼠标光标射击。我希望我的对象始终旋转以与我的鼠标光标一致。如何将光标所在位置的 X 和 Y 转换为角度以将对象旋转到？
我希望我的小提琴能让我通过旋转播放器（黑块）更清楚地理解我的意思：http: //jsfiddle.net/3nEUv/4/
这是我的 mouseMove 函数；只确保光标保持在它的边界框中
function mouseMove(e) {
if (cursor) {
if (e.rawX && e.rawY) {
cursorBoundingBox(e.rawX, e.rawY);
}
}
}
基本上，您需要找到框中心点和鼠标光标点之间的向量，然后计算角度并将其转换为度数。然后只需通过 CSS 应用角度：
let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter= {
x: boxBoundingRect.left + boxBoundingRect.width/2,
y: boxBoundingRect.top + boxBoundingRect.height/2
};
document.addEventListener("mousemove", e => {
let angle = Math.atan2(e.pageX - boxCenter.x, - (e.pageY - boxCenter.y) )*(180 / Math.PI);
box.style.transform = `rotate(${angle}deg)`;
})
等等，什么？
好的，让我们把它拆开。这就是我们所拥有的：
矢量 AB 位于框的中心和鼠标位置之间。我们去计算 Θ (theta)，它是 X 轴和 AB 之间的角度。
想象一条线从 B 向下平行于 Y 轴直到它接触 X 轴。使用那条线、AB 和 X 轴，我们得到一个三角形。这意味着我们可以使用 Arctan 函数来计算 theta。更准确地说，我们使用Arctan2的便利函数，当 y>0 时给出正角，当 y<0 时给出负角。
atan2 以弧度返回度数，而 CSS 使用度数，因此我们使用180/Math.PI. （弧度是一个角度的度量，当绘制圆的圆心角时，它与长度等于圆半径长度的弧相交。-取自此处）
最后一个警告 - 由于在浏览器中 Y 轴是倒置的（意思是，你在页面中越往下走，Y 值就越高），我们不得不翻转 Y 轴：我们通过添加一个减号来做到这一点Y 项：
- (e.pageY - boxCenter[1])
我希望这有助于清除一些事情......
这是一个孤立的jsfiddle 示例
顺便说一句，你的游戏很难！:)
我已经为每个带有旋转角度的 html 元素创建了一个旋转脚本。
希望它会有所帮助
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');
});
});
这种弧度到度数的转换对我有用：
const angleRadians = Math.atan2(positionUnits.x - this.rotationPivotPoint.x, -(positionUnits.y - this.rotationPivotPoint.y));
const angleDegrees = angleRadians * (180 / Math.PI);
const angle = -(90 - angleDegrees);