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 Ralf Müller <ma...@geomagic.de> on 2003/01/19 19:34:26 UTC

How do i Implement Zoom and Pan in my Application

Hi!
 
I have an Application using batik for displaying a graphic. How do I
zoom and pan the view when I Use a JSvgCanvas. (Sample code would be
great). (I already tried to understand the SVG Browser Sourcecode, but
it is hard to follow) 
 
Thanks
 
Ralf

Re: How do i Implement Zoom and Pan in my Application

Posted by Vincent Hardy <vi...@sun.com>.
Hello Ralf,

Ralf Müller wrote:
> Hi Hardy,
> 
> your solution was meant to be used when I want to zoom from my
> Application? 

Yes, so that your script could zoom or pan without use interaction.

> But an other question. Is there a way to tab into the zoom and pan
> functionality that exists in the SVGCanvas? Because I can zoom when I
> press ctrl+left mouse button.

Yes you could, but not from the internal script. If you'd like to see 
how to do that, you'll have to dive into org.apache.batik.swing.xx.xx 
classes. For example, you can have a look at 
AbstractImageZoomInteractor.java.

Vincent.

> 
> Thanks 
> 
> Ralf
> 
> -----Original Message-----
> From: Vincent Hardy [mailto:vincent.hardy@sun.com] 
> Sent: Thursday, January 23, 2003 2:06 AM
> To: Batik Users
> Subject: Re: How do i Implement Zoom and Pan in my Application
> 
> Hello Ralf,
> 
> SVG has a way to modify the zoom and pan from on the root SVG element, 
> but Batik does not support that.
> 
> What you could do in the meanwhile is create a top-level group with a 
> transform that you could modify through scripting. Something like:
> 
> <svg ...>
> 
>      <g id="toBeZoomedAndPanned">
>      </g>
> 
>      <script type="text/ecmascript"><[!CDATA[
> 
> var toBeZoomedAndPanned =
> document.getElementById("toBeZoomedAndPanned");
> 
> function onZoom(zoomFactor) {
>      toBeZoomedAndPanned.setAttributeNS(null, "transform", "scale(" + 
> zoomFactor + ")");
> }
> 
>      ]]></script>
> </svg>
> 
> I hope this helps,
> Vincent.
> 
> Ralf Müller wrote:
> 
>>Hi Vincent,
>>
>> 
>>
>>The answer is not so easy. Since I fear I have to do a bit of all. I
> 
> am 
> 
>>using an JSVGCanvas to render dynamically generated svg pictures which
> 
> 
>>represent Algorithm-animations (for educational use).
>>
>> 
>>
>>First I want the user to have the ability to pan and zoom in the 
>>JSVGCanvas (after pressing a zoom or pan button in the application).
>>
>>On the other side I need the ability to resize the svg graphic from my
> 
> 
>>application and pan it, so that the user sees an "interesting" area.
>>
>>I know I am asking much, but a solution to one of my problems would
> 
> help 
> 
>>me a lot.
>>
>> 
>>
>>Thanks in advance
>>
>> 
>>
>>Ralf
>>
>> 
>>
>>Ralf Müller                           
>>
>>Institute for Cartography and Geoinformation,
>>
>>University of Bonn  
>>
>>Meckenheimer Allee 172              
>>
>>53115 Bonn, Germany                                     
>>
>>Phone: ++49 (0)228 731760
>>
>>Fax  : ++49 (0)228 731753
>>
>>Email: magic@geomagic.de
>>
>> 
>>
>>-----Original Message-----
>>From: Vincent Hardy [mailto:vincent.hardy@sun.com]
>>Sent: Wednesday, January 22, 2003 9:06 PM
>>To: Batik Users
>>Subject: Re: How do i Implement Zoom and Pan in my Application
>>
>> 
>>
>>Hello Ralf,
>>
>> 
>>
>>Are you trying to zoom and pan trough the Batik APIs or through the
>>
>>standard DOM APIs? Or are you trying to let the user zoom and pan in
>>
>>JSVGCanvas?
>>
>> 
>>
>>Vincent.
>>
>> 
>>
>>Ralf Müller wrote:
>>
>>
>>> Hi!
>>
>>> I have an Application using batik for displaying a graphic. How do I
>>
>>> zoom and pan the view when I Use a JSvgCanvas. (Sample code would be
>>
>>> great). (I already tried to understand the SVG Browser Sourcecode,
>>
> but
> 
>>> it is hard to follow)
>>
>>> Thanks
>>
>>> Ralf
>>
>> 
>>
>> 
>>
>> 
>>
>>---------------------------------------------------------------------
>>
>>To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
>>
>>For additional commands, e-mail: batik-users-help@xml.apache.org
>>
>> 
>>
> 
> 
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
> 
> 
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
> 
> 
> 



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


RE: How do i Implement Zoom and Pan in my Application

Posted by Ralf Müller <ma...@geomagic.de>.
Hi Hardy,

your solution was meant to be used when I want to zoom from my
Application? 
But an other question. Is there a way to tab into the zoom and pan
functionality that exists in the SVGCanvas? Because I can zoom when I
press ctrl+left mouse button.

Thanks 

Ralf

-----Original Message-----
From: Vincent Hardy [mailto:vincent.hardy@sun.com] 
Sent: Thursday, January 23, 2003 2:06 AM
To: Batik Users
Subject: Re: How do i Implement Zoom and Pan in my Application

Hello Ralf,

SVG has a way to modify the zoom and pan from on the root SVG element, 
but Batik does not support that.

What you could do in the meanwhile is create a top-level group with a 
transform that you could modify through scripting. Something like:

<svg ...>

     <g id="toBeZoomedAndPanned">
     </g>

     <script type="text/ecmascript"><[!CDATA[

var toBeZoomedAndPanned =
document.getElementById("toBeZoomedAndPanned");

function onZoom(zoomFactor) {
     toBeZoomedAndPanned.setAttributeNS(null, "transform", "scale(" + 
zoomFactor + ")");
}

     ]]></script>
</svg>

I hope this helps,
Vincent.

Ralf Müller wrote:
> Hi Vincent,
> 
>  
> 
> The answer is not so easy. Since I fear I have to do a bit of all. I
am 
> using an JSVGCanvas to render dynamically generated svg pictures which

> represent Algorithm-animations (for educational use).
> 
>  
> 
> First I want the user to have the ability to pan and zoom in the 
> JSVGCanvas (after pressing a zoom or pan button in the application).
> 
> On the other side I need the ability to resize the svg graphic from my

> application and pan it, so that the user sees an "interesting" area.
> 
> I know I am asking much, but a solution to one of my problems would
help 
> me a lot.
> 
>  
> 
> Thanks in advance
> 
>  
> 
> Ralf
> 
>  
> 
> Ralf Müller                           
> 
> Institute for Cartography and Geoinformation,
> 
> University of Bonn  
> 
> Meckenheimer Allee 172              
> 
> 53115 Bonn, Germany                                     
> 
> Phone: ++49 (0)228 731760
> 
> Fax  : ++49 (0)228 731753
> 
> Email: magic@geomagic.de
> 
>  
> 
> -----Original Message-----
> From: Vincent Hardy [mailto:vincent.hardy@sun.com]
> Sent: Wednesday, January 22, 2003 9:06 PM
> To: Batik Users
> Subject: Re: How do i Implement Zoom and Pan in my Application
> 
>  
> 
> Hello Ralf,
> 
>  
> 
> Are you trying to zoom and pan trough the Batik APIs or through the
> 
> standard DOM APIs? Or are you trying to let the user zoom and pan in
> 
> JSVGCanvas?
> 
>  
> 
> Vincent.
> 
>  
> 
> Ralf Müller wrote:
> 
>>  Hi!
> 
>>
> 
>> 
> 
>>
> 
>>  I have an Application using batik for displaying a graphic. How do I
> 
>>  zoom and pan the view when I Use a JSvgCanvas. (Sample code would be
> 
>>  great). (I already tried to understand the SVG Browser Sourcecode,
but
> 
>>  it is hard to follow)
> 
>>
> 
>> 
> 
>>
> 
>>  Thanks
> 
>>
> 
>> 
> 
>>
> 
>>  Ralf
> 
>>
> 
>  
> 
>  
> 
>  
> 
> ---------------------------------------------------------------------
> 
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> 
> For additional commands, e-mail: batik-users-help@xml.apache.org
> 
>  
> 



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




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


Re: How do i Implement Zoom and Pan in my Application

Posted by Vincent Hardy <vi...@sun.com>.
Hello Ralf,

SVG has a way to modify the zoom and pan from on the root SVG element, 
but Batik does not support that.

What you could do in the meanwhile is create a top-level group with a 
transform that you could modify through scripting. Something like:

<svg ...>

     <g id="toBeZoomedAndPanned">
     </g>

     <script type="text/ecmascript"><[!CDATA[

var toBeZoomedAndPanned = document.getElementById("toBeZoomedAndPanned");

function onZoom(zoomFactor) {
     toBeZoomedAndPanned.setAttributeNS(null, "transform", "scale(" + 
zoomFactor + ")");
}

     ]]></script>
</svg>

I hope this helps,
Vincent.

Ralf Müller wrote:
> Hi Vincent,
> 
>  
> 
> The answer is not so easy. Since I fear I have to do a bit of all. I am 
> using an JSVGCanvas to render dynamically generated svg pictures which 
> represent Algorithm-animations (for educational use).
> 
>  
> 
> First I want the user to have the ability to pan and zoom in the 
> JSVGCanvas (after pressing a zoom or pan button in the application).
> 
> On the other side I need the ability to resize the svg graphic from my 
> application and pan it, so that the user sees an "interesting" area.
> 
> I know I am asking much, but a solution to one of my problems would help 
> me a lot.
> 
>  
> 
> Thanks in advance
> 
>  
> 
> Ralf
> 
>  
> 
> Ralf Müller                           
> 
> Institute for Cartography and Geoinformation,
> 
> University of Bonn  
> 
> Meckenheimer Allee 172              
> 
> 53115 Bonn, Germany                                     
> 
> Phone: ++49 (0)228 731760
> 
> Fax  : ++49 (0)228 731753
> 
> Email: magic@geomagic.de
> 
>  
> 
> -----Original Message-----
> From: Vincent Hardy [mailto:vincent.hardy@sun.com]
> Sent: Wednesday, January 22, 2003 9:06 PM
> To: Batik Users
> Subject: Re: How do i Implement Zoom and Pan in my Application
> 
>  
> 
> Hello Ralf,
> 
>  
> 
> Are you trying to zoom and pan trough the Batik APIs or through the
> 
> standard DOM APIs? Or are you trying to let the user zoom and pan in
> 
> JSVGCanvas?
> 
>  
> 
> Vincent.
> 
>  
> 
> Ralf Müller wrote:
> 
>>  Hi!
> 
>>
> 
>> 
> 
>>
> 
>>  I have an Application using batik for displaying a graphic. How do I
> 
>>  zoom and pan the view when I Use a JSvgCanvas. (Sample code would be
> 
>>  great). (I already tried to understand the SVG Browser Sourcecode, but
> 
>>  it is hard to follow)
> 
>>
> 
>> 
> 
>>
> 
>>  Thanks
> 
>>
> 
>> 
> 
>>
> 
>>  Ralf
> 
>>
> 
>  
> 
>  
> 
>  
> 
> ---------------------------------------------------------------------
> 
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> 
> For additional commands, e-mail: batik-users-help@xml.apache.org
> 
>  
> 



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


RE: How do i Implement Zoom and Pan in my Application

Posted by Ralf Müller <ma...@geomagic.de>.
Hi Vincent,
 
The answer is not so easy. Since I fear I have to do a bit of all. I am
using an JSVGCanvas to render dynamically generated svg pictures which
represent Algorithm-animations (for educational use).
 
First I want the user to have the ability to pan and zoom in the
JSVGCanvas (after pressing a zoom or pan button in the application). 
On the other side I need the ability to resize the svg graphic from my
application and pan it, so that the user sees an "interesting" area. 
I know I am asking much, but a solution to one of my problems would help
me a lot. 
 
Thanks in advance 
 
Ralf
 
Ralf Müller                           
Institute for Cartography and Geoinformation, 
University of Bonn   
Meckenheimer Allee 172               
53115 Bonn, Germany                                      
Phone: ++49 (0)228 731760
Fax  : ++49 (0)228 731753
Email: magic@geomagic.de
 
-----Original Message-----
From: Vincent Hardy [mailto:vincent.hardy@sun.com] 
Sent: Wednesday, January 22, 2003 9:06 PM
To: Batik Users
Subject: Re: How do i Implement Zoom and Pan in my Application
 
Hello Ralf,
 
Are you trying to zoom and pan trough the Batik APIs or through the 
standard DOM APIs? Or are you trying to let the user zoom and pan in 
JSVGCanvas?
 
Vincent.
 
Ralf Müller wrote:
> Hi!
> 
>  
> 
> I have an Application using batik for displaying a graphic. How do I 
> zoom and pan the view when I Use a JSvgCanvas. (Sample code would be 
> great). (I already tried to understand the SVG Browser Sourcecode, but

> it is hard to follow)
> 
>  
> 
> Thanks
> 
>  
> 
> Ralf
> 
 
 
 
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
 

Re: How do i Implement Zoom and Pan in my Application

Posted by Vincent Hardy <vi...@sun.com>.
Hello Ralf,

Are you trying to zoom and pan trough the Batik APIs or through the 
standard DOM APIs? Or are you trying to let the user zoom and pan in 
JSVGCanvas?

Vincent.

Ralf Müller wrote:
> Hi!
> 
>  
> 
> I have an Application using batik for displaying a graphic. How do I 
> zoom and pan the view when I Use a JSvgCanvas. (Sample code would be 
> great). (I already tried to understand the SVG Browser Sourcecode, but 
> it is hard to follow)
> 
>  
> 
> Thanks
> 
>  
> 
> Ralf
> 



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