Solved

Drawing a line using captured screen coordinates

Posted on 2009-04-05
22
1,242 Views
Last Modified: 2013-11-19
Hi,

For the code below............is it possible to capture the screen coordinates and draw the line, instead of accepting input from 4 text boxes?

Thanks
<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>

  <style>

    v\:* {behavior:url(#default#VML);}

  </style>

  <script language="JavaScript">

 

  function makeNewPolyLine( pts )

  {

    var line = document.createElement( "v:polyLine" ) ;

    line.points = pts.join( ',' ) ;

    line.style.position = 'absolute' ;

    line.stroked = true ;

    line.filled = true ;

    line.fillcolor = 'black' ;

    return line ;

  }

  

  function drawArrow( container, lineId, x, y, xx, yy )

  {

    var arrowWidth = 10.0 ;

    var theta = 0.423 ;

    var xPoints = [] ;

    var yPoints = []

    var vecLine = [] ;

    var vecLeft = [] ;

    var fLength;

    var th;

    var ta;

    var baseX, baseY ;

 

    xPoints[ 0 ] = xx ;

    yPoints[ 0 ] = yy ;

 

    // build the line vector

    vecLine[ 0 ] = xPoints[ 0 ] - x ;

    vecLine[ 1 ] = yPoints[ 0 ] - y ;

 

    // build the arrow base vector - normal to the line

    vecLeft[ 0 ] = -vecLine[ 1 ] ;

    vecLeft[ 1 ] = vecLine[ 0 ] ;

 

    // setup length parameters

    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;

    th = arrowWidth / ( 2.0 * fLength ) ;

    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;

 

    // find the base of the arrow

    baseX = xPoints[ 0 ] - ta * vecLine[0] ;

    baseY = yPoints[ 0 ] - ta * vecLine[1] ;

 

    // build the points on the sides of the arrow

    xPoints[ 1 ] = baseX + th * vecLeft[0] ;

    yPoints[ 1 ] = baseY + th * vecLeft[1] ;

    xPoints[ 2 ] = baseX - th * vecLeft[0] ;

    yPoints[ 2 ] = baseY - th * vecLeft[1] ;

 

    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;

    var oldLine = document.getElementById( lineId ) ;

 

    if( oldLine ) // a line with this ID exists, so just change it

    {

      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)

    }

    else // add a new line

    {

      var newLine = makeNewPolyLine( ptArr ) ;

      newLine.setAttribute( "id", lineId ) ;

      container.appendChild( newLine ) ;

    }

  }  

 

  function makeCall()

  {

    var id  = document.getElementById( 'theid' ).value ;

    var canvas = document.getElementById( 'canvas' ) ;

    var x1 = document.getElementById( 'x1' ).value ;

    var y1 = document.getElementById( 'y1' ).value ;

    var x2 = document.getElementById( 'x2' ).value ;

    var y2 = document.getElementById( 'y2' ).value ;

    drawArrow( canvas, id, x1, y1, x2, y2 ) ;

  }

  </script>

</head>

<body>

  <div id="canvas" style="width: 600px ; height: 400px">

  </div>

  LineID: <input type="text" size="4" id="theid" value="line1">

  X1: <input type="text" size="4" id="x1" value="10"> Y1: <input type="text" size="4" id="y1" value="10"> -&gt;

  X2: <input type="text" size="4" id="x2" value="300"> Y2: <input type="text" size="4" id="y2" value="120">

  <button onclick="makeCall()">DRAW!</button>

 

</body>

</html>

Open in new window

0
Comment
Question by:Tul02
  • 12
  • 10
22 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24074635
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24074642
sorry. did not see the VML there

Yes it should be possible

http://javascript.internet.com/page-details/mouse-coordinates.html
0
 

Author Comment

by:Tul02
ID: 24075037
Thank you 'mplungjan' for your response. Unfortunately, it did'nt answer my question. I am trying to capture 2 sets of screen coordinates........(x1,y1) and (x2, y2)......denoting the starting and ending points..........and store them, in order to draw a line.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075065
Yes - you start saving onClick and finish on the next onClick.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075083
I'll have a look
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075234
Here you are

<html xmlns:v="urn:schemas-microsoft-com:vml">

  <head>

  <title></title>

  <style type="text/css">

    v\:* {behavior:url(#default#VML);}

  </style>

  <script language="JavaScript">

<!-- Original:  CodeLifter.com (support@codelifter.com) -->

<!-- Web Site:  http://www.codelifter.com -->
 

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- The capture script was modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 

<!-- Begin

var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEDOWN)

document.onmousedown = getMouseXY;
 

var lines = new Array();

var currentLine = 0;

function crtLine(x,y,id) {

  this.id=id;

  this.x1=x;

  this.y1=y;

  this.x2=0;

  this.y2=0;

}

function getMouseXY(e) {

  var tempX = 0;

  var tempY = 0;

  if (IE) { // grab the x-y pos.s if browser is IE

    tempX = event.clientX + document.body.scrollLeft;

    tempY = event.clientY + document.body.scrollTop;

  }

  else {  // grab the x-y pos.s if browser is not IE

    tempX = e.pageX;

    tempY = e.pageY;

  }  

  if (tempX < 0){tempX = 0;}

  if (tempY < 0){tempY = 0;}

  if (lines[currentLine]) {

    lines[currentLine].x2=tempX;

    lines[currentLine].y2=tempY;

    document.getElementById('lineDiv').innerHTML+='<br>'+lines[currentLine].id+': '+ lines[currentLine].x1 +'x'+ lines[currentLine].y1 + ','+ lines[currentLine].x2 +'x'+ lines[currentLine].y2 

    drawArrow( document.getElementById( 'canvas' ), lines[currentLine].id, lines[currentLine].x1, lines[currentLine].y1, lines[currentLine].x2, lines[currentLine].y2 ) ;

    currentLine++

  }

  else { 

    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)

  }  

  return true;

}
 

// end of capture script 

 

  function makeNewPolyLine( pts )

  {

    var line = document.createElement( "v:polyLine" ) ;

    line.points = pts.join( ',' ) ;

    line.style.position = 'absolute' ;

    line.stroked = true ;

    line.filled = true ;

    line.fillcolor = 'black' ;

    return line ;

  }

  

  function drawArrow( container, lineId, x, y, xx, yy )

  {

    var arrowWidth = 10.0 ;

    var theta = 0.423 ;

    var xPoints = [] ;

    var yPoints = []

    var vecLine = [] ;

    var vecLeft = [] ;

    var fLength;

    var th;

    var ta;

    var baseX, baseY ;

 

    xPoints[ 0 ] = xx ;

    yPoints[ 0 ] = yy ;

 

    // build the line vector

    vecLine[ 0 ] = xPoints[ 0 ] - x ;

    vecLine[ 1 ] = yPoints[ 0 ] - y ;

 

    // build the arrow base vector - normal to the line

    vecLeft[ 0 ] = -vecLine[ 1 ] ;

    vecLeft[ 1 ] = vecLine[ 0 ] ;

 

    // setup length parameters

    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;

    th = arrowWidth / ( 2.0 * fLength ) ;

    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;

 

    // find the base of the arrow

    baseX = xPoints[ 0 ] - ta * vecLine[0] ;

    baseY = yPoints[ 0 ] - ta * vecLine[1] ;

 

    // build the points on the sides of the arrow

    xPoints[ 1 ] = baseX + th * vecLeft[0] ;

    yPoints[ 1 ] = baseY + th * vecLeft[1] ;

    xPoints[ 2 ] = baseX - th * vecLeft[0] ;

    yPoints[ 2 ] = baseY - th * vecLeft[1] ;

 

    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;

    var oldLine = document.getElementById( lineId ) ;

 

    if( oldLine ) // a line with this ID exists, so just change it

    {

      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)

    }

    else // add a new line

    {

      var newLine = makeNewPolyLine( ptArr ) ;

      newLine.setAttribute( "id", lineId ) ;

      container.appendChild( newLine ) ;

    }

  }  

 

  </script>

</head>

<body>

  <div id="canvas" style="width: 600px ; height: 400px"> </div>

  <div id="lineDiv"> </div>  

</body>

</html>

Open in new window

0
 

Author Comment

by:Tul02
ID: 24075371
Hi,

Thanks for your response once more......and the solution (no wonder you have ben assigned the status of a 'genius' :-)-). It does work on its own. However, while calling the function from the body of a page.................for e.g., "<a href="javascript:onclick=somefunction()">Draw a line</a>".............................I am an error? Could you kindly devise a way of calling it from a link on a page?

Also, is there a way to place two markers (a circle or something) on the joining points (that appears only when the line is clicked)?

Regards
0
 

Author Comment

by:Tul02
ID: 24075375
Hi,

Thanks for your response once more......and the solution (no wonder you have ben assigned the status of a 'genius' :-)-). It does work on its own. However, while calling the function from the body of a page.................for e.g., "<a href="javascript:onclick=somefunction()">Draw a line</a>".............................I am getting an error. Could you kindly devise a way of calling it from a link on a page?

Also, is there a way to place two markers (a circle or something) on the joining points (that appears only when the line is clicked)?

Regards
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075453
Erm... okeee, thanks for the kind words...

What did you have in mind about the lines?

To not join the lines before you click a link is simple

To add a circle is not so simple...
0
 

Author Comment

by:Tul02
ID: 24075477
Hi,

I was actually trying to connect circles on a page, using the lines.

If placing a marker is too difficult, it is alright not to do it right now. However, without the other bit (drawing a line after clicking on a link in the body of a page), the function is generating an error. Could you kindly get this bit done?

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075557
Here... change the createElement to a VML circle with center in x.y



<html xmlns:v="urn:schemas-microsoft-com:vml">

  <head>

  <title></title>

  <style type="text/css">

    v\:* {behavior:url(#default#VML);}

  </style>

  <script language="JavaScript">

<!-- Original:  CodeLifter.com (support@codelifter.com) -->

<!-- Web Site:  http://www.codelifter.com -->
 

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 

<!-- Begin

var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEDOWN)

document.onmousedown = getMouseXY;
 

var lines = new Array();

var currentLine = 0;

var container;

function crtLine(x,y,id) {

  this.id=id;

  this.x1=x;

  this.y1=y;

  this.x2=0;

  this.y2=0;

}

function addPointDiv(id,x,y) {

  try {

    var point = document.createElement('div');

    point.id = id;

    point.style.position='absolute'; 

    point.style.top = y+'px';

    point.style.left= x+'px';

    point.style.color='red';

    point.innerHTML=id;

    container.appendChild(point);

  }

  catch(e) { alert(e.message)}
 

}

window.onload=function() { 

  container = document.getElementById('canvas')

}

function getMouseXY(e) {

  var tempX = 0;

  var tempY = 0;

  if (IE) { // grab the x-y pos.s if browser is IE

    tempX = event.clientX + document.body.scrollLeft;

    tempY = event.clientY + document.body.scrollTop;

  }

  else {  // grab the x-y pos.s if browser is not IE

    tempX = e.pageX;

    tempY = e.pageY;

  }

  if (tempY > 400) return; // do not capture events when the links are clicked  

  if (tempX < 0){tempX = 0;}

  if (tempY < 0){tempY = 0;}

  if (lines[currentLine]) {

    lines[currentLine].x2=tempX;

    lines[currentLine].y2=tempY;

    document.getElementById('lineDiv').innerHTML+='<br>'+

      '<a href="#" onClick="drawArrow(container, \''+lines[currentLine].id +'\','+lines[currentLine].x1+','+lines[currentLine].y1+','+lines[currentLine].x2+','+lines[currentLine].y2+'); return false">Draw '+lines[currentLine].id+'</a>' ;

    addPointDiv('to_'+lines[currentLine].id,lines[currentLine].x2,lines[currentLine].y2)

    currentLine++

  }

  else { 

    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)

    addPointDiv('from_'+lines[currentLine].id,lines[currentLine].x1,lines[currentLine].y1)

  }  

  return true;

}
 

 

  function makeNewPolyLine( pts )

  {

    var line = document.createElement( "v:polyLine" ) ;

    line.points = pts.join( ',' ) ;

    line.style.position = 'absolute' ;

    line.stroked = true ;

    line.filled = true ;

    line.fillcolor = 'black' ;

    return line ;

  }

  

  function drawArrow( container, lineId, x, y, xx, yy )

  {

    document.getElementById('from_'+lineId).style.display='none'

    document.getElementById('to_'+lineId).style.display='none'

    var arrowWidth = 10.0 ;

    var theta = 0.423 ;

    var xPoints = [] ;

    var yPoints = []

    var vecLine = [] ;

    var vecLeft = [] ;

    var fLength;

    var th;

    var ta;

    var baseX, baseY ;

 

    xPoints[ 0 ] = xx ;

    yPoints[ 0 ] = yy ;

 

    // build the line vector

    vecLine[ 0 ] = xPoints[ 0 ] - x ;

    vecLine[ 1 ] = yPoints[ 0 ] - y ;

 

    // build the arrow base vector - normal to the line

    vecLeft[ 0 ] = -vecLine[ 1 ] ;

    vecLeft[ 1 ] = vecLine[ 0 ] ;

 

    // setup length parameters

    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;

    th = arrowWidth / ( 2.0 * fLength ) ;

    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;

 

    // find the base of the arrow

    baseX = xPoints[ 0 ] - ta * vecLine[0] ;

    baseY = yPoints[ 0 ] - ta * vecLine[1] ;

 

    // build the points on the sides of the arrow

    xPoints[ 1 ] = baseX + th * vecLeft[0] ;

    yPoints[ 1 ] = baseY + th * vecLeft[1] ;

    xPoints[ 2 ] = baseX - th * vecLeft[0] ;

    yPoints[ 2 ] = baseY - th * vecLeft[1] ;

 

    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;

    var oldLine = document.getElementById( lineId ) ;

 

    if( oldLine ) // a line with this ID exists, so just change it

    {

      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)

    }

    else // add a new line

    {

      var newLine = makeNewPolyLine( ptArr ) ;

      newLine.setAttribute( "id", lineId ) ;

      container.appendChild( newLine ) ;

    }

  }  

 

  </script>

</head>

<body>

  <div id="canvas" style="width: 600px ; height: 400px"> </div>

  <div id="lineDiv"> </div>  

</body>

</html>

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Tul02
ID: 24075652
Hi,

Can you make it a little less complicated please? :-) The code right now is triggering the link ('Draw line0'), after an user clicks anywhere on the body. Instead, is it possible to call the entire function for drawing a line from a static link in the body of the page?

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24075680
Then you need to tell me the exact procedure from I load the empty looking page to I see a line.

Now you get a link for each SET of clicks, try to click 4 times around the place
0
 

Author Comment

by:Tul02
ID: 24075723
Hi,

What I meant was......................

"<body>
  <div id="canvas" style="width: 600px ; height: 400px"> </div>
  <div id="lineDiv"> </div>  

<span><a href="javascript:onclick=drawLine()">Draw a line</a> </span>
</body>"

with 'drawLine()' calling the code you created to generate a line.

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24076468
I understand what you meant. I just do not undestand what you want

The script currently captures PAIRS of coordinates. WHICH do you want to draw WHEN?
And you want people to not have to click too often, so now you add a click to do the actual drawing?

So again, can you tell me what a typical user should see

1. load page - page is empty (or had a map or whatever)
2. User clicks what and what?
3. User clicks link to draw what and what?
0
 

Author Comment

by:Tul02
ID: 24079966
Hi,

Alright, I see the confusion. Apologies for failing to get my requirement across. Here it goes...........

1) User types an URL, and a page is loaded with an empty canvas (a div) and various links..........one of which (a static link) allows the user to draw a line between a pair of coordinates.

2) User clicks on the link (for e.g. ><a href="javascript:onclick=drawLine()">Draw a line</a> ), which invokes a function (after asking the user to click on two points through which a line is required) to accept the 2 coordinates/points to draw the line.

3) User clicks on two places on the blank canvas and the line is drawn.

Basically, the code to draw a single line is invoked everytime the user clicks on the 'Draw a line' link.

Hope I could explain it better this time :-)

Thanks and Regards
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24080725
  2. <a href="#" onClick="drawArrow(container, 'lineX' ,300,200,200,150); return false">Draw</a>

3. change
 
   document.getElementById('lineDiv').innerHTML+='<br>'+
      '<a href="#" onClick="drawArrow(container, \''+lines[currentLine].id +'\','+lines[currentLine].x1+','+lines[currentLine].y1+','+lines[currentLine].x2+','+lines[currentLine].y2+'); return false">Draw '+lines[currentLine].id+'</a>' ;
   
to


   drawArrow(container, lines[currentLine].id ,lines[currentLine].x1,lines[currentLine].y1,lines[currentLine].x2,lines[currentLine].y2);

0
 

Author Comment

by:Tul02
ID: 24081600
Hi,

Although the above changes make the code to only mark the two points through which the line should be drawn, but does not actually draw the line, I will accept this solution, along with the code snippet you posted previously.

Many thanks for all your help. I hope I didn't bother you too much, and that you will be willing to help again, if I need any in the future :-)

Best regards

0
 

Author Closing Comment

by:Tul02
ID: 31566789
Thank you 'mplungjan' for all your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24083952
Of course.
Please tell me what is missing so I can fix it. If you need more help than that, my email is in my profile. I'd like to see the end product
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24084338
Fixed it.

I tried to remove a point that was not there


<html xmlns:v="urn:schemas-microsoft-com:vml">

  <head>

  <title></title>

  <style type="text/css">

    v\:* {behavior:url(#default#VML);}

  </style>

  <script language="JavaScript">

<!-- Original:  CodeLifter.com (support@codelifter.com) -->

<!-- Web Site:  http://www.codelifter.com -->
 

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Modified by mplungjan javascripts(a)plungjan.name to capture click instead -->
 

<!-- Begin

var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEDOWN)

document.onmousedown = getMouseXY;
 

var lines = new Array();

var currentLine = 0;

var container;

function crtLine(x,y,id) {

  this.id=id;

  this.x1=x;

  this.y1=y;

  this.x2=0;

  this.y2=0;

}

function addPointDiv(id,x,y) {

  try {

    var point = document.createElement('div');

    point.id = id;

    point.style.position='absolute'; 

    point.style.top = y+'px';

    point.style.left= x+'px';

    point.style.color='red';

    point.innerHTML=id;

    container.appendChild(point);

  }

  catch(e) { alert(e.message)}
 

}

window.onload=function() { 

  container = document.getElementById('canvas')

}

function getMouseXY(e) {

  var tempX = 0;

  var tempY = 0;

  if (IE) { // grab the x-y pos.s if browser is IE

    tempX = event.clientX + document.body.scrollLeft;

    tempY = event.clientY + document.body.scrollTop;

  }

  else {  // grab the x-y pos.s if browser is not IE

    tempX = e.pageX;

    tempY = e.pageY;

  }

  if (tempY > 400) return; // do not capture events when the links are clicked  

  if (tempX < 0){tempX = 0;}

  if (tempY < 0){tempY = 0;}

  if (lines[currentLine]) {

    lines[currentLine].x2=tempX;

    lines[currentLine].y2=tempY;

//    document.getElementById('lineDiv').innerHTML+='<br>'+

//      '<a href="#" onClick="drawArrow(container, \''+lines[currentLine].id +'\','+lines[currentLine].x1+','+lines[currentLine].y1+','+lines[currentLine].x2+','+lines[currentLine].y2+'); return false">Draw '+lines[currentLine].id+'</a>' ;
 
 

    addPointDiv('to_'+lines[currentLine].id,lines[currentLine].x2,lines[currentLine].y2)

    drawArrow(container, lines[currentLine].id ,lines[currentLine].x1,lines[currentLine].y1,lines[currentLine].x2,lines[currentLine].y2);

    currentLine++

  }

  else { 

    lines[currentLine] = new crtLine(tempX,tempY,'line'+currentLine)

    addPointDiv('from_'+lines[currentLine].id,lines[currentLine].x1,lines[currentLine].y1)

  }  

  return true;

}
 

 

  function makeNewPolyLine( pts )

  {

    var line = document.createElement( "v:polyLine" ) ;

    line.points = pts.join( ',' ) ;

    line.style.position = 'absolute' ;

    line.stroked = true ;

    line.filled = true ;

    line.fillcolor = 'black' ;

    return line ;

  }

  

  function drawArrow( container, lineId, x, y, xx, yy )

  {

    try { // only remove if there

      document.getElementById('from_'+lineId).style.display='none'

      document.getElementById('to_'+lineId).style.display='none'

    }

    catch(e) {}      

    var arrowWidth = 10.0 ;

    var theta = 0.423 ;

    var xPoints = [] ;

    var yPoints = []

    var vecLine = [] ;

    var vecLeft = [] ;

    var fLength;

    var th;

    var ta;

    var baseX, baseY ;

 

    xPoints[ 0 ] = xx ;

    yPoints[ 0 ] = yy ;

 

    // build the line vector

    vecLine[ 0 ] = xPoints[ 0 ] - x ;

    vecLine[ 1 ] = yPoints[ 0 ] - y ;

 

    // build the arrow base vector - normal to the line

    vecLeft[ 0 ] = -vecLine[ 1 ] ;

    vecLeft[ 1 ] = vecLine[ 0 ] ;

 

    // setup length parameters

    fLength = Math.sqrt( vecLine[0] * vecLine[0] + vecLine[1] * vecLine[1] ) ;

    th = arrowWidth / ( 2.0 * fLength ) ;

    ta = arrowWidth / ( 2.0 * ( Math.tan( theta ) / 2.0 ) * fLength ) ;

 

    // find the base of the arrow

    baseX = xPoints[ 0 ] - ta * vecLine[0] ;

    baseY = yPoints[ 0 ] - ta * vecLine[1] ;

 

    // build the points on the sides of the arrow

    xPoints[ 1 ] = baseX + th * vecLeft[0] ;

    yPoints[ 1 ] = baseY + th * vecLeft[1] ;

    xPoints[ 2 ] = baseX - th * vecLeft[0] ;

    yPoints[ 2 ] = baseY - th * vecLeft[1] ;

 

    var ptArr = [ x, y, baseX, baseY, xPoints[ 1 ], yPoints[ 1 ], xPoints[ 0 ], yPoints[ 0 ], xPoints[ 2 ], yPoints[ 2 ], baseX, baseY ] ;

    var oldLine = document.getElementById( lineId ) ;

 

    if( oldLine ) // a line with this ID exists, so just change it

    {

      oldLine.points.value = ptArr.join( ',' ) ;  // need to use points.value here for some mental reason ;)

    }

    else // add a new line

    {

      var newLine = makeNewPolyLine( ptArr ) ;

      newLine.setAttribute( "id", lineId ) ;

      container.appendChild( newLine ) ;

    }

  }  

 

  </script>

</head>

<body>

  <div id="canvas" style="width: 600px ; height: 400px"> </div>

  <div id="lineDiv">

  <a href="#" onClick="drawArrow(container, 'lineX' ,300,200,200,150); return false">Draw</a>

  </div>  

</body>

</html>

Open in new window

0
 

Author Comment

by:Tul02
ID: 24105313
Hi Michel,

The code works fine now. Thanks! I have taken note of your email id, and will send you a link of the software I am trying to develop once it is complete.

I will be posting a question pertaining to AJAX/PHP/MySQL to the forum (AJAX and PHP) in a moment. I have a simple guestbook form that has 4 fields (num, name, email, and comments). What I need is in line edit boxes for each of these fields.......which will accept user input (except for 'num' that is auto-generated) and asynchronously display it on the top of the page (before the form fields), where the other entries from the database are already displayed (as soon as the page loads)...............saving a copy, of course, in the backend MySQL database.

I hope you can help me in this one too.

Best regards
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now