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/