<html xmlns:v="http://www.eglic.com/">
<head>
<title>页面画线</title>
<meta name="ContentType" content="text/html" />
<meta name="CharSet" content="GB2312" />
<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>
<style type="text/css">
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<div id="show" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">
</div>
</body>
</html>
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=820488