Raphael 2 rotate and translate

Here is my script:

<script>
Raphael.fn.polyline = function(pointString) {
    return this.path("M" + pointString);
};

window.onload = function() {

var paper = Raphael("holder", 500, 500);
paper.circle(100, 175, 70).attr({"stroke-width":10, "stroke":"red"});

var a = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(25, 100, 175);
var b = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(45, 100, 175);
var c = paper.polyline("92,102 96,91 104,91 108,102"开发者_如何学运维).attr({"fill":"green", "stroke-opacity":"0"}).rotate(65, 100, 175);

var group = paper.set();
group.push(a, b, c);

group.translate(60);

};
</script>

When I use raphael-1.5.2, the result is:

When I use raphael 2.0, the result is:

In 1.5.2 it uses the rotate transformation to rotate the objects around the circle and in 2.0 it uses the matrix transformation. I assume the matrix transformation transforms the coordinate system for that object, so when you later translate the object in the xy direction it translates it in the xy that is relative for that object.

I need to be able to add green objects around the edge of the red circle and then be able to drag and move everything in the same direction. Am I stuck using 1.5.2 or am I just missing how translate has changed in 2.0?

Use an absolute transform instead of translate. Say you want to move of 100 in x and 50 in y do this:

Element.transform("...T100,50");

Make sure you use a capital T and you'll get an absolute translation. Here's what the documentation says about it:

There are also alternative “absolute” translation, rotation and scale: T, R and S. They will not take previous transformation into account. For example, ...T100,0 will always move element 100 px horisontally, while ...t100,0 could move it vertically if there is r90 before. Just compare results of r90t100,0 and r90T100,0. See documentation

Regarding translate, according to the documentation in Raphael JS 2.0 translate does this:

Adds translation by given amount to the list of transformations of the element. See documentation

So what happens is it appends a relative transformation based on what was already applied to the object (it basically does "...t100,50").

I suspect that with 1 your transform correctly treats the set as one object but with 2 the little greeny things rotate indepently Two is a complete redesign so little disconnects like this will occur Use getBBox and find the centre of your set, then use 1 rotate command on the whole set specifying cx cy derived from getBBox