我的游戏中有一个 mousemove 光标，它可以让我的对象朝着我的鼠标光标射击。我希望我的对象始终旋转以与我的鼠标光标一致。如何将光标所在位置的 X 和 Y 转换为度角以将对象旋转到？
我希望我的小提琴能让我通过旋转播放器（黑块）更清楚我的意思：http://jsfiddle.net/3nEUv/4/
这是我的 mouseMove 函数；只确保光标保持在它的边界框内
function mouseMove(e) {
if (cursor) {
if (e.rawX && e.rawY) {
cursorBoundingBox(e.rawX, e.rawY);
}
}
}
【问题讨论】：
标签： javascript html html5-canvas trigonometry
基本上，您需要找到框中心点和鼠标光标点之间的向量，然后计算角度并将其转换为度数。然后通过 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
atan2 以 弧度 为单位返回度数，CSS 使用 degrees，因此我们使用 180/Math.PI 在两者之间进行转换。 （弧度是一个角度的度量，当绘制圆的圆心角时，它与长度等于圆半径长度的弧相交。-取自here）
最后一个警告 - 由于在浏览器中 Y 轴是倒置的（意思是，您在页面中越往下走，Y 值就越高），我们不得不翻转 Y 轴：我们通过添加一个Y 项上的减号：
- (e.pageY - boxCenter[1])
我希望这有助于澄清一些事情......
这是一个孤立的jsfiddle example
顺便说一句，你的游戏很难！ :)
【讨论】：
pos/size 更改为pos-size，即[player.sprite.x/(player.sprite.width/2), player.sprite.y/(player.sprite.height/2)]; 更改为[player.sprite.x-(player.sprite.width/2), player.sprite.y-(player.sprite.height/2)];
我已经为每个带有旋转角度的 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);
【讨论】：