Home/ Questions/Q 897533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:54:04+00:00

I’m trying to build a puzzle game in javascript, using raphael to take care

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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