Hi,
With the right sizes I mean the sizes given to me by the xml, namely
svg_bitmap_width and svg_bitmap_height variables. Those values are the
expected width and height of the image. The image on disc is an image
which I should rotate 90 degrees and fit into those width and height
values.
I have to do some scaling, which I understand. I have to calculate the
scale from the expected output and the real output. (I haven't come to
that point yet).
I first tried to fit in scaling at all, with a fixed value on my rotated
bitmap. Yes the bitmap is scaled, but now the bitmap is not rotated
anymore.
I understand the the order of the transformations is important, and I
played around with the order of translate, scale and rotate a bit, but it
doesn't seem to change anything.
All these things I don't seem to get a grip on are really starting to
frustrate me. I've been programming for some years now, but this svg is
really something different. I tried reading about the transform attribute
and nested transformations in the W3C SVG reference, but apparently
I can't understand what is said in there. Is there anyone who knows other
documentation, which I might be able to understand?
Thanks,
Chantal
> Hi
>
> [EMAIL PROTECTED] wrote on 09/29/2008 02:58:03 AM:
>
>> The rotation was a success, but now the image doesn't have the right
> size
>> anymore.
>
> What do you mean by 'the right size'?
>
>> I suspect it keeps the sizes of the image as it would be displayed
>> non-rotated.
>
> Yes, but I'm not sure what you want it to do. If you want
> it another size you will need to adjust the scale transform.
> Be aware that like rotation adjusting the scale will effect
> your translate.
>
>> My piece of code:
>>
>> <!-- Draw Bitmap -->
>> <svg:g transform="rotate({$bitmap_rotation}, {$width_middle},
>> {$height_middle})">
>> <svg:g
>>
> transform="translate({$svg_bitmap_width_offset},{$svg_bitmap_height_offset})">
>> <svg:image width="{$svg_bitmap_width}" height="{$svg_bitmap_height}"
>> xlink:href="{$bitmap_path}">
>> <svg:title>Front Bitmap</svg:title>
>> </svg:image>
>> </svg:g>
>> </svg:g>
>>
>> How can I make sure the image gets the right size again?
>>
>> > Hi,
>> >
>> > Thank you for the reply.
>> > The change of the order of attributes and putting the rotation inside
> the
>> > image tag did the trick.
>> >
>> > Thanks,
>> >
>> > Chantal
>> >
>> >> Hi
>> >>
>> >> [EMAIL PROTECTED] wrote on 09/25/2008 02:46:06 AM:
>> >>
>> >>> <svg:g
>> >>>
>> >> transform="translate({$svg_bitmap_width_offset},
>> {$svg_bitmap_height_offset}),
>> >>> rotate({$svg_bitmap_width_offset}, {$svg_bitmap_height_offset},
>> >> {$bitmap_rotation})">
>> >>
>> >> You were misled a little the proper order of parameters
>> >> for rotate is 'angle', 'cx, 'cy' (not cx,cy,angle):
>> >> http://www.w3.org/TR/SVG11/coords.html#TransformAttribute
>> >>
>> >>> I do have an image in the viewable, but it still is not rotated.
>> >>
>> >> I would suggest starting with a nice small static document and
>> >> adjusting the various values by hand until you understand them.
>> >> Rather than trying to get the whole scripted thing working up front.
>> >> Affine transforms are rather tricky. In particular I would suggest
> that
>> >> you might want to rotate and then translate the image. (the order
> that
>> >> affine transforms are applied in is very important).
>> >>
>> >>> I think you might be right about the image not being in the viewable
>> >> area,
>> >>> but rotating around the center doesn't seem to be the solution.
>> >>
>> >> It is the solution but between having the rotate 'out of order'
> and
>> >> the arguments mixed up you wouldn't know.
>> >>
>> >>> > It's probably being rotated outside the viewable area. If you
> want
>> >>> to
>> >>> > rotate around the center of the image, I think you have to
> calculate
>> >> it as
>> >>> > such:
>> >>> >
>> >>> > cx = x + (width / 2)
>> >>> > cy = y + (height / 2)
>> >>> >
>> >>> > where x, y, width, and height come from your image.
>> >>> >
>> >>> > Michael
>> >>> >
>> >>> > ________________________________
>> >>> >
>> >>> > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
>> >>> > Sent: Wed 9/24/2008 10:59 AM
>> >>> > To: [email protected]
>> >>> > Subject: RE: image rotation
>> >>> >
>> >>> >
>> >>> >
>> >>> > I see. I have to give the point where to rotate around.
>> >>> > But it still gives the same result. when I use rotate(...) inside
> the
>> >>> > transform attribute, my image doesn't appear at all. When I use
> the
>> >>> > seperate rotation attribute (which I used before on text) the
> image
>> >>> > appears, but not rotated.
>> >>> >
>> >>> > Chantal
>> >>> >
>> >>> >> Well I'm not sure what you're trying to do. Are you trying to
>> >>> simply
>> >>> >> rotate the element around the center? If so, you can just do
> this:
>> >>> >>
>> >>> >> transform="rotate(cx, cy, t)" where cx is the x coordinate of the
>> >> image
>> >>> >> center, cy is the y coordinate of the image center and t is the
>> >> rotate
>> >>> >> angle in degrees.
>> >>> >>
>> >>> >> Michael
>> >>> >>
>> >>> >> ________________________________
>> >>> >>
>> >>> >> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
>> >>> >> Sent: Wed 9/24/2008 9:49 AM
>> >>> >> To: [email protected]
>> >>> >> Subject: RE: image rotation
>> >>> >>
>> >>> >>
>> >>> >>
>> >>> >> If I change it to the format like you said:
>> >>> >>
>> >>> >> <!-- Draw Bitmap -->
>> >>> >> <svg:g
>> >>> >> transform="translate({$svg_bitmap_width_offset},
>> >>> {$svg_bitmap_height_offset})
>> >>> >> rotate({$bitmap_rotation})">
>> >>> >> <svg:image x="2" y="2" width="{$svg_bitmap_width}"
>> >>> >> height="{$svg_bitmap_height}" xlink:href="{$bitmap_path}">
>> >>> >> <svg:title>Front Bitmap</svg:title>
>> >>> >> </svg:image>
>> >>> >> </svg:g>
>> >>> >>
>> >>> >> I get no image at all... (even with hard-coded values for
> rotation
>> >>> >> angle)
>> >>> >> If I use hard-coded values in the code of my first post, the
> image
>> >> still
>> >>> >> isn't rotated.
>> >>> >>
>> >>> >> Chantal
>> >>> >>
>> >>> >>> I think the format for your transform is wrong:
>> >>> >>>
>> >>> >>> transform="translate(x,y), rotate(t)"
>> >>> >>>
>> >>> >>> http://www.w3.org/TR/SVG/coords.html#TransformAttribute
>> >>> >>> <http://www.w3.org/TR/SVG/coords.html#TransformAttribute>
>> >>> >>>
>> >>> >>> Michael
>> >>> >>>
>> >>> >>> ________________________________
>> >>> >>>
>> >>> >>> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
>> >>> >>> Sent: Wed 9/24/2008 4:41 AM
>> >>> >>> To: [email protected]
>> >>> >>> Subject: svg:image rotation
>> >>> >>>
>> >>> >>>
>> >>> >>>
>> >>> >>> Hi,
>> >>> >>>
>> >>> >>> From an xml file I read a path of an image and a rotation. Now I
>> >> want
>> >>> >>> to
>> >>> >>> display the image and rotate it according to what is in the XML
>> >> file.
>> >>> >>>
>> >>> >>> This is the code I use:
>> >>> >>>
>> >>> >>> <!-- Draw Bitmap -->
>> >>> >>> <svg:g
>> >>> >>> transform="translate({$svg_bitmap_width_offset),
>> >>> {$svg_bitmap_height_offset})"
>> >>> >>> rotation="{$bitmap_rotation}">
>> >>> >>> <svg:image x="2" y="2" width="{$svg_bitmap_width}"
>> >>> >>> height="{$svg_bitmap_height}" xlink:href="{$bitmap_path}">
>> >>> >>> <svg:title>Front Bitmap</svg:title>
>> >>> >>> </svg:image>
>> >>> >>> </svg:g>
>> >>> >>>
>> >>> >>> Now when I view, the image is not rotated.
>> >>> >>> I tried searching with google, but I can't seem to find
> anything,
>> >> and I
>> >>> >>> begin to wonder if it is possible at all.
>> >>> >>>
>> >>> >>> Is there, and if yes what is the correct solution to my problem?
>> >>> >>>
>> >>> >>> Thanks in advance,
>> >>> >>>
>> >>> >>> Chantal
>> >>> >>>
>> >>> >>>
>> >>> >>>
>> >>> >>>
>> >> ---------------------------------------------------------------------
>> >>> >>> 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]
>> >>> >>
>> >>> >>
>> >>> >>
>> >>> >>
> ---------------------------------------------------------------------
>> >>> >> 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]
>> >>> >
>> >>> >
>> >>> >
>> >>> >
> ---------------------------------------------------------------------
>> >>> > 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]
>> >>>
>> >>>
>> >>>
>> >>>
> ---------------------------------------------------------------------
>> >>> 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]
>> >
>> >
>>
>>
>>
>> ---------------------------------------------------------------------
>> 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]
