OK, this seems to be a possible solution along with the posted idea of nested groups. Here are the operations as I see them:
- Movement: Affects translation value. If I drag and drop an element around the canvas, I append deltas to the translation. - Scaling: Affects the scale value. To scale around a center point, translation is also affected. This is absolute and not added via deltas. If I need to scale from 2x to 3x, I need to "remove" or "ignore" the translation value applied to 2x and just do an absolute scale to 3x. - Rotation: Affects the rotate value. To rotate around a center point, it appears both scale AND translate are affected. I'm not sure why scaling is affected but according to the documentation on the transform, it is. So maybe something like this would work? <rect xmlns:foo="http://www.foo.com/myns"; x=0 y=0 w=10 h=10 foo:center="5.0, 5.0" foo:move="10.0,10.0" foo:scale="2.0" foo:rotate="90.0"/> Obviously the transform information is missing. When I click an element on the canvas, I read the other attributes and derive a transform from them: - First I translate by 10.0, 10.0 to apply the move translate. - Then I figure out the scale translation as (-centerPoint * (scaleFactor - 1)): -5.0 * (2.0 - 1.0) == -5.0 (x) -5.0 * (2.0 - 1.0) == -5.0 (y) - Here is where I'm not sure what to do. I have to manually provide the information to scale around a center point. With rotate(t, x, y), it seems to happen automatically. Do I just feed it the rotate value and let it go? The resultant element would be: <rect xmlns:foo="http://www.foo.com/myns"; x=0 y=0 w=10 h=10 foo:center="5.0, 5.0" foo:move="10.0,10.0" foo:scale="2.0" foo:rotate="90.0" transform="translate(5.0, 5.0) scale(2.0) rotate(90.0, 5.0, 5.0)"/> This way, if I change the scale, I change it in foo:scale. When I build the transform, I reapply the above calculations and build a new transform every time I "edit" an element. Does this approach make sense? The other path is nested groups and I think I'd rather avoid those if I could. Michael Bishop -----Original Message----- From: Archie Cobbs [mailto:[EMAIL PROTECTED] Sent: Friday, December 09, 2005 2:41 PM To: [email protected] Subject: Re: Scaling around a center point... Bishop, Michael W. CONTR J9C880 wrote: > Yeah, I'm learning more about transforms than I really want to. Oh well, it helps. Unfortunately, applying a rotate to a transform seems to really screw up scaling AND translating. Looking at the matrix, it makes sense as to why. If I draw an element to the JSVGCanvas, and want to be able to move, scale, and rotate it without one operation hosing up another, how do I achieve this? I had scaling and translating down pat, but rotation breaks everything. Rotation is always around some point. If you want the icon or whatever to always rotate around its center point, then you have to remember where that is. Then you can always temporarily translate back to (0,0) before (un)doing any rotation and/or scaling. E.g., add some attributes to the node (using a different namespace) to maintain this information... <g xmlns:foo="http://www.foo.com/myns"; tranform="..." foo:center="123.4 567.8"> -Archie ________________________________________________________________________ __ Archie Cobbs * CTO, Awarix * http://www.awarix.com --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED] --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
