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 Thomas DeWeese <Th...@Kodak.com> on 2005/05/01 03:35:47 UTC

Re: How to get coordinates of the displayed canvas part

Maik Schürer wrote:

> how can I get the coordinates/dimensions of the currently displayed 
> piece of my SVG on SVGCanvas ?

    In what coordinate system?  In the screen coordinate system it's
the components location and size - both easily obtainable from
Swing ;) So I presume you mean somewhere inside your SVG document.

> Example: my SVG is 2000x1000px and currently (because I zoomed in) a 
> small piece of it is visible on SVGCanvas.
> I want to know, what ist the coordinate of the upper left corner of this 
> piece and its width and height...

    You probably want to look at things like 'getScreenCTM' which will
give you the transform to the screen coordinate system.  Paired with
'getViewPort()' you will have the information needed to calculate this.

> and a second question:
> is it possible to detect, if the a SVG element (a text field e.g) is 
> visible on the currently displayed piece of my SVG or if it is outside 
> this area ?

    You can use the intersection method or just do the simple check on
the BBox of the text (you may need to use the getTransformToElement
method to transform your BBOX to for example the root SVG element's
user coordinate space).

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


Re: How to get coordinates of the displayed canvas part

Posted by Brian Johnson <br...@u.washington.edu>.
On Fri, 6 May 2005, Maik Schürer wrote:

>>    Simply transform the viewPort to the outermost SVG element's
>> coordinate system by using the inverse of the screen CTM for the
>> outermost SVG element.
> I don't understand that
> what is "the inverse of the screen CTM" ?
> Maik

Maik, check out the "Drag" example in the SVG wiki. It uses the CTM to get 
the inverse transformation as part of what it does. Your question suggests 
you don't understand how matrix multiplication is used to convert from SVG 
coordinates to screen (window) coordinates. In an abstract schematic form, 
it looks like this ...

     screen-coords = CTM * SVG-coords

so

     screen-coords * (1/CTM) = SVG-coords

and 1/CTM is the matrix inverse of the CTM matrix. With this matrix, you 
can figure out what the SVG coordinates are of the screen coordinate 
(0,0), and similarly find the other corner. Those two points (in SVG 
coords) should be the points you're looking for. Make sense?

  - brian johnson, dept of architecture, university of washington

>
> Thomas DeWeese schrieb:
>> Maik Schürer wrote:
>> 
>>> Hi Thomas,
>>> I have not found a solution for my problem up to now.
>>> 
>>>  >In what coordinate system?
>>> in SVG document coordinate system
>>> further in text I mean with 'coordinates' always the SVG document 
>>> coordinate system
>>> 
>>>  > You probably want to look at things like 'getScreenCTM' ...
>>> for my problem it is not necessarry to convert to screen coordinates
>> 
>> 
>>    No you want to convert _from_ screen coordinates.
>> 
>>>  > 'getViewPort()' ...
>>> when I debug the viewPort of the rootElement I always get X/Y = 0/0 and 
>>> width and height of the current canvas - independ on viewing the complete 
>>> document or zoomed in a part of it !? Is this correct or did I something 
>>> wrong ?
>> 
>> 
>>   It is correct because the viewPort is (at least for the canvas) in
>> screen coordinates.  So unless you resize the canvas it should stay the
>> same when you zoom/pan.  But the screen CTM will change for the SVG
>> element.
>> 
>>> When I zoomed in, I expected to found X/Y > 0 and width/height smaller 
>>> than my documents width/height...
>>> 
>>> I try to describe my problem by an example:
>>> - my SVG is 2000x1000px
>>> - I zoomed in, so now I see a part of the document starting on 
>>> 600px/200px, 1000px wide and 500px high
>>> - now I want to get these values: 600, 200, 1000 and 500, to know what is 
>>> the currently visible part of the document...
>>> (all coordinates in SVG document coordinate system)
>> 
>> 
>>    Simply transform the viewPort to the outermost SVG element's
>> coordinate system by using the inverse of the screen CTM for the
>> outermost SVG element.
>> 
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>

Re: How to get coordinates of the displayed canvas part

Posted by Andreas Neumann <ne...@karto.baug.ethz.ch>.
I correct my self - of course it would be more elegant to call the 
.inverse() method only once.

The code would read then:

var coordx = evt.clientX;
var coordy = evt.clientY;
//these coordinates are screen pixels
var matrix=document.documentElement.getScreenCTM().inverse();
//matrix now holds scale/rotation/translate/skew values for both x and y
var coordVBx = matrix.a*coordx+matrix.c*coordy+matrix.e;
var coordVBy = matrix..b*coordx+matrix.d*coordy+matrix.f;
//coordVBx and y are now in the coordinate system of the root elements 
viewBox coordinate system

> var coordx = evt.clientX;
> var coordy = evt.clientY;
> //these coordinates are screen pixels
> var matrix=document.documentElement.getScreenCTM();
> //matrix now holds scale/rotation/translate/skew values for both x and y
> var coordVBx = 
> matrix.inverse().a*coordx+matrix.inverse().c*coordy+matrix.inverse().e;
> var coordVBy = 
> matrix.inverse().b*coordx+matrix.inverse().d*coordy+matrix.inverse().f;
> //coordVBx and y are now in the coordinate system of the root elements 
> viewBox coordinate system
>
> see http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace 
> to see what the matrix values a to f mean.
>
> Good luck,
> Andreas
>
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>


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


Re: How to get coordinates of the displayed canvas part

Posted by Andreas Neumann <ne...@karto.baug.ethz.ch>.
Maik Schürer wrote:

> >    Simply transform the viewPort to the outermost SVG element's
> > coordinate system by using the inverse of the screen CTM for the
> > outermost SVG element.
> I don't understand that
> what is "the inverse of the screen CTM" ?

Maik - I did not follow the whole thread, I don't know exactly what you 
want to do. But I can explain the screen CTM:

CTM stands for "current transform matrix" and holds scaling, rotation 
and translation values. It is a 3x3 matrix, but only the first two rows 
are relevant. Have a look at
http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace

you can call the method  ".getScreenCTM()" on the root element (equals 
to documentElement) as follows. Subsequently if you want to transform 
the screen coordinates (which you receive e.g. by the evt.clientX and 
evt.clientY properties) to the viewBox coordinate system of your root 
element you can use the following code:

var coordx = evt.clientX;
var coordy = evt.clientY;
//these coordinates are screen pixels
var matrix=document.documentElement.getScreenCTM();
//matrix now holds scale/rotation/translate/skew values for both x and y
var coordVBx = matrix.inverse().a*coordx+matrix.inverse().c*coordy+matrix.inverse().e;
var coordVBy = matrix.inverse().b*coordx+matrix.inverse().d*coordy+matrix.inverse().f;
//coordVBx and y are now in the coordinate system of the root elements viewBox coordinate system

see http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace to see what the matrix values a to f mean.

Good luck,
Andreas





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


Re: How to get coordinates of the displayed canvas part

Posted by Maik Schürer <Ma...@proveo.de>.
 >    Simply transform the viewPort to the outermost SVG element's
 > coordinate system by using the inverse of the screen CTM for the
 > outermost SVG element.
I don't understand that
what is "the inverse of the screen CTM" ?
Maik

Thomas DeWeese schrieb:
> Maik Schürer wrote:
> 
>> Hi Thomas,
>> I have not found a solution for my problem up to now.
>>
>>  >In what coordinate system?
>> in SVG document coordinate system
>> further in text I mean with 'coordinates' always the SVG document 
>> coordinate system
>>
>>  > You probably want to look at things like 'getScreenCTM' ...
>> for my problem it is not necessarry to convert to screen coordinates
> 
> 
>    No you want to convert _from_ screen coordinates.
> 
>>  > 'getViewPort()' ...
>> when I debug the viewPort of the rootElement I always get X/Y = 0/0 
>> and width and height of the current canvas - independ on viewing the 
>> complete document or zoomed in a part of it !? Is this correct or did 
>> I something wrong ?
> 
> 
>   It is correct because the viewPort is (at least for the canvas) in
> screen coordinates.  So unless you resize the canvas it should stay the
> same when you zoom/pan.  But the screen CTM will change for the SVG
> element.
> 
>> When I zoomed in, I expected to found X/Y > 0 and width/height smaller 
>> than my documents width/height...
>>
>> I try to describe my problem by an example:
>> - my SVG is 2000x1000px
>> - I zoomed in, so now I see a part of the document starting on 
>> 600px/200px, 1000px wide and 500px high
>> - now I want to get these values: 600, 200, 1000 and 500, to know what 
>> is the currently visible part of the document...
>> (all coordinates in SVG document coordinate system)
> 
> 
>    Simply transform the viewPort to the outermost SVG element's
> coordinate system by using the inverse of the screen CTM for the
> outermost SVG element.
> 


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


Re: How to get coordinates of the displayed canvas part

Posted by Thomas DeWeese <Th...@Kodak.com>.
Maik Schürer wrote:
> Hi Thomas,
> I have not found a solution for my problem up to now.
> 
>  >In what coordinate system?
> in SVG document coordinate system
> further in text I mean with 'coordinates' always the SVG document 
> coordinate system
> 
>  > You probably want to look at things like 'getScreenCTM' ...
> for my problem it is not necessarry to convert to screen coordinates

    No you want to convert _from_ screen coordinates.

>  > 'getViewPort()' ...
> when I debug the viewPort of the rootElement I always get X/Y = 0/0 and 
> width and height of the current canvas - independ on viewing the 
> complete document or zoomed in a part of it !? Is this correct or did I 
> something wrong ?

   It is correct because the viewPort is (at least for the canvas) in
screen coordinates.  So unless you resize the canvas it should stay the
same when you zoom/pan.  But the screen CTM will change for the SVG
element.

> When I zoomed in, I expected to found X/Y > 0 and width/height smaller 
> than my documents width/height...
> 
> I try to describe my problem by an example:
> - my SVG is 2000x1000px
> - I zoomed in, so now I see a part of the document starting on 
> 600px/200px, 1000px wide and 500px high
> - now I want to get these values: 600, 200, 1000 and 500, to know what 
> is the currently visible part of the document...
> (all coordinates in SVG document coordinate system)

    Simply transform the viewPort to the outermost SVG element's
coordinate system by using the inverse of the screen CTM for the
outermost SVG element.

> 
> Thanks in advance for help and ideas
> Maik
> 
> Thomas DeWeese schrieb:
> 
>> Maik Schürer wrote:
>>
>>> how can I get the coordinates/dimensions of the currently displayed 
>>> piece of my SVG on SVGCanvas ?
>>
>>
>>
>>    In what coordinate system?  In the screen coordinate system it's
>> the components location and size - both easily obtainable from
>> Swing ;) So I presume you mean somewhere inside your SVG document.
>>
>>> Example: my SVG is 2000x1000px and currently (because I zoomed in) a 
>>> small piece of it is visible on SVGCanvas.
>>> I want to know, what ist the coordinate of the upper left corner of 
>>> this piece and its width and height...
>>
>>
>>
>>    You probably want to look at things like 'getScreenCTM' which will
>> give you the transform to the screen coordinate system.  Paired with
>> 'getViewPort()' you will have the information needed to calculate this.
>>
>>> and a second question:
>>> is it possible to detect, if the a SVG element (a text field e.g) is 
>>> visible on the currently displayed piece of my SVG or if it is 
>>> outside this area ?
>>
>>
>>
>>    You can use the intersection method or just do the simple check on
>> the BBox of the text (you may need to use the getTransformToElement
>> method to transform your BBOX to for example the root SVG element's
>> user coordinate space).
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>>
>>
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 


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


Re: How to get coordinates of the displayed canvas part

Posted by Maik Schürer <Ma...@proveo.de>.
Hi Thomas,
I have not found a solution for my problem up to now.

 >In what coordinate system?
in SVG document coordinate system
further in text I mean with 'coordinates' always the SVG document 
coordinate system

 > You probably want to look at things like 'getScreenCTM' ...
for my problem it is not necessarry to convert to screen coordinates

 > 'getViewPort()' ...
when I debug the viewPort of the rootElement I always get X/Y = 0/0 and 
width and height of the current canvas - independ on viewing the 
complete document or zoomed in a part of it !? Is this correct or did I 
something wrong ?
When I zoomed in, I expected to found X/Y > 0 and width/height smaller 
than my documents width/height...

I try to describe my problem by an example:
- my SVG is 2000x1000px
- I zoomed in, so now I see a part of the document starting on 
600px/200px, 1000px wide and 500px high
- now I want to get these values: 600, 200, 1000 and 500, to know what 
is the currently visible part of the document...
(all coordinates in SVG document coordinate system)

Thanks in advance for help and ideas
Maik

Thomas DeWeese schrieb:
> Maik Schürer wrote:
> 
>> how can I get the coordinates/dimensions of the currently displayed 
>> piece of my SVG on SVGCanvas ?
> 
> 
>    In what coordinate system?  In the screen coordinate system it's
> the components location and size - both easily obtainable from
> Swing ;) So I presume you mean somewhere inside your SVG document.
> 
>> Example: my SVG is 2000x1000px and currently (because I zoomed in) a 
>> small piece of it is visible on SVGCanvas.
>> I want to know, what ist the coordinate of the upper left corner of 
>> this piece and its width and height...
> 
> 
>    You probably want to look at things like 'getScreenCTM' which will
> give you the transform to the screen coordinate system.  Paired with
> 'getViewPort()' you will have the information needed to calculate this.
> 
>> and a second question:
>> is it possible to detect, if the a SVG element (a text field e.g) is 
>> visible on the currently displayed piece of my SVG or if it is outside 
>> this area ?
> 
> 
>    You can use the intersection method or just do the simple check on
> the BBox of the text (you may need to use the getTransformToElement
> method to transform your BBOX to for example the root SVG element's
> user coordinate space).
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 
> 


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