CODEWITHSUNDEEP
svgraphael
bits
bits

Reputation: 8340

How can we Save and Restore transformation states in RaphaelJS

I am using RaphaelJS for a project that requires vector drawing for visualization of some data.

I am not able to figure out how to push and pop transformation states. (equivalent of context.save() and context.restore() in html5 canvas)

Can someone point me in the right direction?

thanks.

Upvotes: 1

Views: 1121

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60996

Could you explain why you need to push and pop transformation state?

In svg you don't really need to do that, the browsers do it for you. If you want a particular transform to apply to an element then just add a transform attribute to it. You can make a transform apply to many elements by using <g> elements (in Raphaël there's Paper.set, which can be used like a <g> element, and you have the Element.transform method to set the transforms).

Update:

context.save() - in svg terms this would be to take the current transformation matrix (CTM) of the element at a given time and storing it somewhere, in Raphaël I guess this might be Element.transform() (I'm not 100% sure if it includes whole stack of transformations or not, anyway, in pure svg the CTM can be fetched via the getCTM() method which is available on all elements). One way of doing this would be to insert a <g> element with the transformation you want.

context.restore() - in svg this would be equivalent to removing a transformation from the list of transforms, but note that in svg siblings don't "inherit" the transformation (this is unlike html5 canvas or OpenGL where the currently set matrix is just applied to anything you draw after setting the transform). If you want a transform to apply to many elements then you create a <g> which has the transformation that should apply to all the children of that element, and to restore you just insert elements to the parent of the <g> instead. Raphaël doesn't have any built-in support for the <g> element (unless you count Element.set, which is a similar concept), a guess for why Raphaël does this is that it's to prevent people from trying to do things like this since it becomes very easy to bloat the DOM without realizing it (remember, SVG is a retained mode graphics format, unlike canvas and OpenGL).

Upvotes: 1

Related Questions