Reputation: 4464
[EDITED because I made progress]
I have this wheel with text that spans linearly.
Here's the JS Fiddle to show the visual and my code:
http://jsfiddle.net/DarcFiddle/F3gsD/10/
So I create a set:
paper.setStart();
// draw draw draw
var set = paper.setFinish();
Then here's a method to rotate it:
var degree = 0;
function rotateSet() {
degree = degree + 90;
set.animate({ transform: ["R", degree, canvasCenter, canvasCenter]}, 500 );
}
You can try this by clicking the "Rotate" button from the JSFiddle.
But as you can see, the element also rotate on its own center, which break the structure.
What can I do to prevent this?
Thanks
Upvotes: 1
Views: 270
Reputation: 4464
I did it with double rotation
http://jsfiddle.net/DarcFiddle/F3gsD/12/
So, I loop the set and do two r
transformation. First one is the center of the circle and second one is rotate back only the text as suggested by Ian in the comment above.
set.forEach(function(e) {
var textDegree = Math.round( Raphael.angle(e.attr("x"), e.attr("y"), x, y) );
if(e.attr("text-anchor") === "end") {
textDegree = textDegree - 180;
}
e.animate({
transform: ["r", degree, x, y, "r", textDegree, e.attr("x"), e.attr("y")]
}, 500);
});
Upvotes: 1