Hi Aashish,
I use circles to represent points in my svg application. Therefore,
selectPoint1(evt) function assign first clicked circle's cx and cy values to x1
and y1 variables, and like selectPoint1, selectPoint2(evt) function assign
second clicked circle's cx and cy values to x2 and y2 variables. Then,
Distance(x1,y1,x2,y2) function is called. But alert window shows zero.
Not: I have two svg file: first is toolbar.svg and second is parcel.svg. I
embedded this two svg file a html page. To call the getDistance function, first
I click the related button on the toolbar and then click the two circle object
on the parcel.svg.
----- Original Message -----
From: Aashish Singhvi
To: svg-developers@yahoogroups.com
Sent: 11 March, 2005 21:02
Subject: [svg-developers] Re: event listener problem
Halil,
> function selectPoint1(evt){
> point1 = evt.target;
> x1=point1.getAttribute("cx");
> y1=point1.getAttribute("cy");
>
AS>> didn't understand what 'point1' object is.
If you just want the co-ordinate of where the user pressed the click,
that is available directly on the "evt" object as
evt.getClientX(), evt.getClientY() or simply evt.ClientX, evt.ClientY
(to make it generic to support zoom and pan, you can compensate for
the co-ordinates by processing through viewBox, currentTranslate, CTM
etc. (or CTM matrix))
HTH,
Aashish
--- In svg-developers@yahoogroups.com, "Halil AKINCI" <[EMAIL PROTECTED]>
wrote:
> Hi,
>
> I have a toolbar that includes several functions such as zoom in,
zoom out, move, rotate, roadWidth, getDistance, erase, etc. The codes
of all functions are in a JavaScript file. Following svg statements
shows a toolbar button sample.
>
> <g id="Distance" onclick="buttonclick(evt)" onmouseover="showLabel
(evt)" onmouseout="hideLabel()">
> <use xlink:href="#s_roadwidth" x="130" y="2" width="30"
height="26" />
> </g>
>
> To call the getDistance() function on the toolbar, first I clicked
the this button. The buttonclick(evt) function reads id of the all
button.
>
> function buttonclick(evt){
> currentid = evt.target.parentNode.getAttribute("id");
> if (currentid=='Distance'){
> alert('Select two point object');
> }
> if (currentid=='Road Width'){
> alert('Select road lines');
> }
> ...
> ...
> }
>
> Following svg statements represents my svg map file.
>
> <svg width='458' height='454' viewBox='28661 -30993 229 227'
onload="on_load(evt)" >
> <g id='parcel' onclick="mapclick(evt)" >
> <line x1='28847.90' y1='-31002.01' x2='28884.16' y2='-30946.58'
style='stroke:blue;stroke-width:1'/>
> <line x1='28884.16' y1='-30946.58' x2='28808.48' y2='-30899.64'
style='stroke:blue;stroke-width:1'/>
> ...
> ...
> <circle cx='28847.90' cy='-31002.00' r='0.5' style='stroke:black;
stroke-width:.25; fill:white'/>
> <circle cx='28884.16' cy='-30946.58' r='0.5' style='stroke:black;
stroke-width:.25; fill:white'/>
> ...
> ...
> </g>
> </svg>
>
> this is on_load function;
>
> function on_load(evt){
> svgdoc = evt.target.ownerDocument;
> svgroot = svgdoc.getDocumentElement();
> vbox = (svgroot.getAttribute("viewBox")).split(' ');
> x0 = parseFloat(vbox[0]);
> y0 = parseFloat(vbox[1]);
> vboxW = parseFloat(vbox[2]);
> vboxH = parseFloat(vbox[3]);
> svgW = parseFloat(svgroot.getAttribute("width"));
> svgH = parseFloat(svgroot.getAttribute("height"));
> }
>
> this is mapclick function,
>
> function mapclick(evt){
> if (currentid=='Distance'){
> getDistance()
> }
> if (currentid=='Road Width'){
> roadWidth();
> }
> ...
> ...
> }
>
> and this is getDistance function
>
> //********** Distance *********
> function getDistance(){
> svgdoc.getElementById("parcel").addEventListener
("click",selectPoint1, false);
> }
>
> function selectPoint1(evt){
> point1 = evt.target;
> x1=point1.getAttribute("cx");
> y1=point1.getAttribute("cy");
>
> listenTarget = evt.currentTarget;
> listenTarget.removeEventListener("click", selectPoint1, false);
> listenTarget.addEventListener("click", selectPoint2, false);
> }
>
> function selectPoint2(evt){
> point2 = evt.target;
> x2=point2.getAttribute("cx");
> y2=point2.getAttribute("cy");
>
> len=Distance(x1,y1,x2,y2).toFixed(2);
> alert("distance = "+l+" meter");
>
> listenTarget = evt.currentTarget;
> listenTarget.removeEventListener("click", selectPoint2, false);
> listenTarget.addEventListener("click", selectPoint1, false);
> }
>
> function Distance(x1,y1,x2,y2){
> return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
> }
>
> All of the variables such as svgdoc, point1, x1, y1, len are global
variables. When I want to show distance between two points, alert
window shows zero. I make a mistake, but I don't solve it. Can
anybody help me?
>
> Sincerely...
>
> Halil
>
>
>
>
> [Non-text portions of this message have been removed]
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Sponsor
ADVERTISEMENT
------------------------------------------------------------------------------
Yahoo! Groups Links
a.. To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
b.. To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
c.. Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
[Non-text portions of this message have been removed]
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
