Re: JSVGCanvas Rotation with AffineTransform

[thomas . deweese]

Hi Thomas,

Thomas Palfray <[EMAIL PROTECTED]> wrote on 10/25/2008 05:08:39 AM:

> Well, i'm working on an application wich need to rotate a JSVGCanvas 
> (90°, 180°, 270°). I used AffineTransform and the method 
> setRenderingTransform like that :

   If you only need to support 90, 180 & 270 deg rotations.
I would suggest simply hard coding the correction factors.
For 90deg it will be a translate in X by the height before rotation.
for 180 deg it will be translate in X by the width and
in Y by the height (both before rotation), for 270 a 
translate in Y by the width before rotation.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg";
     xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
     width="800" height="600" viewBox="0 0 800 600">
    <symbol id="obj">
       <rect   x="0" y="0" width="100" height="50" fill="blue"/>
       <path d="M10,25 h80 l-10,10 v-20 l10,10 z" fill="none"
             stroke="black" stroke-width="2"/>
    </symbol>

    <g transform="translate(100, 50)">
       <use xlink:href="#obj"
            transform="rotate(90)"/>
       <use xlink:href="#obj" opacity=".5"
            transform="translate(50,0), rotate(90)"/>
       <circle x="0" y="0" r="1" fill="red"/>
    </g>

    <g transform="translate(150, 300)">
       <use xlink:href="#obj"
            transform="rotate(180)"/>
       <use xlink:href="#obj" opacity=".5"
            transform="translate(100,50), rotate(180)"/>
       <circle x="0" y="0" r="1" fill="red"/>
    </g>

    <g transform="translate(200, 150)">
       <use xlink:href="#obj"
            transform="rotate(270)"/>
       <use xlink:href="#obj" opacity=".5"
            transform="translate(0,100), rotate(270)"/>
       <circle x="0" y="0" r="1" fill="red"/>
    </g>
</svg>

> 
>     public void setSVGAffineTransformation(){
>         double CT= 
> zoomControl.getTableauZoomCombo()[zoomControl.getZoomComboBoxValue()];
>         AffineTransform tx = new AffineTransform(); 
>         tx.setToScale(CT,CT);
>         if(zoomControl.getAngleRotation() != 0){
>             double sinA = Math.sin(zoomControl.getAngleRotation());
>             tx.rotate(zoomControl.getAngleRotation(), 
> Main.getFenetrePrincipale().getFenetreManuscrit().getPaintCanvas().
> getImage().getWidth(null) 
> / 2, 
> Main.getFenetrePrincipale().getFenetreManuscrit().getPaintCanvas().
> getImage().getHeight(null) 
> / 2);
>             //tx.translate(sinA * 
> Main.getFenetrePrincipale().getFenetreManuscrit().getPaintCanvas().
> getRect().getX()/CT, 
> -sinA * 
> Main.getFenetrePrincipale().getFenetreManuscrit().getPaintCanvas().
> getRect().getY()/CT);
>         }
>         svgCanvas.setRenderingTransform(tx);
>     }
> 
> I'm trying to rotate, then translate the canvas to correct the rotation 
> error, but it doesn't work as week as i want.
> So my question is :
> How to rotate a Canvas for having :
> - bottom left corner at 0,0 with 90° rotate
> - bottom right corner at 0,0 with 180° rotate
> - up right corner at 0,0 with 270° rotate
> 
> Best regards, and sorry for my english !
> Thomas
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [EMAIL PROTECTED]
> For additional commands, e-mail: [EMAIL PROTECTED]
>