如何在图像的任意两点（通过鼠标按下、还原获得起点和终点）间画直线？（有基本代码）

确实如此，谢谢关注，以下给出一种新的方法；
不过有谁能完善上面的方法呢，解决了分数全归他吆！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html   xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script>var n=0;
function deltab()
{
if(document.getElementById('tab'+n) != null )
{
document.getElementById('tab'+n).removeNode();
if(document.getElementById('div_'+n) != null)
{
document.getElementById('div_'+n).removeNode();
document.getElementById('line_'+n).removeNode();
}
n--;
}
}function t()
{
  var x,y;
  if (document.layers) getMouseLoc;     //NS
  else if (document.all) getMouseLoc(); //IE
  x=mouseLocation.x;
  y=mouseLocation.y;
  n++;
  var f = "<table id='tab"+n+"' bgcolor='red' style=\"position:absolute; z-index:5; font-size:10pt;left:'"+x+"';top:'"+y+"';\" width=10 height=10><tr><td></td></tr></table>";
  document.body.innerHTML += f;
  if(n>1)
  {
   var cx = parseInt(document.getElementById('tab'+n).style.left.replace('px',''));
var cy = parseInt(document.getElementById('tab'+n).style.top.replace('px',''));
var px = parseInt(document.getElementById('tab'+(n-1)).style.left.replace('px',''));
var py = parseInt(document.getElementById('tab'+(n-1)).style.top.replace('px',''));

var top = (cy>py)?py:cy;
var left = (cx>px)?px:cx;
var width = Math.abs(cx-px);
var height= Math.abs(cy-py);

if( (cx>=px && cy>=py) || (cx<=px && cy<=py) )
{
document.body.innerHTML += "<div id='div_"+n+"' style=\"position:absolute; z-index:5; font-size:10pt;left:'"+left+"';top:'"+top+"';\" width="+width+" height="+height+"><v:line id='line_"+n+"'  strokecolor='red' from='0,0' to='"+width+","+height+"'/></div>";
}
else
{
document.body.innerHTML += "<div id='div_"+n+"' style=\"position:absolute; z-index:5; font-size:10pt;left:'"+left+"';top:'"+top+"';\" width="+width+" height="+height+"><v:line id='line_"+n+"'  strokecolor='red' from='"+width+",' to='0,"+height+"'/></div>";
}
  }
}
function displayall()
{
var i;
var s='';
for(i=n;i>0;i--)
{
s+=document.getElementById('tab'+i).style.left.replace('px','')+"   ";
s+=document.getElementById('tab'+i).style.top.replace('px','')+"\r\n";
}
alert(s);
}function test()
{
  if (document.layers) getMouseLoc;     //NS
  else if (document.all) getMouseLoc(); //IE

  document.all.textX.value=mouseLocation.y;
  document.all.textY.value=mouseLocation.x;
}function Point(x,y) {  this.x = x; this.y = y; }mouseLocation = new Point(-500,-500);function getMouseLoc(e)
{
  if(!document.all)  //NS
  {
    mouseLocation.x = e.pageX;
    mouseLocation.y = e.pageY;
  }
  else               //IE
  {
    mouseLocation.x = event.x + document.body.scrollLeft;
    mouseLocation.y = event.y + document.body.scrollTop;
  }
  return true;
}//NS init:
if(document.layers)
{
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = getMouseLoc;
}
</script>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<body>
<div id='sss'></div>
<input name="bacm" type="button" id="bacm" onClick="deltab()" value="后退" width="70px" text="后  退">
<input name="button"  type="button" onClick="displayall()" value="aasdf">
<input name="textY" id="textY"  style="position:absolute; z-index:4; left:125px; top:7px; width: 20px; height: 17px;" type="text" width="20px">
<input name="textX" id="textX4"  style="position:absolute; z-index:1; left:182px; top:7px; overflow: visible;" type="text" width="20px">
<div id="Layer1" onclick="t()" style="position:absolute; width:6912px; height:816px; z-index:1; left: 0px; top: 75px;  border: 1px none #000000;"></div>
</body>
</html>
drawLine(parseInt(x1),parseInt(y1),parseInt(x2),parseInt(y2),"#0000cc",2,0);
类型转换的问题<html>
<head>
<script language="javascript">function mDown(){
  var x0,y0;
  x0=window.event.offsetX;
  y0=window.event.offsetY;
  document.fr1.x.value=x0;
  document.fr1.y.value=y0;
  }
function mMove(){}
function mUp(){
  var x1,y1,x2,y2;
  x1=document.fr1.x.value;
  y1=document.fr1.y.value;
  x2=window.event.offsetX;
  y2=window.event.offsetY;
  //动态调用画直线函数，drawLine在下面做了定义
  drawLine(parseInt(x1),parseInt(y1),parseInt(x2),parseInt(y2),"#0000cc",2,0);
}/****************** JS2D函数集  *******************  作者：neweroica    2003-3-28  CopyRight (C) 2003  在引用或转载时请保留此版权信息，谢谢!!!  本函数集可以单独存成一个js文件："JS2D.js"***************************************************//************* 画点 **************
  x,y     点所在的屏幕坐标（像素）
  color   颜色（字符串值）
  size    大小（像素）
**********************************/
function drawDot(x,y,color,size){
  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>")
}/************* 画直线 **************
  x1,y1   起点所在的屏幕坐标（像素）
  x2,y2   终点所在的屏幕坐标（像素）
  color   颜色（字符串值）
  size    大小（像素）
  style   样式
          =0    实线
          =1    虚线
          =2    虚实线
**********************************/
function drawLine(x1,y1,x2,y2,color,size,style){
  var i;
  var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
  var theta=Math.atan((x2-x1)/(y2-y1));
  if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))
    theta=Math.PI+theta;
  var dx=Math.sin(theta);//alert(dx)
  var dy=Math.cos(theta);
  for(i=0;i<r;i++){
    switch(style){
      case 0:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 1:
        i+=size*2;
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 2:
        if(Math.floor(i/4/size)%2==0){
          drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        else{
            i+=size*2;
            drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        break;
      default:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
    }
  }
}</script></head>
<body onMouseDown="mDown();" onMouseMove="mMove();" onMouseUp="mUp();">
<form  name=fr1>
<input type=hidden name=x>
<input type=hidden name=y>
</form>
</body>
</html>

调试易

如何在图像的任意两点（通过鼠标按下、还原获得起点和终点）间画直线？（有基本代码）

解决方案 »