Handles not Rendering Correctly

[shawnomanuel]

When a transformation is applied to an element and free transform is called the handles are not rendered correctly .

[jnoreiga]

Can you explain what you mean by "not rendered correctly"? Can you also include your code?

[shawnomanuel]

i'm saving the svg in my db and trying to reload it and modify it . I worked out some parts , but the free transform handles isn't showing correctly . here's a js fiddle duplicating my problem . http://jsfiddle.net/rrYU7/1/ the transformation string was saved to the db and retrieved . but when i use free transform on the transformed element the handles appear outside .

[jnoreiga]

You have to add the free transform first and then do your transformation so that all of you handles and your object are all positioned together. Here's an example. I broke your transformation string into parameters that the freetransform api can understand.

http://jsfiddle.net/rrYU7/3/

[AliasIO]

You're probably looking for ft.offset to set the initial transformations. You can use this to position the handles without changing the element.

Before you save the SVG you need to somehow serialise the paper and save all the transformations so you can restore them on load.

https://github.com/ElbertF/Raphael.FreeTransform/blob/master/raphael.free_transform.js#L72

[shawnomanuel]

I tried both suggestions . but both seem to be producing different results than expected . the black colored rectangle is transformed correctly as expected but the red and blue rectangles seen to be positioned incorrectly . http://jsfiddle.net/rrYU7/5/ Is there any way to get the handles on the black rectangle ?

[AliasIO]

I'm confused. In your last example removing the offset lines fixes the issue. In your first example calling ft.apply() fixes the issue. offset simply gives you a way to manipulate the handles without changing the object itself.

[shawnomanuel]

Hi, Thanks for your valuable feedback, I found a solution to my problem. I was using the toSVG function to save the SVG to my DB and load it from that . I found another plugin to save the Raphael object as JSON using https://github.com/ElbertF/Raphael.JSON . That solved my transformation problem .