Raphael cumulative vs absolute scaling/rotation/translation?

Question

I'm trying to draw an interactive map in Javascript, using Raphael to do the heavy lifting.

The map background is a fairly complicated thing containing a grid, the map elements, labels, etc. On top of this I'm then going to draw the stuff the user is actually working with. Because the background is complex, I don't want to have to rerender it every frame. So, after drawing it I would like to reuse those drawing elements, merely changing the translation, rotation, scaling of the background as the user pans, zooms, etc.

Unfortunately I'm rather confused by Raphael's transformation primitives: they're not behaving as I would expect. If I call scale(), the scaling appears to apply to the original size of the drawing element; but translate() is cumulative, so it applies to the previous translation. rotate() can be either, as it has an option I can set...

Is it possible to do absolute translation? That is, to be able to specify the absolute coordinates of the new center of my objects (which are usually paths)? Failing that, is keeping track of the old location so I can apply a delta when I want to move it to the new location a reasonable way of doing this?

Or would I be better off simply rerendering the whole thing every frame? (I see suggestions that Raphael isn't good at transformations of complex drawings, as most of it is done in Javascript; looking at the SVG that's being produced, I see that the translation appears to be getting backed into the path data, which would bear this out...)

(BTW, FWIW I'm using the GWT Raphael interface for all this.)

Answer 1

You can use Element.attr to set absolute positions. Just change x and y properties:

myElement.attr("x", myX);
myElement.attr("y", myY);

Answer 2

I've used the raphael-zpd plugin with success. I'm not sure if that will plug into GWT - you could check out their source code and adapt it to your use case.

• Project: https://github.com/somnidea/raphael-zpd
• Source: https://github.com/somnidea/raphael-zpd/blob/master/raphael-zpd.js