Drag and dropping using Raphael js_问答_开发者

开发者 https://www.devze.com 2023-01-05 23:43 出处：网络

I\'m trying to build a puzzle game in javascript, using raphael to take care of the drag and drop and rotation of the pieces.

I'm trying to build a puzzle game in javascript, using raphael to take care of the drag and drop and rotation of the pieces.

The problem I'm facing is: Whenever I rotate an image, its coordinate system is rotated as well and the drag and drop doesn't work anymore as expected.

Edit2: Here is a simple test case. Drag around the ellipse, rotate it, and then try to drag again: http://www.tiagoserafim.com/tests/dragdrop.html

Edit: To clarify, whenever I move 1 pixel with the mouse to the right (x++), the image also moves 1 pixel on the x-coord, but on its 开发者_Go百科own coordinate system, that maybe rotate, as the image below shows.

Drag and dropping using Raphael js

_{(source: oreilly.com)}

As explained on SVG Essentials, this is the expected behavior.

My question is: Is there an elegant way to do what I want, or I'll be forced to manually calculate the correct coords by using rotation matrix?

Other JS libraries or suggestions will be very welcome, even if they mean losing the IE support.

As also noted in that article, the order of transformations is important.

Translate object so the center point (Or whatever other point you want to rotate around) is at 0,0
Rotate
Translate back to previous position

Also note that there is an overload of rotate that already does this.

<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>