0

数式を使用して2点間の距離を計算し、マウスをその上に移動したときに画像をどれだけ回転させるかを決定します。

  1. クリック、クリックしたポイントをキャプチャします
  2. マウスがドラッグして移動し、マウスが移動したポイントの位置を記録します
  3. 原点と終点の間の距離を計算します
  4. 1から始まるこの値を使用して画像を回転します。

たとえば、画像の中央をクリックすると、マウスを右にドラッグし始め、画像が完全に回転します。クリックを放さずに、画像上でマウスをドラッグして戻すと、画像は逆回転します。完全。これで、マウスがその中心（最初にクリックした場所）に到達すると、距離が限界（0）に達し、左に移動しても新しい値がすべて正になるため、画像が反対方向に回転します。

2点間の距離は正のはずですが、（0）に戻ったら、画像を適切に回転させるために負にするものが必要です。

4

2 に答える 2

0

最速の方法は、単純なifステートメントを使用することです。

if (x2 < x1)
    dist = -dist;

あなたが書いたものから推測するように、Y軸のみを中心に回転するか、X軸を中心に回転するかを検討する必要があります。その場合、回転の方向は(y2 < y1)（2回転の構成）かどうかによって決まります。

于 2012-10-01T20:18:16.093 に答える
0

http://jsfiddle.net/wRexz/4/

var dragging = false, startpoint, endpoint, midpoint = $("#center").position();
midpoint = {x:midpoint.left - 2, y:midpoint.top-2};

$("#stage").mousedown(function(e){
    dragging = true;
    startpoint = {x:e.offsetX, y:e.offsetY};
});

$("#stage").mouseup(function(e){
    dragging = false;
});

$("#stage").mousemove(function(e){
    if (dragging){
        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};
    }
});​

これにより、2点間の相対回転角がわかります。イベントが発生するたびに更新mousemoveされるため、一度に180度を超えることはありません（中点をドラッグする場合を除く）。後者は座標系を対象としていないためMath.atan2、ロジックが単純化されます。Math.atan

于 2012-10-03T15:44:42.707 に答える