ansaurus

Question

Answer 1

+2 A:

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"&gt;&lt;/script&gt;
        <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>

Dark Falcon 2010-07-05 19:02:52

Hi! Yes, this is exactly what I'm doing. The problem is afterwards, when I try to drag and the image moves on its own x-coord, instead of the default horizontal x-coord, for example.

Tiago 2010-07-05 19:05:25

Hi again! Thanks for your time working on this code. I tried it here and if you translate by 10 pixels instead of 1, you can see my problem happening: the image doesn't follow an straight, horizontal line.

Tiago 2010-07-05 19:29:05

I added a straight horizontal line and increased both the distance moved and the angle of rotation. It still follows a straight line.Are you using an old version of Raphael, perhaps? I am using a fresh copy.

Dark Falcon 2010-07-05 19:54:05

Mine didn't work as expected because I increased the translation to 10 pixels, but I didn't change the x+= 10 too. Thanks to you, now I see another use to rotate(trans, x, y).But still, I think that this doesn't solve the original problem. Suppose that you rotate the image by 45 degrees, and then translate it by (10, 0). It won't move on the horizontal anymore because of the new coord system. Therefore, it breaks the dragging and dropping, because it gives delta values relatives to the default coordinate system. Thanks again for your time and patience.

Tiago 2010-07-05 20:08:28

I still cannot reproduce. Every time I rotate using the version that takes a point, it works perfectly. Can you provide code that fails?

Dark Falcon 2010-07-06 01:31:12

http://www.tiagoserafim.com/tests/dragdrop.htmlHi Dark! By making this code, I was able to verify that you're right: translate(dx, dy) does, indeed, work as it should. My problem is that I'm messing around with the internal {cx, cy} attributes. I'll dig into raphael source to see how translate works and see if I can make it work with the default drag and drop method provided. Thank you so much for your time and patience!

Tiago 2010-07-06 17:50:01

Tiago, should you select Dark Falcon's answer as selected? Don't bother answering me :)

Fabiano PS 2010-07-06 18:11:23

@Fabiano: Yes, silly me for not accepting the answer right way :-)

Tiago 2010-07-06 20:20:38

ansaurus

tags:

views:

answers:

Drag and dropping using Raphael js

related questions