4

ピースのドラッグアンドドロップと回転を処理するためにラファエルを使用して、JavaScriptでパズルゲームを構築しようとしています。

私が直面している問題は、画像を回転させるたびに、その座標系も回転し、ドラッグアンドドロップが期待どおりに機能しなくなることです。

Edit2：これは簡単なテストケースです。楕円の周りをドラッグして回転させてから、もう一度ドラッグしてみてください： http ://www.tiagoserafim.com/tests/dragdrop.html

編集：明確にするために、マウスを右（x ++）に1ピクセル移動すると、画像もx座標上で1ピクセル移動しますが、下の画像に示すように、それ自体の座標系上で回転する可能性があります。

代替テキスト
（出典：oreilly.com）

SVG Essentialsで説明されているように、これは予想される動作です。

私の質問は次のとおりです。私がやりたいことを行うためのエレガントな方法はありますか、それとも回転行列を使用して正しい座標を手動で計算する必要がありますか？

他のJSライブラリや提案は、IEのサポートを失うことを意味する場合でも、大歓迎です。

4

1 に答える 1

3

その記事にも記載されているように、変換の順序は重要です。

  1. 中心点（または回転させたい他の点）が0,0になるようにオブジェクトを移動します
  2. 回転する
  3. 前の位置に戻す

また、すでにこれを行っている回転の過負荷があることに注意してください。

<html>
    <head>
        <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
        <script type="text/javascript">
            function Draw()
            {
                var x = 150, y = 150;
                var rotation = 0;
                var paper = Raphael(0, 0, 800, 800);
                var e = paper.ellipse(x, y, 30, 10);
                paper.path("M150 150L800 150");
                window.setInterval(function()
                {
                    x += 10;
                    rotation += 10;
                    e.translate(10, 0);
                    e.rotate(rotation, x, y);
                }, 500);
            }
        </script>
    </head>
    <body onload="Draw()">
    </body>
</html>
于 2010-07-05T19:02:52.247 に答える