Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get complete current transform state of a Raphael element (as object or string)

Tags:

raphael

Simple question that I can't find a simple answer to.

How do I look up the complete current human-readable (non-matrix) transform state of a Raphael element, regardless of whether or how that element's transform state was set?


For example, using element.transform() doesn't give you a complete transform state:

1: If something has been set by matrix, it doesn't give you the non-matrix state. E.g. here the element has been scaled equivalent to s2,2 but there's no s data when we parse the result:

circ = paper.circle(50,50,50);
circ.transform('m2 0 0 2 0 0');
console.log(circ.transform(''));

2: If something hasn't been set, it's undefined rather than giving us the default numeric value. E.g. here there's no s data, whereas I'm hoping for something that would tell us the scale state is equivalent to applying s1,1:

circ = paper.circle(50,50,50);
circ.transform('t100,100');
console.log(circ.transform(''));
like image 361
user56reinstatemonica8 Avatar asked Jan 31 '26 02:01

user56reinstatemonica8


1 Answers

Here's the closest I can find - recording it here because it's not obvious. Tested on paths, circles, ellipses, rectangles. Doesn't work on sets (as sets aren't transformed directly, they're just glorified arrays that apply transforms to their contents).


To get a Raphael element's complete current transform state as an object:

element.matrix.split();

The contents of that object are (with defaults shown for a non-transformed element):

dx: 0
dy: 0
isSimple: true
isSuperSimple: true
noRotation: true
rotate: 0
scalex: 1
scaley: 1
shear: 0

So, to look up a Raphael element's x scale condition, you could use element.matrix.split().scalex;. To look up an element's rotation state independent of what method set it, you could use element.matrix.split().rotate; etc. dx and dy are equivalent to translate values.

circle = paper.circle(5,5,5).attr('transform','s2,2');
alert(circle.matrix.split().scalex);   // alerts 2
alert(circle.matrix.split().dx);       // alerts 0

circle = paper.circle(5,5,5).attr('transform','m2 0 0 2 0 0');
alert(circle.matrix.split().scalex);   // alerts 2
alert(circle.matrix.split().dx);       // alerts 0

circle = paper.circle(5,5,5).attr('transform','t100,100');
alert(circle.matrix.split().scalex);   // alerts 1
alert(circle.matrix.split().dx);       // alerts 100

To get a Raphael element's current transform state as a transform string, the closest seems to be:

element.matrix.toTransformString();

...however, this only includes transformations that have been applied. e.g. if there has been no scaling, there is no s segment in the string rather than any default scaling transformation string like s1,1,0,0.

Likewise if you do...

Raphael.parseTransformString( element.matrix.toTransformString() );

...you get an array with unset values missing, rather than an object with all values present.

There doesn't seem to be any convenient function to turn the output of element.matrix.split(); into a transform string (although it's probably not needed).

like image 78
user56reinstatemonica8 Avatar answered Feb 02 '26 18:02

user56reinstatemonica8



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!