Geek Answers Handbook

Raphael 2 rotates and translates

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: enter image description here

When I use raphael 2.0, the result is: enter image description here

In 1.5.2, it uses a rotary transform to rotate objects around a circle, and in 2.0, it uses a matrix transform. I assume that the matrix transformation converts the coordinate system for this object, so when you later translate the object in the xy direction, it translates it to xy, which is relative for this 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 one direction. Am I stuck using 1.5.2, or I just missed how the translation changed to 2.0?

+4
source share
2 answers

Use absolute conversion instead of translation. Suppose you want to move 100 from x and 50 to y:

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

Make sure you use T capital and you will receive an absolute transfer. This is what the documentation says:

There is also an alternative “absolute” translation, rotation, and scale: T, R, and S. They will not take into account the previous conversion. For example, ... T100,0 will always move the 100 px element horizontally, while ... t100,0 can move it vertically, if r90 used to be. Just compare the results of r90t100.0 and r90T100.0. See documentation

As for the translation, according to the documentation in Raphael JS 2.0 translate does the following:

Adds a translation of a given value to the list of transformations of an element. See documentation

So what happens is that it adds a relative transformation based on what has already been applied to the object (basically this is "... t100.50").

+5
source

I suspect that with 1 your transform correctly processes the set as one object, but with 2 small green things rotates independently Two is a complete redesign, so there will be such a small disconnect Use getBBox and find the center of your set, then use 1 rotate command for the whole set defining cx cy obtained from getBBox

0
source

More articles:


All Articles