mousemove上でオブジェクトを回転させてオブジェクトを回転させる

Question

マウスカーソルに向かって私のオブジェクトを撮影する私のゲームにmousemoveカーソルがあります。私は自分のオブジェクトが私のマウスカーソルに沿って常に回転するようにしたい。オブジェクトを回転させるためにカーソルがある角度にある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)'}); 

WHAT

[OK]を、のは、これを離れてみましょう。これは、我々が持っているものです。

ABはボックスの中心とマウスの位置の間で行くベクトル。 X軸とABの間の角度であるΘ（シータ）を計算しました。 ABはX軸とY軸を持つ三角形を作成するので、Arctan関数を使ってそれを計算することができます。より正確には、我々は、正の角を与えるArctan2の便利な機能を使用するとき、Y> 0と負の角度ときY < ラジアン中度を返し、CSSは度で動作ATAN2 0

ので、我々は180/Math.PIを使用して2つの間で変換します。 （円の中心角を引いたときに円の半径の長さに等しい長さの円弧を横切る角度のラジアン - here）

最後に1つの注意点 - ブラウザではY軸が反転しているので（つまり、ページの下に行くほどY値が高くなります）、Y軸を反転する必要がありました.Y項にマイナス記号を追加しています。

- (e.pageY - boxCenter[1])

私は...これは明確ないくつかのことを助け

を願ってここにあるのですolated jsfiddle example

ところで、あなたのゲームは難しいです！ :)

Answer 2

回転角を渡してすべてのhtml要素の回転スクリプトを作成しました。

はSOの前に解決策を考え出すていない場合、それは

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