0

マウスの角度を使用して画像を回転させようとしています: まず、次を使用してマウスの角度を計算します。

                mouseX = parseInt(e.clientX - offsetX);
                mouseY = parseInt(e.clientY - offsetY);
                var mouse_x = e.pageX; var mouse_y = e.pageY;
                var radians = Math.atan2(mouse_y - crossY, mouse_x - crossX);
                if (radians < 0) radians += 2.0 * Math.PI;
                degree = (radians * 180 / Math.PI + 90) % 360;

次に、ステージの中央に円を作成しました (円の位置に応じてオフセットを再計算します)。円をドラッグすると、次を使用して画像が回転します。

  circle2.on('dragmove', function (event) {
            var newangle = dImage1.getRotation();
            $("#newangle").html(newangle);
            dImage1.rotate((degree - newangle) / 36000); // I used 36000 as a factor to calibrate the degree of rotation
            dlayerA1.draw();
        });

最初の質問は、円の回転に基づいて画像を回転させるための正しい要因を理解できなかったことです。2 番目の質問は、円を反時計回りに回転させる方法です。

完全なデモはhttp://jsfiddle.net/user373721/pz7W8/にあります。

どうぞよろしくお願いいたします。

4

1 に答える 1

0

.rotate() は、必要な角度のみを追加するのは .setRotation() だと思います。これにより、前後の回転が可能になります。

http://jsfiddle.net/pz7W8/2/

    dImage1.setRotation((degree - newangle) / 180); // Keep experimenting what number to divide by
于 2013-04-03T15:05:23.467 に答える