xmlgraphics-batik-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Bishop, Michael W. CONTR J9C880" <Michael.Bis...@je.jfcom.mil>
Subject RE: Scaling around a center point...
Date Fri, 16 Dec 2005 19:33:26 GMT
Man, just when you think it's all over...

I have a new problem with transforms.  Rotation doesn't seem to work
when I scale non-uniformly.  If I scale in just the X direction or just
the Y direction, then apply rotation to it, it doesn't look right.  If I
draw an ellipse and scale it on the Y-axis, it's vertically elongated.
Rotating 90 degrees still produces an ellipse elongated on the Y axis.
It DOES change slightly, but not what I'd expect.

Starting Element:

<ellipse fill-opacity="1" stroke="black"
                 id="03967510-52B6-8C7F-083C-4CC912E99199"
                 transform="translate(0.0, 0.0) scale(1.0, 1.0)
                 rotate(0.0,299.5, 136.5)"
                 stroke-opacity="1" svgx:cx="299.5" svgx:sx="1.0"
                 fill="none"
                 svgx:t="0.0" svgx:my="0.0" svgx:cy="136.5"
svgx:sy="1.0"
                 stroke-width="1" pointer-events="visible" svgx:mx="0.0"
                 cx="299.5" rx="70.5" cy="136.5" ry="66.5"/>

Scaled 150% on the Y axis.  Note changes to the translate and the scale
to scale around a center point:

<ellipse fill-opacity="1" stroke="black"
                 id="03967510-52B6-8C7F-083C-4CC912E99199"
                 transform="translate(0.0, -68.25) scale(1.0, 1.5)
                 rotate(0.0, 299.5, 136.5)"
                 stroke-opacity="1" svgx:cx="299.5" svgx:sx="1.0"
                 fill="none"
                 svgx:t="0.0" svgx:my="0.0" svgx:cy="136.5"
svgx:sy="1.5"
                 stroke-width="1" pointer-events="visible" svgx:mx="0.0"
                 cx="299.5" rx="70.5" cy="136.5" ry="66.5"/>

Rotate 45 degrees.  Note changes to the rotate:

<ellipse fill-opacity="1" stroke="black"
                 id="03967510-52B6-8C7F-083C-4CC912E99199"
                 transform="translate(0.0, -68.25) scale(1.0, 1.5)
                 rotate(45.0, 299.5, 136.5)"
                 stroke-opacity="1" svgx:cx="299.5" svgx:sx="1.0"
                 fill="none"
                 svgx:t="45" svgx:my="0.0" svgx:cy="136.5" svgx:sy="1.5"
                 stroke-width="1" pointer-events="visible" svgx:mx="0.0"
                 cx="299.5" rx="70.5" cy="136.5" ry="66.5"/>

In XML, it "looks" right.  Visually, it's not what I would expect.  I'm
not sure what's wrong, perhaps the way I apply the rotate?  I just use
the given degree with the given center point.

These problems do not occur with uniform scaling.  Rectangles also seem
to work correctly.  This is really a noticeable problem with ellipses.

Michael Bishop

-----Original Message-----
From: Bishop, Michael W. CONTR J9C880
[mailto:Michael.Bishop@je.jfcom.mil] 
Sent: Monday, December 12, 2005 10:49 AM
To: batik-users@xmlgraphics.apache.org
Subject: RE: Scaling around a center point...

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:archie@dellroad.org] 
Sent: Friday, December 09, 2005 2:41 PM
To: batik-users@xmlgraphics.apache.org
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: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org


Mime
View raw message