出差总结1：利用js制作小人在自己画的多条折线上动态移动

来源：互联网发布：wps怎么建立数据透视表编辑：程序博客网时间：2024/06/07 23:48

在这次出差中感觉学习到很多东西，故觉得自己应该用文字的形式记录一下，同时感谢公司牛人不知疲倦的指导我这个菜鸟：

由于图形系统中需要用到一个小功能：能在图形上画几根折线，然后能有个小人在上面移动，个人认为可以在地图中使用，有一定的实用性。同时这个只是最初的版本，有很多问题待解决，很多功能不具备，占用系统资源过多，希望以后能改进。

需要用到的知识：js，jquery，html，css，vml。下面说一下自己的思路。

1.动态画曲线：首先可以先考虑如何画直线，再组合成折线；或者可以直接用vml中的折线直接画。

具体思路：当鼠标按下时，开始画线（动态创建线的对象）；鼠标移动时，画出具体折线；当鼠标松开时，确定一条直线；当右键松开时，线成收工。

变量定义：

   var xx=0,yy=0 //定义X及Y坐标
   var poly1=new Array();
   var offsetFlag=new Array();//标志线走完
   var moveobj = new Array(); //
   var tempxx =new Array();var tempyy=new Array();
   var _points=new Array();
   var x1=new Array(); var x2=new Array(); var y1=new Array(); var y2=new Array();
    var lineLength =new Array() ;
   var pointsx=new Array();
   var pointsy=new Array();
   var allPoints =new Array();
   var xl =0;
   var tlength =new Array();
   tlength[0] = 10;
   var i =new Array();//点
i[0] =0;

//鼠标上的按钮被按下了
function div1.onmousedown()
{
    div1.setCapture(); //画笔绘画开始，锁定鼠标
    var yScrolltop;
    var xScrollleft;
   if (document.body)
   {// all other Explorers
        yScrolltop = document.body.scrollTop;
        xScrollleft = document.body.scrollLeft;
    }

    xx=event.x+xScrollleft;
    yy=event.y+yScrolltop;
    if(event.button==1)
    {
       if(poly1[xl]==null)
        {
         _points[xl]= xx+ ',' +yy ;

             pointsx[xl]=new Array();
    pointsy[xl]=new Array();
             poly1[xl]=document.createElement('<v:PolyLine filled="false" Points="'+_points[xl]+'" style="position:absolute"/>');
             div1.appendChild(poly1[xl]);
            //moveobj[xl] =document.createElement('<img src="1.gif" style="position:absolute;z-index:10;width:60;height:60;" id="img'+xl+'" border=0>')

          moveobj[xl]= document.createElement('<img src="1.gif" style="position:absolute;z-index:10;width:60;height:60;left:111" id="img'+xl+'" border=0>');
          div2.appendChild(moveobj[xl]);
           // alert(moveobj[xl].id);
         }

        else
        {
          _points[xl]+= ',' + xx + ',' + yy;
        }

    }
}

//鼠标移动时触发的事件
function div1.onmousemove()
{
    var yScrolltop;
    var xScrollleft;
     window.status=event.x+" - " +event.y
if (document.body)
   {// all other Explorers
        yScrolltop = document.body.scrollTop;
        xScrollleft = document.body.scrollLeft;
    }
    tempx=event.x+xScrollleft;
    tempy=event.y+yScrolltop;

     if(poly1[xl]!=null)
    {
       poly1[xl].Points.value=_points[xl]+ ","+ (tempx) +","+(tempy);
     }
}

//鼠标按下后，松开时激发的事件
function div1.onmouseup()
{
    document.releaseCapture();
     if (document.body)
   {// all other Explorers
        yScrolltop = document.body.scrollTop;
        xScrollleft = document.body.scrollLeft;
    }
    //alert(yScrolltop);
    tempx=event.x+xScrollleft;
    tempy=event.y+yScrolltop;
    if(tempx>document.body.offsetWidth+xScrollleft){return alert("X坐标越界")}
    if(tempy>document.body.offsetHeight+yScrolltop){return alert("Y坐标越界")}
    if(event.button==2&&poly1[xl]!=null)
    {
     poly1[xl].Points.value=_points[xl]
    poly1[xl]=null;
     getxy();

    alert(allPoints[xl]);
         xl += 1;

    i[xl]=0;
    tlength[xl] = 10;
// setInterval("playPoly("+xl+")",1000) ;

    }

}

function getxy()
{
     allPoints[xl] = new Array();
    allPoints[xl] =_points[xl].split(",");
//    if(allPoints.length<=2)
//    {
//       return;
//    }
    getpoints();

}

2.当画完线以后，就可以让小人在上面移动。实际上是让一个图形动态的改变它的坐标，看上去像走的一样。这里用到的直线函数（想想学计算机这么多年终于用到数学知识了，而且还是初中数学，真是惭愧！），必须考虑x，y四个方向和垂直情况；这里有两种算法：当改变坐标时，以x，y为增量或以斜线为增量，个人认为以斜线较为准确；当移动时可以以下个坐标为原始点。

3.多条折线，多个小人移动对象算法类似！