Loading ...
Sorry, an error occurred while loading the content.

RE: [svg-developers] intersection

Expand Messages
  • Mathias FATENE
    Hi magic, ... Find lines intersection and plot a circle at this point Dr. Mathias FATENE This code
    Message 1 of 4 , Mar 7, 2004
    • 0 Attachment
      Hi magic,
      I wrote you a small code for that :
      -------------------------------------------------------- Lines intersection
      <svg onload="init(evt)" width="600" height="600">
      <desc>
      Find lines intersection and plot a circle at this point
      Dr. Mathias FATENE

      This code doesn't consider neither parallel lines, nor horizontal
      or vertical lines, which are specific cases for lines equations
      This cases will be posted later

      Answer to :
      /////////////////////////////////////////////////////////////////////
      -----Original Message-----
      From: magicbrigth [mailto:magicbrigth@...]
      Sent: Sunday, March 07, 2004 3:22 PM
      To: svg-developers
      Subject: [svg-developers] intersection

      Hi,

      I want to click two line and calculate intersection point's x and y
      coordinates, then set a circle that point. Where can I find javascript
      code samples for this example?

      thanks...
      /////////////////////////////////////////////////////////////////////
      </desc>

      <script type="text/ecmascript">
      var a,b,adot,bdot,svgdoc,svgroot,x,y

      function init(evt) {
      svgdoc=evt.target.ownerDocument();
      svgroot=svgdoc.getDocumentElement();

      /////////// First line
      a=(svgroot.getElementById("first").getAttribute('y2') -
      svgroot.getElementById("first").getAttribute('y1'))/(svgroot.getElementById(
      "first").getAttribute('x2') -
      svgroot.getElementById("first").getAttribute('x1'))

      b=svgroot.getElementById("first").getAttribute('y2')-a*svgroot.getElementByI
      d("first").getAttribute('x2')

      /////////// Second line
      adot=(svgroot.getElementById("second").getAttribute('y2') -
      svgroot.getElementById("second").getAttribute('y1'))/(svgroot.getElementById
      ("second").getAttribute('x2') -
      svgroot.getElementById("second").getAttribute('x1'))

      bdot=svgroot.getElementById("second").getAttribute('y2')-adot*svgroot.getEle
      mentById("second").getAttribute('x2')

      /////////// Intersection
      x=(bdot-b)/(a-adot)
      y=(a*bdot-adot*b)/(a-adot)

      // alert(adot+" "+bdot+" "+x+" "+y)
      svgdoc.getElementById("MyCirc").setAttribute("cx",x)
      svgdoc.getElementById("MyCirc").setAttribute("cy",y)
      svgdoc.getElementById("MyCirc").setAttribute("r",2)

      }

      </script>
      <line id="first" x="10" x2="200" y1="10" y2="200" stroke="blue"
      stroke-width="1" />
      <line id="second" x="10" x2="200" y1="200" y2="10" stroke="green"
      stroke-width="1" />
      <!-- Prepare a circle for modifying its attributes later -->
      <circle id="MyCirc" cx="0" cy="0" r="0" fill="none" stroke="red"
      stroke-width="1"/>
      </svg>

      ---------------------------------------------

      Hope that helps

      Mathias

      -----Original Message-----
      From: magicbrigth [mailto:magicbrigth@...]
      Sent: Sunday, March 07, 2004 3:22 PM
      To: svg-developers
      Subject: [svg-developers] intersection


      Hi,

      I want to click two line and calculate intersection point's x and y
      coordinates, then set a circle that point. Where can I find javascript
      code samples for this example?

      thanks...



      -----
      To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
      -or-
      visit http://groups.yahoo.com/group/svg-developers and click "edit my
      membership"
      ----
      Yahoo! Groups Links
    Your message has been successfully submitted and would be delivered to recipients shortly.