在mousemove上旋转对象以面对鼠标指针

Question

我的游戏中有一个鼠标移动光标，这会让我的对象朝我的鼠标光标射击。我希望我的对象始终旋转以与我的鼠标一致。如何将光标所在的X和Y转换为角度以将对象旋转到？

我希望通过旋转播放器（Black block），我的小提琴能让我更清楚一点：http://jsfiddle.net/3nEUv/4/

这是我的mouseMove功能;只确保光标保留在其边界框中

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}

Answer 1

基本上你需要找到盒子中心点和鼠标光标点之间的向量，然后计算角度并将其转换为度数。然后通过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)'});

<强>什么

好的，让我们分开吧。这就是我们所拥有的：

矢量AB位于框的中心和鼠标位置之间。我们去计算Θ（theta），它是X轴和AB之间的角度。 由于AB创建了一个带X轴和Y轴的三角形，我们可以使用Arctan函数来计算它。更确切地说，我们使用Arctan2的便利函数，当y> 0时给出正角度，当y <0时给出负角度。

atan2返回弧度中的度数，CSS使用度，因此我们使用180/Math.PI在两者之间进行转换。 （弧度是角度的度量，当绘制圆的中心角时，截取一个长度等于圆的半径长度的弧。 - 取自here）

最后一个警告 - 因为在浏览器中Y轴是反转的（意思是，你在页面中走得越远，Y值越高），我们不得不翻转Y轴：我们这样做是通过添加一个Y项上的减号：

- (e.pageY - boxCenter[1])

我希望这有助于澄清一些事情......

这是一个孤立的jsfiddle example

顺便说一句，你的游戏很难！ ：）

Answer 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');
  });
});

Answer 3

这个弧度到度的转换对我有用：

const angleRadians = Math.atan2(positionUnits.x - this.rotationPivotPoint.x, -(positionUnits.y - this.rotationPivotPoint.y));
const angleDegrees = angleRadians * (180 / Math.PI);
const angle = -(90 - angleDegrees);