Re: How to get coordinates of the displayed canvas part

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

Maik Schürer
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: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

thomas.deweese
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: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

Maik Schürer
 >    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: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

Andreas Neumann
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: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

Andreas Neumann
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: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to get coordinates of the displayed canvas part

Brian Johnson
In reply to this post by Maik Schürer

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: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Loading...