I don't understand how to rotate my object at a certain point. This is the javascript I have

            // create needle 
            var rsr = Raphael('rsr', '320', '240'); 
            var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
            4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
            '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
            'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
            opacity": '1',"stroke-dasharray": 'none'}); 

            needle.rotate(0); 
            needle.transform("t0,-812.36218").data('id', 'needle'); 

            // get needle bounding box 
            var needleBox = needle.getBBox(); 

            // calculate rotation point (bottom middle)
            var x_rotate_point = needleBox.x + (needleBox.width/2); 
            var y_rotate_point = needleBox.y + needleBox.height; 

            // rotate needle
            needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
            +","+y_rotate_point}, 6000); 

            // Creates circle at rotation point 
            var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
            circle.attr("fill", "#f00"); 
            circle.attr("stroke", "#fff"); 

I have created a dummy circle to check if my coordinates of my center point is correct and it is, but it doesn't rotate around that point :-/

When I created gauges in different frameworks that always seemed the way to go, but that logic doesn't seem to translate well into Raphael 2.0.

I did google for it and found some entries but the problem seems it is for older versions which doesn't translate well because a lot of stuff got changed or is deprecated.

I don't understand how to rotate my object at a certain point. This is the javascript I have

            // create needle 
            var rsr = Raphael('rsr', '320', '240'); 
            var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
            4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
            '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap":
            'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
            opacity": '1',"stroke-dasharray": 'none'}); 

            needle.rotate(0); 
            needle.transform("t0,-812.36218").data('id', 'needle'); 

            // get needle bounding box 
            var needleBox = needle.getBBox(); 

            // calculate rotation point (bottom middle)
            var x_rotate_point = needleBox.x + (needleBox.width/2); 
            var y_rotate_point = needleBox.y + needleBox.height; 

            // rotate needle
            needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
            +","+y_rotate_point}, 6000); 

            // Creates circle at rotation point 
            var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
            circle.attr("fill", "#f00"); 
            circle.attr("stroke", "#fff"); 

I have created a dummy circle to check if my coordinates of my center point is correct and it is, but it doesn't rotate around that point :-/

When I created gauges in different frameworks that always seemed the way to go, but that logic doesn't seem to translate well into Raphael 2.0.

I did google for it and found some entries but the problem seems it is for older versions which doesn't translate well because a lot of stuff got changed or is deprecated.

• javascript
• rotation
• raphael
• point

Share Improve this question Follow edited Dec 15, 2011 at 10:25 Glenn De Backer asked Dec 15, 2011 at 10:20 Glenn De BackerGlenn De Backer 4511 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You are setting the center of rotation correctly, but there are some other things going on which are causing some confusion. I was able to get this to work by changing the animation target to:

{transform: needle.attr("transform") + "R45,"+x_rotate_point+","+y_rotate_point}

I think the way you had it, the animation was gradually removing the previous translation while also doing the rotation. This addition allows it to accumulate the transformations. Also, note that I had to switch the 'r' to 'R'. It is not really clear to me what the small 'r' is doing in this example.

Anyway, here is a working demo.

Btw, I also mented out a few rotations that didn't seem to be doing anything.