23

ゲームにmousemoveカーソルがあり、オブジェクトがマウスカーソルに向かって発射されます。オブジェクトを常に回転させて、マウスカーソルと一致させたいです。オブジェクトを回転させるために、カーソルがある場所のXとYを度の角度に変換するにはどうすればよいですか？

私のフィドルが、プレーヤーを回転させることによって、私が意味することを少し明確にすることを願っています（ブラックブロック）：http：//jsfiddle.net/3nEUv/4/

これが私のmouseMove関数です。カーソルがバウンディングボックスに残っていることを確認するだけです

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

3 に答える 3

66

基本的には、ボックスの中心にある点とマウスカーソルの点の間のベクトルを見つけてから、角度を計算して度に変換する必要があります。次に、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は、ボックスの中心とマウスの位置の間にあります。X軸とABの間の角度であるΘ（シータ）を計算しました。

X軸に接触するまでBからY軸に平行に下がる線を想像してみてください。その線、AB、およびX軸を使用して、三角形を取得します。つまり、Arctan関数を使用してシータを計算できます。より正確には、y> 0の場合は正の角度、y<0の場合は負の角度を与えるArctan2の便利な関数を使用します。

atan2は度をラジアンで返し、CSSは度で動作するため、を使用して2つの間で変換し180/Math.PIます。（ラジアンは、円の中心角を描画したときに、長さが円の半径の長さに等しい円弧を横切る角度の尺度です。-ここから取得）

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

- (e.pageY - boxCenter[1])

これがいくつかのことをクリアするのに役立つことを願っています...

これが分離されたjsfiddleの例です

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

于 2013-03-27T08:26:31.077 に答える
4

回転角を渡すすべての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');
  });
});
于 2016-12-16T05:07:40.357 に答える
0

このラジアンから度への変換は私のために働きました：

const angleRadians = Math.atan2(positionUnits.x - this.rotationPivotPoint.x, -(positionUnits.y - this.rotationPivotPoint.y));
const angleDegrees = angleRadians * (180 / Math.PI);
const angle = -(90 - angleDegrees);
于 2021-02-11T18:28:03.537 に答える