主页
问答

高手请留步，VML画线如何在正确的显示在图片上？

likai22 2008-01-08 02:55:57

画一个直线，在图片为background的情况可以正常显示，但如果为img标签画的线就显示到外面去了，代码如下，高手请帮忙，在线等～～～
<SCRIPT LANGUAGE="JavaScript">
var linex,liney,a,b,flag;
flag=0;
function SelfXY(){
var yScrolltop;
var xScrollleft;
yScrolltop = event.clientY;
xScrollleft= event.clientX;
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
//alert("top "+yScrolltop+"left "+xScrollleft);

var y = parseInt(top)+parseInt(yScrolltop);
var x = parseInt(left)+parseInt(xScrollleft);
var arr = new Array();
arr[0] = x;
arr[1] = y;
//alert("x="+arr[0]+"y="+arr[1]);
return arr;
//alert(xScrollleft+y+" "+yScrolltop+x+" ");

}
function drawline(fromX,fromY,toX,toY){
var strElement= "<v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
}

function draw(){
var x1 = SelfXY();
if(flag==0){
//alert(x1[0]+" "+x1[1]);
linex=x1[0];liney=x1[1];
flag=1;
}else{
if(linex==undefined&&b==undefined){linex=x1[0];liney=x1[1];return false;}
a=x1[0];b=x1[1];
drawline(linex,liney,a,b)
//x=a;y=b;
flag=0;
alert("X="+linex+",Y="+liney+",A="+a+",B="+b);
}
}

function draws(){
var x1 = SelfXY();
if(flag==1){
if(linex==undefined&&b==undefined){return false;}
if(linex==x1[0]&&b==x1[1]){return false;}
if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""}
var strElement= "<v:Line id='TempLine' from='" + linex + "," + liney + "' to='" + x1[0] + "," + x1[1] + "' strokecolor='red'></v:Line>";
var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);

}else{

}
}

</SCRIPT>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<META http-equiv="Content-Type" content="text/html;Charset=gb2312">
<STYLE>
v\:*{behavior:url(#default#VML);}
</STYLE>
</HEAD>
<BODY>
<img src="c:\Blue hills.jpg"/>
<div id="map" style="width:1024px;height:768px;" onmousedown="draw();" onmousemove="draws()"></div>
</body>
</html>

...全文