CODEWITHSUNDEEP
javascriptsvgraphael
Tiago
Tiago

Reputation: 9557

Drag and dropping using Raphael js

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 own coordinate system, that maybe rotate, as the image below shows.

alt text
(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.

Upvotes: 4

Views: 2213

Answers (1)

Dark Falcon
Dark Falcon

Reputation: 44181

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

  1. Translate object so the center point (Or whatever other point you want to rotate around) is at 0,0
  2. Rotate
  3. 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>

Upvotes: 3

Related Questions