JavaScript画线的库http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

解决方案 »

  1.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
      <title>动态创建VML</title>
    </head>
    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <script language="JavaScript">
    var clickX1 = -1;
    var clickY1 = -1;
    var clickX2 = -1;
    var clickY2 = -1;
    var theLastLine=null;
    document.onclick=function (){
    if(clickX1<0){
    clickX1=event.x;
    clickY1=event.y;
    }
    else{
    createLine(clickX1,clickY1,event.x,event.y);
    theLastLine=null;
    clickX1=event.x;
    clickY1=event.y;
    }
    }
    document.ondblclick=function(){
    document.body.click();
    clickX1=-1;
    clickY1=-1;
    theLastLine=null;
    return;
    }
    function createLine(x1,y1,x2,y2)
    {
    var strElement='<v:line from="'+x1+','+y1+'" to="'+x2+','+y2+'"></v:line>';
    //alert(strElement);
    var newline = document.createElement(strElement);
    group1.insertBefore(newline);
    theLastLine=newline;
    }
    document.onmousemove = function ()
    {
    if(clickX1 != -1){
    if(theLastLine==null)
    createLine(clickX1,clickY1,event.x,event.y);
    else
    theLastLine.to=event.x+","+event.y;
    }
    }
    function load(){
    var strElement='<v:line id="autoLine" from="100,100" to="100,100"></v:line>';
    //alert(strElement);
    var newline = document.createElement(strElement);
    group1.insertBefore(newline);
    autoShowX();
    }
    function autoShowX(){
    var line=document.getElementById("autoLine");
    if(line.to.x<=200){
    line.to.x++;
    setTimeout("autoShowX()",10);
    }
    else if(line.to.y<=200){
    line.to.y++;
    setTimeout("autoShowX()",10);
    }
    }
    </script>
    <body onLoad="load()" style="cursor:crosshair" oncontextmenu="event.returnValue=false;">
    <v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200"></v:group>
    </body>
    </html>
      

  2.   

    to  net_lover(孟子E章):
        我就是用上边的你给的划线方法做的,画各种图形都没有问题,但是我要画一个动态的直线轨迹,相当于一个直线的动画,就有问题,后来我又把那些方法单独提取出来,用最基本的方法的作了一下,还是不行(动态时不行),帮我分析一下,代码如下:
    <html>
    <SCRIPT LANGUAGE=javascript>
    var i=1;
      function aa()
    {
    mkDiv(i,i);
    i++;
    }

    function mkDiv(x, y)
    {
    var str= '<div style="position:absolute;'+
    'left:' + x + 'px;'+
    'top:' + y + 'px;'+
    'width:1px;'+
    'height:1px;'+
    'clip:rect(0,1px,1px,0);'+
    'background-color:#000000' +
    ';"><\/div>';
    document.write(str);
    } var cc = setInterval("aa()",1000);
    </SCRIPT>
    <body>
    </body>
    </html>为何不行呢???
      

  3.   

    to  zhaoxiaoyang(梅雪香@hisoft):
    为何有旋转的效果呢,不能直接画任意角度的动态线么?我不想要旋转
      

  4.   

    <?xml version="1.0" encoding="gb2312" standalone="yes" ?>
    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:v="urn:schemas-microsoft-com:vml"
    xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" type="text/css" href="/style/default.css" />
    <style type="text/css">
    <!--
    v\:* {behavior:url(#default#vml);}
    -->
    </style>
    <script language="VBScript">
    Function VBTypeName (var)
    VBTypeName=TypeName(var)
    End Function
    </script>
    <script language="JavaScript">
    <!--
    //路径数组,测试用
    var points_temp=new Array();
    //点坐标类
    function IPoint(){
    this.x=0;this.y=0;
    }
    var i_x=0;i_y=0;
    for(var iCnt=0;iCnt<100;iCnt++){
    var d_x=parseInt(Math.random()*20)+5;
    var d_y=parseInt(Math.random()*20)+5;
    if(parseInt(Math.random()*10) & 0x01)
    d_x=d_x*-1;
    if(parseInt(Math.random()*10) & 0x01)
    d_y=d_y*-1;
    i_x+=d_x;
    i_y+=d_y;
    var p=new IPoint();
    p.x=i_x;
    p.y=i_y;
    points_temp[points_temp.length]=p;
    }
    //动态画线函数
    flag=0;
    var interval=null;
    function drawline(){
    var s='<v:line from="'+points_temp[flag].x.toString()+','+points_temp[flag].y.toString()+'" to="'+points_temp[flag+1].x.toString()+','+points_temp[flag+1].y.toString()+'" style="position:absolute;left:100px;top:100px;" strokecolor="red" strokeweight="2">';
    var p=document.createElement(s);
    document.body.appendChild(p);
    flag++;
    if(flag>98){
    window.clearInterval(interval);
    }
    }
    -->
    </script>
    <title></title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    drawline();
    interval=window.setInterval('drawline',100);
    //debugger;
    -->
    </script>
    </body>
    </html>
      

  5.   

    用vml确实可以实现动态划线的效果,可是我想要的是在现有的画面上任意位置划线,而不影响现有画面的布局,这就有问题了? 谁能帮我解决一下,还有看看我的程序为什么不行呢?
      

  6.   

    <div id=abc style="position: absolute; width: 100px; height: 2px; z-index: 1; left: 15px; top: 174px ; background-color:#ff0000"></div>
    <script language="JavaScript">
    var i=1;
      function aa()
    {
    mkDiv(i,100);
    i++;
    }
    function mkDiv(x, y)
    {
             abc.style.width=i//abc.style.left=x  X坐标
    //abc.style.top=y  Y坐标
    //abc.style.height=height  高
    //abc.style.width=width  宽
    }
    setInterval("aa()",100);
    </SCRIPT>具体的你再完善吧。