如何用鼠标在网页上画连折线

随便写了一个，没时间去写什么橡皮筋算法<?xml version="1.0" encoding="gb2312" standalone="yes"?>
<html xmlns:v="http://www.eglic.com/">
<head>
<title></title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="eglic" />
<meta name="ContentType" content="text/html" />
<meta name="CharSet" content="GB2312" />
<link rel="stylesheet" type="text/css" href="/style/default.css" />
<style type="text/css">
v\:* {behavior:url(#default#VML);}
</style>
<script language="javascript" src="/script/default.js"></script>
<script language="javascript">
var Working=false;
var lastX=0;
var lastY=0;
document.ondblclick=function (){
if(!Working) return;
lastX=0;
lastY=0;
Working=false;
}
document.onclick=function (){
if(!Working){
Working=true;
lastX=event.x;
lastY=event.y;
}else{
var s='<v:line from="'+lastX+','+lastY+'" to="'+event.x+','+event.y+'" style="position:absolute;left:0px;top:0px;"></v:line>';
lastX=event.x;
lastY=event.y;
var o=document.createElement(s);
document.body.insertAdjacentElement('BeforeEnd',o);
}
}
document.onmousemove=function (){
if(!Working) return;
}
</script>
</head>
<body>
</body>
</html>

解决方案 »

  1.   

    eglic(圪圪) (http://www.eglic.com) 您好，非常感谢您
    我在下面网址开了个80的帖子，您过去说句话，我给您80分，当然分不能代表一切，但我非常感谢
    http://community.csdn.net/Expert/topic/4523/4523355.xml?temp=.266369
      

  2.   

    请教 eglic(圪圪) (http://www.eglic.com)
    我的最终目的是算出整条折线的长度，显示姑且用象素表示单位吧，最后的结果显示在一个浮动层中，双击折线结束，浮动层显示。我也知道基本思路  根下(x2-x1)方＋(y2-1)方可是我怎么知道点了几个折线点呢，做个计数变量吗，但是又怎么存储每一个点的xy坐标呢，这个点可是n个呀，请您给点思路，或帮忙写一下，非常感谢
      

  3.   

    <?xml version="1.0" encoding="gb2312" standalone="yes"?>
    <html xmlns:v="http://www.eglic.com/">
    <head>
    <title></title>
    <meta name="Generator" content="EditPlus" />
    <meta name="Author" content="eglic" />
    <meta name="ContentType" content="text/html" />
    <meta name="CharSet" content="GB2312" />
    <style type="text/css">
    v\:* {behavior:url(#default#VML);}
    </style>
    <script language="javascript">
    var Working=false;
    var points = [];
    var lastPoint = {x:0,y:0};
    document.ondblclick=function (){
    if(!Working) return;
    var len = getLenth();
    document.getElementById("show").innerHTML = "折线的总长度为：" + len + "px";
    document.getElementById("show").style.display="";
    points = [];
    lastPoint  = {x:0,y:0}
    Working=false;
    }
    document.onclick=function (){
    if(!Working){
    document.getElementById("show").style.display="none";
    Working=true;
    lastPoint.x = event.x;
    lastPoint.y = event.y;
    points.push( {x:event.x,y:event.y} );
    document.getElementById("show").innerHTML += "X:"+ lastPoint.x + " Y:" + lastPoint.y;
    document.getElementById("show").style.display="";
    }else{
    var s='<v:line from="'+lastPoint.x+','+lastPoint.y+'" to="'+event.x+','+event.y+'" style="position:absolute;left:0px;top:0px;"></v:line>';
    lastPoint.x = event.x;
    lastPoint.y = event.y;
    points.push( {x:event.x,y:event.y} );
    document.getElementById("show").innerHTML += "<br/>X:"+ event.x + " Y:" + event.y;
    document.getElementById("show").style.display="";
    var o=document.createElement(s);
    document.body.insertAdjacentElement('BeforeEnd',o);
    }
    }
    document.onmousemove=function (){
    if(!Working) return;
    }
    function getLenth()
    {
    //alert(points[1].x+":"+points[0].x);
        var len = 0;
    if( points.length <2 ) return 0;
    for(var i=0;i<points.length;i++)
    {
    if( points[i+1] )
    {
    var tmp = Math.pow(points[i+1].x - points[i].x,2) + Math.pow(points[i+1].y - points[i].y,2);
    var distance = parseInt(Math.sqrt( tmp ));
    len += distance;
    }
    }
    return len;
    }
    </script>
    </head>
    <body>
    <div id="show" style="border:1px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">
    </div>
    </body>
    </html>