CODEWITHSUNDEEP
javascriptraphael
hrsetyono
hrsetyono

Reputation: 4464

Raphael JS - Rotate whole set resulting in weird rotation

[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

Answers (1)

hrsetyono
hrsetyono

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

Related Questions