Solved

Drawing a line using captured screen coordinates

Posted on 2009-04-05
22
1,256 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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
 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

732 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