100分求解VML问题：使用VML画线，帮顶的有分！

function drawLine(x1,y1,x2,y2)
{
//绘图index
index++;
var id="ctl_line"+index;
var strHtml='';
strHtml += '<v:line id="'+id+'" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:' + x1 + ';top:' + y1 + '" strokecolor="black" to=\"'+x2+','+y2+'\" >';
  strHtml += '<v:stroke EndArrow="Classic"/>';
  strHtml += '</v:line>';
  //prompt("",strHtml);
  divCanvas.insertAdjacentHTML('beforeEnd',strHtml);
}

解决方案 »

  1.   

    改了下，已经可以了。但为什么只有向右下角画的时候不能触发div的onmouseup事件，其它情况都能触发这一事件，还没明白。
    <html xmlns:v>
    <head>
    <title>绘图</title>
    <STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
    </head>
    <body oncontextmenu="return false;"  onselectstart="return false" onload="ini()">
    <!--绘制虚线-->
    <v:Line id="ctl_drawLine" style="position:absolute;z-index:2000;display:none" strokecolor="black" strokeweight="1px">
    <v:Stroke dashstyle="shortdash"/>
    </v:line>
    <input type="button" value="HTML" onclick="alert(document.all.divCanvas.innerHTML);">
    <input type="button" value="test" onclick="draw();">
    <!--中间的画布-->
    <div id="divCanvas" onselectstart="return false" style="position:absolute;left:0; top:27; width:995; height:570;background:#009999"></div>
    <script>
    //是否绘制线条
    var fDrawLine=false;
    //当前所选择的对象
    var fx,fy;
    //绘制图形的z-index
    var zindex=1000;
    //绘制对象数组
    var index=0;
    function ini(){
    divCanvas.onmousedown=function(){
    //保存坐标
    fx=event.x;
    fy=event.y;

    //显示画线路径
    var objLine=document.all("ctl_drawLine");
    objLine.style.left=fx;
    objLine.style.top=fy;
    //objLine.from=fx+","+fy;
    objLine.to="0,0";
    objLine.style.display="";
    //修改标识
    fDrawLine=true;
    }
    divCanvas.onmousemove=function(){
      if(fDrawLine && event.button==1){
    var objLine=document.all("ctl_drawLine");
    objLine.to=(event.x-fx)+","+(event.y-fy);
    window.status="线条位置("+(event.x-fx)+","+(event.y-fy)+")";
    }else{
    window.status="当前位置("+event.x+","+event.y+")";
    }
    }
    divCanvas.onmouseup=function(){
    if(fDrawLine){
    fDrawLine=false;
    document.all("ctl_drawLine").style.display="none";
    drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
    }
    }
    ctl_drawLine.onmouseup=function(){
    if(fDrawLine){
    fDrawLine=false;
    document.all("ctl_drawLine").style.display="none";
    drawLine(fx,fy-divCanvas.offsetTop,event.x-fx,event.y-fy);
    }

    }
    }//end ini()
    //绘制线条
    function drawLine(x1,y1,x2,y2)
    {
    //绘图indexindex++;
    var id="ctl_line"+index;
    var strHtml='';
    strHtml += '<v:line id="'+id+'" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:' + x1 + ';top:' + y1 + '" strokecolor="black" to="' + x2 + ',' + y2 + '" >';
      strHtml += '<v:stroke EndArrow="Classic"/>';
      strHtml += '</v:line>';
      //prompt("",strHtml);
      divCanvas.insertAdjacentHTML('beforeEnd',strHtml);
    }
    function draw()
    {
    divCanvas.insertAdjacentHTML('beforeEnd','<v:line id="ctl_line2" ctlNode="node" ctlType="line" style="position:absolute;z-index:-99;left:436;top:211" strokecolor="black" to="98,20" ><v:stroke EndArrow="Classic"/></v:line>');
    }
    </script>
    </body>
    </html>
      

  2.   

    因为你点右下的时候鼠标超过来你这个画板的长度也就是说你再画板外面onmouseup所以画板本身不能触发这个事件
      

  3.   

    谢谢lfecnu()，修改后的代码经验证可用.
      

  4.   

    wuxinlangman(无心之尘 8.14号开始学习js技术不过关不要见怪) ：你说的有些道理，我也是怀疑是这个原因，
    但通过onmousemove事件中的
    window.status="线条位置("+(event.x-fx)+","+(event.y-fy)+")";
    显示出来的位置判断应该没有超出，即应该可以触发相应事件