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 bharat chatla <bh...@gmail.com> on 2009/09/09 20:39:29 UTC

Question on Zoom

Hi all,

Can someone give me sample code on how to control zoom in and zoom out. I
have added svg file on applet and now with the help of two buttons I want to
control the zooming feature.

Thanks,
Bharat

RE: Question on Zoom

Posted by "Bishop, Michael W. CTR USJFCOM JFL" <mi...@jfcom.mil>.
Hi Heidrun,

I ran into this 3 or 4 years ago working on my own SVG application.  The reason there's little documentation on the subject is that it relies heavily on matrix algebra which is outside the scope of Batik to teach.  The particular SVG book I had (SVG Essentials I think), had an appendix that briefly went into it and got me started on understanding why things worked they way they did.

If you search this list for "AffineTransformUtil", you'll find a class I wrote to manage multiple translations, scales, and rotations on an AffineTransform.  This class was developed in parallel with my understanding of affine transforms and has proven useful to a few other list users in the same situation.

Your solution works as well; in brief, you have to translate, then scale, then rotate, otherwise you won't get expected results.  If you decided to add rotation later, a third transform concatenated after scaling *should* work.

Michael

-----Original Message-----
From: Heidrun Beer [mailto:hBeer@sgmt.at] 
Sent: Saturday, September 12, 2009 6:08 AM
To: batik-users@xmlgraphics.apache.org
Subject: Re: Question on Zoom

On Wed, 9 Sep 2009 12:39:29 -0600, bharat chatla wrote in
<3f...@mail.gmail.com>:

>Hi all,
>
>Can someone give me sample code on how to control zoom in and zoom out. 
>I have added svg file on applet and now with the help of two buttons I 
>want to control the zooming feature.
>
>Thanks,
>Bharat



Hi Bharat,


I just researched this issue and found that it caused me severe headaches :-)

I could zoom in or out, but would lose the pan position when zooming.

Or I could pan with four arrow buttons (don't want to use the zoom/pan interactors), but then my zoom factor would be lost.

Don't ask me why it must be so complicated (and why the Batik Javadoc never gives any code snippets), but the solution is to combine two AffineTransform objects. 

Below is the complete code for one of my six buttons (zoom in, zoom out, pan left, pan right, pan up, pan down). Pay attention to the line before I hand the affine transform to the canvas: 
here the scale transform and the pan transform are combined.

If you need zoom only, or pan only, you can work with one of the two AffineTransforms.


        JButton pan_up = new JButton("");
        pan_up.setBounds(50, 30, 18,19);
        pan_up.setFont(new Font("Arial", Font.BOLD, 12));


        try {
            URL url = new URL(getCodeBase(), "PanUp.jpg");
            Icon icon5 = new ImageIcon(url);
            pan_up.setIcon(icon5);
        } catch (Exception e) {
            System.out.println(e.toString());
        }

	pan_up.addActionListener(new ActionListener() {

        public void actionPerformed(ActionEvent e) {

        Runnable r = new Runnable() {

            public void run() {

                AffineTransform at = canvas.getRenderingTransform();
                AffineTransform at2 = canvas.getRenderingTransform();

                double dX = at.getTranslateX();
                double dY = at.getTranslateY();
                double dX2 = at.getScaleX();
                double dY2 = at.getScaleY();

                at.setToTranslation((dX), (dY+100));
                at2.setToScale(dX2, dY2);
                at.concatenate(at2);

                canvas.setRenderingTransform(at);

            }
        };

        UpdateManager um = canvas.getUpdateManager();
        um.getUpdateRunnableQueue().invokeLater(r);

        }
        });


        palette.add(pan_up);




Hope this helps!


Best,


Heidrun Beer

Workgroup for Fundamental Spiritual Research and Mental Training http://www.sgmt.at http://www.RecastReality.org



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


Re: Question on Zoom

Posted by Heidrun Beer <hB...@sgmt.at>.
On Wed, 9 Sep 2009 12:39:29 -0600, bharat chatla wrote in
<3f...@mail.gmail.com>:

>Hi all,
>
>Can someone give me sample code on how to control zoom in and zoom out. I
>have added svg file on applet and now with the help of two buttons I want to
>control the zooming feature.
>
>Thanks,
>Bharat



Hi Bharat,


I just researched this issue and found that it caused me severe
headaches :-)

I could zoom in or out, but would lose the pan position when 
zooming.

Or I could pan with four arrow buttons (don't want to use the
zoom/pan interactors), but then my zoom factor would be lost.

Don't ask me why it must be so complicated (and why the Batik
Javadoc never gives any code snippets), but the solution is to 
combine two AffineTransform objects. 

Below is the complete code for one of my six buttons (zoom in, 
zoom out, pan left, pan right, pan up, pan down). Pay attention 
to the line before I hand the affine transform to the canvas: 
here the scale transform and the pan transform are combined.

If you need zoom only, or pan only, you can work with one
of the two AffineTransforms.


        JButton pan_up = new JButton("");
        pan_up.setBounds(50, 30, 18,19);
        pan_up.setFont(new Font("Arial", Font.BOLD, 12));


        try {
            URL url = new URL(getCodeBase(), "PanUp.jpg");
            Icon icon5 = new ImageIcon(url);
            pan_up.setIcon(icon5);
        } catch (Exception e) {
            System.out.println(e.toString());
        }

	pan_up.addActionListener(new ActionListener() {

        public void actionPerformed(ActionEvent e) {

        Runnable r = new Runnable() {

            public void run() {

                AffineTransform at = canvas.getRenderingTransform();
                AffineTransform at2 = canvas.getRenderingTransform();

                double dX = at.getTranslateX();
                double dY = at.getTranslateY();
                double dX2 = at.getScaleX();
                double dY2 = at.getScaleY();

                at.setToTranslation((dX), (dY+100));
                at2.setToScale(dX2, dY2);
                at.concatenate(at2);

                canvas.setRenderingTransform(at);

            }
        };

        UpdateManager um = canvas.getUpdateManager();
        um.getUpdateRunnableQueue().invokeLater(r);

        }
        });


        palette.add(pan_up);




Hope this helps!


Best,


Heidrun Beer

Workgroup for Fundamental Spiritual Research and Mental Training
http://www.sgmt.at
http://www.RecastReality.org



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


Re: Question on Zoom

Posted by Helder Magalhães <he...@gmail.com>.
Hi Bharat,


> Can someone give me sample code on how to control zoom in and zoom out. I
> have added svg file on applet and now with the help of two buttons I want to
> control the zooming feature.

If you want to customize the zoom interactors behavior, a good place
to start is:
http://wiki.apache.org/xmlgraphics-batik/CanvasInteractors

If you want HTML buttons to interact with the applet, then the demo
can be used for inspiration:
http://xmlgraphics.apache.org/batik/demo.html


Hope this helps,
 Helder

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