旋转物体面对上鼠标移动鼠标指针(Rotating object to face mouse poin

我有我的游戏鼠标移动光标，这将使我对象对我的鼠标光标射击。 我想我的对象总是沿着旋转，要与我mousecursor线。 我如何转换的光标所在的度角，我的对象旋转X和Y？

我希望我的小提琴将通过旋转播放器（黑方块）让事情更清晰一点，以我的意思： 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轴的三角形，我们可以用反正切函数来计算。 更准确地说，我们使用的便利功能Arctan2其给出正角当y> 0和负角度当y <0。

ATAN2返回弧度度，CSS可与度 ，所以我们使用两个之间进行转换180/Math.PI 。 （A弧度是，当画出的圆的中心角的角的所述量度，拦截电弧，其长度等于该圆的半径的长度。 -来自这里 ）

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

- (e.pageY - boxCenter[1])

我希望这有助于明确一些事情...

下面是一个孤立的jsfiddle例子

顺便说一句，你的游戏是很难！ :)

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

文章来源: Rotating object to face mouse pointer on mousemove