You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by vyang <vy...@apt-cafm.com> on 2007/04/13 17:05:32 UTC

Image flipping/mirror

Hello,

I'm trying to flip my image either vertically or horizontally so the result
would be a mirror of itself.  I've found in svg wiki that uses scale(1,-1)
or scale(-1,1).  However, that don't seem to work for me.  After that
transformation is applied my image is gone.  Is there another way to do
mirror flipping or is there a way to not lose my image.  Any help is much
appreciated.

Thanks

vyang
-- 
View this message in context: http://www.nabble.com/Image-flipping-mirror-tf3572093.html#a9980594
Sent from the Batik - Users mailing list archive at Nabble.com.


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


Re: Image flipping/mirror

Posted by "G. Wade Johnson" <gw...@anomaly.org>.
On Wed, 18 Apr 2007 14:28:57 -0700 (PDT)
vyang <vy...@apt-cafm.com> wrote:

> 
> Hello,
> 
> Thanks for your help.  I'm not quite sure what your snippet code is
> doing:
> 
> <g transform="translate(60,45)">
>    <image x="-50" y="-25" width="100" height="50"
>           xlink:href="image.png"/>
> </g>
> 
> I'm guessing is that you first translated to the opposite filp point
> and then flip it using the transform in the group element?  I tried
> something similar to that, I first translate my image to (0,0) then
> flip it then translate it back.  I've found this method on
> dev.opera's article on svg evolution.  This method seems to be
> working... at least for now.  Thanks for your help.

That's right. Both approaches work fine. I find mine easier to wrap my
head around. I did start with an approach similar to the one you
describe years ago.

G. Wade
-- 
If you like laws and sausages, you should never watch either one being
made.                                           -- Otto von Bismarck

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


Re: Image flipping/mirror

Posted by vyang <vy...@apt-cafm.com>.
Hello,

Thanks for your help.  I'm not quite sure what your snippet code is doing:

<g transform="translate(60,45)">
   <image x="-50" y="-25" width="100" height="50"
          xlink:href="image.png"/>
</g>

I'm guessing is that you first translated to the opposite filp point and
then flip it using the transform in the group element?  I tried something
similar to that, I first translate my image to (0,0) then flip it then
translate it back.  I've found this method on dev.opera's article on svg
evolution.  This method seems to be working... at least for now.  Thanks for
your help.

vyang


G. Wade Johnson wrote:
> 
> On Tue, 17 Apr 2007 09:51:37 -0700 (PDT)
> 
> Okay. Now I believe I can help. The "problem" is that scaling changes
> both the "size" and the coordinates. The approach I've used in the past
> is to decouple these.
> 
> Let's say you have an image with a width of 100 and a height of 50 at
> 10,20 that you want to flip around a vertical axis.
> 
> <image x="10" y="20" width="100" height="50" xlink:href="image.png"/>
> 
> If you try to scale it with scale(-1,1), you get the equivalent of
> 
> <image x="-10" y="20" width="100" height="50" xlink:href="image.png"/>
> 
> with the image reversed.
> 
> Instead, convert the snippet above to:
> 
> 
> <g transform="translate(60,45)">
>    <image x="-50" y="-25" width="100" height="50"
>           xlink:href="image.png"/>
> </g>
> 
> Now, you can add a transform="scale(-1,1)" to reverse the image in
> place without moving it.
> 
> There are probably other ways to do this, but I have found the
> technique effective for both scaling and rotations.
> 
> G. Wade
> -- 
> You should never hand someone a gun unless you're sure where they'll
> point it.             -- Jeffrey Sinclair in "By Any Means Necessary"
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/Image-flipping-mirror-tf3572093.html#a10066569
Sent from the Batik - Users mailing list archive at Nabble.com.


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


Re: Image flipping/mirror

Posted by "G. Wade Johnson" <gw...@anomaly.org>.
On Tue, 17 Apr 2007 09:51:37 -0700 (PDT)
vyang <vy...@apt-cafm.com> wrote:

> 
> Hello,
> 
> Well, I grab the x and y coordinates from the Image element in the
> svg file before and after the transform.  Now that I think about it,
> the x and y coordinates in the svg file doesn't get change during a
> transform.  I've tried your suggestion, for vertical flip I take the
> opposite of y and horizontal the opposite of x.  I'm able to see it
> when its flipped the first time, but its not in its
> orginial(preflipped) position, which I want it to be.  Then when I do
> the same flip it disappears again.  Any thoughts on how to fix this
> problem?

Okay. Now I believe I can help. The "problem" is that scaling changes
both the "size" and the coordinates. The approach I've used in the past
is to decouple these.

Let's say you have an image with a width of 100 and a height of 50 at
10,20 that you want to flip around a vertical axis.

<image x="10" y="20" width="100" height="50" xlink:href="image.png"/>

If you try to scale it with scale(-1,1), you get the equivalent of

<image x="-10" y="20" width="100" height="50" xlink:href="image.png"/>

with the image reversed.

Instead, convert the snippet above to:


<g transform="translate(60,45)">
   <image x="-50" y="-25" width="100" height="50"
          xlink:href="image.png"/>
</g>

Now, you can add a transform="scale(-1,1)" to reverse the image in
place without moving it.

There are probably other ways to do this, but I have found the
technique effective for both scaling and rotations.

G. Wade
-- 
You should never hand someone a gun unless you're sure where they'll
point it.             -- Jeffrey Sinclair in "By Any Means Necessary"

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


Re: Image flipping/mirror

Posted by vyang <vy...@apt-cafm.com>.
Hello,

Well, I grab the x and y coordinates from the Image element in the svg file
before and after the transform.  Now that I think about it, the x and y
coordinates in the svg file doesn't get change during a transform.  I've
tried your suggestion, for vertical flip I take the opposite of y and
horizontal the opposite of x.  I'm able to see it when its flipped the first
time, but its not in its orginial(preflipped) position, which I want it to
be.  Then when I do the same flip it disappears again.  Any thoughts on how
to fix this problem?


vyang


G. Wade Johnson wrote:
> 
> On Mon, 16 Apr 2007 07:42:59 -0700 (PDT)
> 
> It depends on how you get the x and y coordinates, I think.
> 
> Try setting the x attribute for your image to the negative of the value
> you want it to be, and then scale(-1,1).
> 
> G. Wade
> -- 
> Make no decision out of fear.                      -- Bruce Sterling
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/Image-flipping-mirror-tf3572093.html#a10040415
Sent from the Batik - Users mailing list archive at Nabble.com.


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


Re: Image flipping/mirror

Posted by "G. Wade Johnson" <gw...@anomaly.org>.
On Mon, 16 Apr 2007 07:42:59 -0700 (PDT)
vyang <vy...@apt-cafm.com> wrote:

> 
> Hello,
> 
> Well, I grabbed the x and y coordinates of the image after I scaled
> it and its the same as the x and y coordinates before scaling.  So it
> should still be in the view box, or am I doing this wrong?

It depends on how you get the x and y coordinates, I think.

Try setting the x attribute for your image to the negative of the value
you want it to be, and then scale(-1,1).

G. Wade
-- 
Make no decision out of fear.                      -- Bruce Sterling

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


Re: Image flipping/mirror

Posted by vyang <vy...@apt-cafm.com>.
Hello,

Well, I grabbed the x and y coordinates of the image after I scaled it and
its the same as the x and y coordinates before scaling.  So it should still
be in the view box, or am I doing this wrong?


vyang


G. Wade Johnson wrote:
> 
> On Fri, 13 Apr 2007 08:05:32 -0700 (PDT)
> vyang <vy...@apt-cafm.com> wrote:
> 
>> 
>> Hello,
>> 
>> I'm trying to flip my image either vertically or horizontally so the
>> result would be a mirror of itself.  I've found in svg wiki that uses
>> scale(1,-1) or scale(-1,1).  However, that don't seem to work for
>> me.  After that transformation is applied my image is gone.  Is there
>> another way to do mirror flipping or is there a way to not lose my
>> image.  Any help is much appreciated.
> 
> Make sure the inverted positions are still in your viewBox.
> 
> G. Wade
> -- 
> Perfection is achieved not when there is nothing more to add but when
> there is nothing more to take out.         -- Antoine de Saint Exupery
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/Image-flipping-mirror-tf3572093.html#a10017457
Sent from the Batik - Users mailing list archive at Nabble.com.


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


Re: Image flipping/mirror

Posted by "G. Wade Johnson" <gw...@anomaly.org>.
On Fri, 13 Apr 2007 08:05:32 -0700 (PDT)
vyang <vy...@apt-cafm.com> wrote:

> 
> Hello,
> 
> I'm trying to flip my image either vertically or horizontally so the
> result would be a mirror of itself.  I've found in svg wiki that uses
> scale(1,-1) or scale(-1,1).  However, that don't seem to work for
> me.  After that transformation is applied my image is gone.  Is there
> another way to do mirror flipping or is there a way to not lose my
> image.  Any help is much appreciated.

Make sure the inverted positions are still in your viewBox.

G. Wade
-- 
Perfection is achieved not when there is nothing more to add but when
there is nothing more to take out.         -- Antoine de Saint Exupery

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