0

次の関数を使用して、マウスの動きを追跡し、オブジェクトを回転させています。

function getAngle(dx, dy) {
    var angle
    if (dx != 0) {
        var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0)
        angle = radiansToDegrees(radians);
        if (angle < 0) angle += 360;
    } else {
        angle = dy > 0 ? 90 : 270;
    }
    return angle;
}

function getAngleBetweenPoints(p1, p2) {
    var dx = p1.x - p2.x
    var dy = p1.y - p2.y
    return getAngle(dx, dy)
}

$(document).mousemove(function (e) {
    if (selectionBounds) {
        var midpoint = new pe.Classes.Point(selectionBounds.Left + (selectionBounds.Width / 2), selectionBounds.Top + (selectionBounds.Height / 2));
        var mousepoint = new pe.Classes.Point(e.pageX, e.pageY);
        var angle = getAngleBetweenPoints(midpoint, mousepoint);
        if (lastAngle) {
            var diff = angle - lastAngle;
            rotate(degreesToRadians(diff));
        }
        lastAngle = angle;
    }
});

これは、マウスをゆっくり動かし、マウスが原点（中点）に近づきすぎない限り、うまく機能します。動きが速すぎるとスピンがさらに回転し、原点に近づくと予期しない方向転換が発生します。

このコードを修正するにはどうすればよいですか？マウスポイントの変更だけで速度を把握し、それに基づいて回転を更新できるため、マウスがどちらの方向（時計回りまたは反時計回り）に移動しているかを知る必要があります。

これに関連するトピックには、文字通り数十のSOスレッドがあります（ピボットポイントから回転した後の長方形の方向（角度）を取得する方法、マウス座標から基本的なマウスの方向を取得する方法、回転した要素をの方向に移動するJavaScriptでのローテーション）-しかし、私は完全には理解していなかったクロス積を必要とするこれについて言及している1つのコメントを除いて、この質問に答えることができるものを見つけることができませんでした。

4

1 に答える 1

6

http://jsfiddle.net/wRexz/3/（クリックしてドラッグし、長方形を回転させます）

    var angle = 0, sp = startpoint, mp = midpoint;
    var p = {x:e.offsetX, y:e.offsetY};
    var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x));
    var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));        

    angle = (pAngle - sAngle) * 180/Math.PI;

    $("#display").text(angle);
    $('#rotateme').css({ rotate: '+=' + angle });

    startpoint = {x:p.x, y:p.y};

ここでの概念は基本的なトリガーです。「始点」の0からの角度を見つけ、「終点」または「現在の点」についても同じことを行います。2番目から1番目を引くと、それが「デルタ角度」になります。

角度がどれほど急速に変化するかという性質のため、中点付近では依然として不安定な動作が発生します。これに対する1つの解決策は、中点から特定の距離内にあるときに回転を停止することです。

于 2012-09-27T23:19:53.473 に答える