基于web的拓扑图实现的小demo

青旅半醒 2022-09-19 08:05 349阅读 0赞

研究了几天javascipt，真是个又老又奇怪又有用的语言。很想实现一个web上可用的拓扑，以前做过一点网管软件外围的web报表系统，有客户很想用浏览器来看topo图，并且希望在浏览器中就可以看到被管对象图示的告警闪烁，当时能做的就是摇头。个人认为桌面应用很多都能移植到web上，也能有很好的交互，虽然难度很大。受各式各样webGIS的启发，试着把topo搬到浏览器中，目前看来是完全可能的。最主要的还是实现拖拽和边界判定，至于数据可以使用ajax技术从服务端获取，服务端用什么都行j2ee,.net,php，怎么着都行。拖拽还是借鉴了netvibes的思路，链路使用VML是google map的思路(FF下用svg)，目前只支持IE，FF的以后再说。

这里是一个简单客户端的demo截图，还有点样子吧。还存在大量的bug，功能也很有限，服务器端压根还没有写。

![524480624_b968652477_o.jpg][]

![524480626_9137446f4d_o.jpg][]

**CODE:**

<defaultTest.htm>

![None.gif][] <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >   
![None.gif][] < html  xmlns:v ="urn:schemas-microsoft-com:vml" >   
![None.gif][] < head >   
![ExpandedBlockStart.gif][]   < STYLE >   
![ExpandedSubBlockStart.gif][]    v:\* \{  BEHAVIOR: url(\#default\#VML) \}   
![ExpandedBlockEnd.gif][]   </ STYLE >   
![None.gif][]  
![None.gif][]   < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />   
![None.gif][]   < title > Topo ^-^ </ title >   
![None.gif][]     < link  rel ="shortcut icon"  href ="favicon.ico"   >   
![None.gif][]     < link  rel ="stylesheet"  type ="text/css"  href ="style/styles.css?v=10"  media ="screen"   />   
![ExpandedBlockStart.gif][]         < script >   
![InBlock.gif][]            var App = new Object();  
![ExpandedBlockEnd.gif][]         </ script >   
![None.gif][]     < script  src ="js/util.js"  type ="text/javascript" ></ script >   
![None.gif][]     < script  src ="js/dragTest.js"  type ="text/javascript" ></ script >   
![None.gif][]     < script  src ="js/Drag.js"  type ="text/javascript" ></ script >   
![None.gif][]          
![None.gif][] </ head >   
![None.gif][]  
![None.gif][] < body >   
![None.gif][]  
![None.gif][] < div  id ="application" >   
![None.gif][]     < div  id ="modulesArea1"  style ="border:1px solid \#000000; background: \#cfcfcf; width: 400px; height:400px; position: absolute; left: 10px; top: 10px;" >   
![None.gif][]         < div  id ="modulesArea"  style ="border:1px solid \#000000; background: \#cfcfcf; width: 300px; height:300px; position: absolute; left: 50px; top: 50px;" ></ div >   
![None.gif][]     </ div >   
![None.gif][] </ div >   
![None.gif][]  
![ExpandedBlockStart.gif][] < script >   
![InBlock.gif][]      
![InBlock.gif][]    var temp\_container = document.getElementById("modulesArea");  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    var container = \{  
![InBlock.gif][]              
![InBlock.gif][]        //容器对象  
![InBlock.gif][]        "container":temp\_container,  
![InBlock.gif][]        //容器的绝对X,Y坐标(即以容器边框外边缘距为基准)  
![InBlock.gif][]        "AbsX":findPosX(temp\_container),  
![InBlock.gif][]        "AbsY":findPosY(temp\_container),  
![InBlock.gif][]        //容器的X,Y坐标(即以容器边框内边缘距为基准)  
![InBlock.gif][]        "X":findPosX(temp\_container) \+ parseInt(temp\_container.style.borderLeftWidth),  
![InBlock.gif][]        "Y":findPosY(temp\_container) \+ parseInt(temp\_container.style.borderTopWidth),  
![InBlock.gif][]        //容器的绝对宽、高(即包含容器边框)  
![InBlock.gif][]        "AbsWidth":temp\_container.offsetWidth,  
![InBlock.gif][]        "AbsHeight":temp\_container.offsetHeight,  
![InBlock.gif][]        //容器的宽、高(即不包含容器边框)  
![InBlock.gif][]        "Width":parseInt(temp\_container.style.width),  
![InBlock.gif][]        "Height":parseInt(temp\_container.style.height),  
![InBlock.gif][]        //容器的左右上下四个边框的宽度  
![InBlock.gif][]        "borderLeftWidth":parseInt(temp\_container.style.borderLeftWidth),  
![InBlock.gif][]        "borderRightWidth":parseInt(temp\_container.style.borderRightWidth),  
![InBlock.gif][]        "borderTopWidth":parseInt(temp\_container.style.borderTopWidth),  
![InBlock.gif][]        "borderBottomWidth":parseInt(temp\_container.style.borderBottomWidth),  
![InBlock.gif][]        //计算鼠标的坐标(以容器的边框内边缘左上角为原点)  
![ExpandedSubBlockStart.gif][]        "getMouseX":function(evClientX)\{  
![InBlock.gif][]            return evClientX\-container.X;  
![ExpandedSubBlockEnd.gif][]        \},  
![ExpandedSubBlockStart.gif][]        "getMouseY":function(evClientY)\{  
![InBlock.gif][]            return evClientY\-container.Y;  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedSubBlockEnd.gif][]    \};  
![InBlock.gif][]      
![ExpandedBlockEnd.gif][]      
![None.gif][] </ script >   
![None.gif][] </ body >   
![None.gif][] </ html >

![ExpandedBlockStart.gif][] var  Drag = \{  
![InBlock.gif][]  "obj":null,  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    "init":function(item)\{  
![InBlock.gif][]          
![InBlock.gif][]//        item: Div元素  
![InBlock.gif][]            item.onmousedown=Drag.start;  
![InBlock.gif][]              
![InBlock.gif][]            item.middleX=item.getX() \+ parseInt(item.offsetWidth)/2;  
![InBlock.gif][]            item.middleY=item.getY() \+ parseInt(item.offsetHeight)/2;  
![ExpandedSubBlockEnd.gif][]        \},  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    "start":function(ev)\{      
![InBlock.gif][]          
![InBlock.gif][]//        ev:事件  
![InBlock.gif][]            var item=Drag.obj=this;  
![InBlock.gif][]            ev=Drag.fixE(ev);  
![InBlock.gif][]              
![InBlock.gif][]            //记录鼠标单击时位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象相对与刚开始拖拽时所移动的相对距离。  
![InBlock.gif][]            item.setStartMouseX(ev.clientX);  
![InBlock.gif][]            item.setStartMouseY(ev.clientY);  
![InBlock.gif][]              
![InBlock.gif][]            //记录被拖拽对象刚开始拖拽时的位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象在拖拽过程中的位置。  
![InBlock.gif][]            item.setLastX();  
![InBlock.gif][]            item.setLastY();  
![InBlock.gif][]  
![InBlock.gif][]            item.setMiddleX();  
![InBlock.gif][]            item.setMiddleY();  
![InBlock.gif][]              
![InBlock.gif][]            item.onDragStart(item.getX(),item.getY(),item.getStartMouseX(),item.getStartMouseY());  
![InBlock.gif][]              
![InBlock.gif][]            document.onmousemove=Drag.drag;  
![InBlock.gif][]            document.onmouseup=Drag.end;  
![InBlock.gif][]            return false;  
![ExpandedSubBlockEnd.gif][]        \},      
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    "drag":function(ev)\{  
![InBlock.gif][]          
![InBlock.gif][]//        ev:事件  
![InBlock.gif][]            ev=Drag.fixE(ev);  
![InBlock.gif][]            var item=Drag.obj;  
![InBlock.gif][]              
![InBlock.gif][]            var currMouseX=container.getMouseX(ev.clientX);  
![InBlock.gif][]            var currMouseY=container.getMouseY(ev.clientY);  
![InBlock.gif][]  
![InBlock.gif][]            item.setX(currMouseX\-item.getStartMouseX()\+item.getLastX());  
![InBlock.gif][]            item.setY(currMouseY\-item.getStartMouseY()\+item.getLastY());  
![InBlock.gif][]  
![InBlock.gif][]            item.setMiddleX();  
![InBlock.gif][]            item.setMiddleY();  
![InBlock.gif][]  
![InBlock.gif][]            item.onDrag(item.getX(),item.getY(),currMouseX,currMouseY);  
![InBlock.gif][]  
![InBlock.gif][]            return false;  
![ExpandedSubBlockEnd.gif][]        \},  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    "end":function()\{  
![InBlock.gif][]            document.onmousemove=null;  
![InBlock.gif][]            document.onmouseup=null;  
![InBlock.gif][]            Drag.obj.onDragEnd(Drag.obj.getX(),Drag.obj.getY());  
![InBlock.gif][]            Drag.obj=null;  
![ExpandedSubBlockEnd.gif][]        \},  
![InBlock.gif][]          
![ExpandedSubBlockStart.gif][]    "fixE":function(ev)\{  
![InBlock.gif][]          
![InBlock.gif][]//        ev:事件  
![InBlock.gif][]            if(typeof ev=="undefined")ev=window.event;  
![InBlock.gif][]            if(typeof ev.layerX=="undefined")ev.layerX=ev.offsetX;  
![InBlock.gif][]            if(typeof ev.layerY=="undefined")ev.layerY=ev.offsetY;  
![InBlock.gif][]            return ev;  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]          
![ExpandedBlockEnd.gif][]\} ;

![None.gif][] //  
![None.gif][] var  \_ZINDEX  =   1000 ;  
![None.gif][] var  \_ZINDEX\_MAX  =   2147483647 ;  
![None.gif][] var  \_zindex  =  \_ZINDEX;  
![None.gif][]  
![ExpandedBlockStart.gif][] function  coordsX (x, dargObj) \{  
![InBlock.gif][]      
![InBlock.gif][]    var maxX = container.Width\-dargObj.offsetWidth;  
![InBlock.gif][]    x = x<=0?0:x>=maxX?maxX:x;  
![InBlock.gif][]    return x;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][] function  coordsY (y, dargObj) \{  
![InBlock.gif][]      
![InBlock.gif][]    var maxY = container.Height\-dargObj.offsetHeight;  
![InBlock.gif][]    y = y<=0?0:y>=maxY?maxY:y;  
![InBlock.gif][]    return y;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]App.Start  =   function ()  \{  
![InBlock.gif][]      
![InBlock.gif][]    var dragDivs = new Array();  
![InBlock.gif][]    var lines = new Array();  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    for(var i = 0; i<10; i\++)\{  
![InBlock.gif][]          
![InBlock.gif][]        dragDivs\[i\] = buildDragDiv(i,i\*(35\-i),i\*(5\+i),30,30,1,"\#3A3A3A","\#E0CB0E");  
![InBlock.gif][]        container.container.appendChild(dragDivs\[i\]);  
![InBlock.gif][]        Drag.init(dragDivs\[i\]);  
![InBlock.gif][]        lines\[i\] = buildLine(2,0,0,200,200,2,"green");  
![InBlock.gif][]        dragDivs\[i\].bindLine(lines\[i\],"from");  
![InBlock.gif][]        container.container.appendChild(lines\[i\]);  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]  
![InBlock.gif][]    document.getElementById("application").style.display = "block";  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][] //  构造被拖拽DIV对象   
![None.gif][]//  
![None.gif][]//  id: DIV对象的唯一标识   
![None.gif][]//   x: DIV对象的x坐标(以容器左上角为原点)   
![None.gif][]//   y: DIV对象的y坐标(以容器左上角为原点)   
![None.gif][]//   w: DIV对象宽度(不含边框)   
![None.gif][]//   h: DIV对象高度(不含边框)   
![None.gif][]//  bw: DIV对象边框的宽度   
![None.gif][]//  bc: DIV对象边框的颜色   
![None.gif][]//  bg: DIV对象的颜色(不含边框)   
![ExpandedBlockStart.gif][] buildDragDiv  =   function (id,x,y,w,h,bw,bc,bg) \{  
![InBlock.gif][]  
![InBlock.gif][]    var item = document.createElement("div");  
![InBlock.gif][]      
![InBlock.gif][]    item.lineObjs = new Array();  
![InBlock.gif][]      
![InBlock.gif][]    item.id=id;  
![InBlock.gif][]    item.style.left=(isNaN(parseInt(x)) ? 0:x) \+ "px";  
![InBlock.gif][]    item.style.top=(isNaN(parseInt(y)) ? 0:y) \+ "px";  
![InBlock.gif][]      
![InBlock.gif][]    item.style.width=(isNaN(parseInt(w)) ? 0:w) \+ "px";  
![InBlock.gif][]    item.style.height=(isNaN(parseInt(h)) ? 0:h) \+ "px";  
![InBlock.gif][]      
![InBlock.gif][]    item.style.border=(isNaN(parseInt(bw)) ? 1:bw) \+ "px solid " \+ ((typeof(bg)=='undefined' || bg.length==0) ? "\#3a3a3a":bc);  
![InBlock.gif][]    item.style.background=(typeof(bg)=='undefined' || bg.length==0) ? "\#969696":bg;  
![InBlock.gif][]    item.style.cursor="move";  
![InBlock.gif][]    item.style.zIndex=\_ZINDEX;  
![InBlock.gif][]    item.style.position = "absolute";  
![InBlock.gif][]      
![InBlock.gif][]    item.borderWidth=isNaN(parseInt(bw)) ? 1:bw;  
![InBlock.gif][]      
![InBlock.gif][]    item.middleX=parseInt(item.style.left) \+ parseInt(item.style.width)/2 \+ item.borderWidth;  
![InBlock.gif][]    item.middleY=parseInt(item.style.top) \+ parseInt(item.style.Height)/2 \+ item.borderWidth;  
![InBlock.gif][]      
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.setMiddleX=function()\{  
![InBlock.gif][]                                        item.middleX=item.getX() \+ item.offsetWidth/2;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.getMiddleX=function()\{  
![InBlock.gif][]                                          
![InBlock.gif][]                                        return item.middleX;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.setMiddleY=function()\{  
![InBlock.gif][]                                        item.middleY=item.getY() \+ item.offsetHeight/2;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.getMiddleY=function()\{  
![InBlock.gif][]                                        return item.middleY;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.setX=function(x)\{  
![InBlock.gif][]                            item.style.left=x \+ "px";  
![ExpandedSubBlockEnd.gif][]                        \};  
![ExpandedSubBlockStart.gif][]    item.getX=function()\{  
![InBlock.gif][]                            return parseInt(item.style.left);  
![ExpandedSubBlockEnd.gif][]                        \};  
![InBlock.gif][]                          
![ExpandedSubBlockStart.gif][]    item.setY=function(y)\{  
![InBlock.gif][]                            item.style.top=y \+ "px";  
![ExpandedSubBlockEnd.gif][]                        \};  
![ExpandedSubBlockStart.gif][]    item.getY=function()\{  
![InBlock.gif][]                            return parseInt(item.style.top);  
![ExpandedSubBlockEnd.gif][]                        \};  
![InBlock.gif][]                          
![InBlock.gif][]    item.startMouseX=0;  
![InBlock.gif][]    item.startMouseY=0;  
![InBlock.gif][]      
![InBlock.gif][]  
![ExpandedSubBlockStart.gif][]    item.setStartMouseX=function(evClientX)\{  
![InBlock.gif][]                                        item.startMouseX=evClientX\-container.X;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.getStartMouseX=function()\{  
![InBlock.gif][]                                        return item.startMouseX;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.setStartMouseY=function(evClientY)\{  
![InBlock.gif][]                                        item.startMouseY=evClientY\-container.Y;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![ExpandedSubBlockStart.gif][]    item.getStartMouseY=function()\{  
![InBlock.gif][]                                        return item.startMouseY;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![InBlock.gif][]      
![InBlock.gif][]    item.lastX=0;  
![InBlock.gif][]    item.lastY=0;  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.setLastX=function()\{  
![InBlock.gif][]                                    item.lastX=item.getX();  
![ExpandedSubBlockEnd.gif][]                                \}  
![ExpandedSubBlockStart.gif][]    item.getLastX=function()\{  
![InBlock.gif][]                                    return item.lastX;  
![ExpandedSubBlockEnd.gif][]                                \}  
![ExpandedSubBlockStart.gif][]    item.setLastY=function()\{  
![InBlock.gif][]                                    item.lastY=item.getY();  
![ExpandedSubBlockEnd.gif][]                                \}  
![ExpandedSubBlockStart.gif][]    item.getLastY=function()\{  
![InBlock.gif][]                                    return item.lastY;  
![ExpandedSubBlockEnd.gif][]                                \}  
![InBlock.gif][]                                  
![ExpandedSubBlockStart.gif][]    item.setZIndex=function(z\_Index)\{  
![InBlock.gif][]          
![InBlock.gif][]                                        item.style.zIndex=z\_Index;  
![ExpandedSubBlockEnd.gif][]                                    \}  
![InBlock.gif][]                      
![ExpandedSubBlockStart.gif][]    item.onDragStart=function(x,y,mousex, mousey) \{  
![InBlock.gif][]          
![ExpandedSubBlockStart.gif][]        if(item.style.zIndex != \_zindex || item.style.zIndex == \_ZINDEX)\{  
![InBlock.gif][]              
![InBlock.gif][]            \_zindex \+= 2;  
![InBlock.gif][]            item.setZIndex(\_zindex);  
![InBlock.gif][]              
![ExpandedSubBlockStart.gif][]            for(var lineObj in this.lineObjs)\{  
![InBlock.gif][]                  
![InBlock.gif][]                this.lineObjs\[lineObj\].line.style.zIndex=item.style.zIndex\-1;  
![ExpandedSubBlockEnd.gif][]            \}  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.onDrag = function(x,y, mousex, mousey) \{  
![InBlock.gif][]          
![InBlock.gif][]        this.setX(coordsX(x,this));  
![InBlock.gif][]        this.setY(coordsY(y,this));  
![InBlock.gif][]          
![InBlock.gif][]        item.setMiddleX();  
![InBlock.gif][]        item.setMiddleY();  
![InBlock.gif][]          
![ExpandedSubBlockStart.gif][]        for(var lineObj in this.lineObjs)\{  
![InBlock.gif][]              
![ExpandedSubBlockStart.gif][]            if(this.lineObjs\[lineObj\].point == "from")\{  
![InBlock.gif][]                  
![InBlock.gif][]                this.lineObjs\[lineObj\].line.from = this.getMiddleX() \+ "," \+ this.getMiddleY();                  
![ExpandedSubBlockStart.gif][]            \}else if(this.lineObjs\[lineObj\].point == "to")\{  
![InBlock.gif][]                  
![InBlock.gif][]                this.lineObjs\[lineObj\].line.to = this.getMiddleX() \+ "," \+ this.getMiddleY();  
![ExpandedSubBlockEnd.gif][]            \}  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.onDragEnd = function(x,y) \{  
![InBlock.gif][]          
![InBlock.gif][]        this.isDragging = false;          
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![ExpandedSubBlockStart.gif][]    item.bindLine=function(line,point)\{  
![InBlock.gif][]          
![InBlock.gif][]        var lineObj = new LineObj(line,point);  
![InBlock.gif][]          
![ExpandedSubBlockStart.gif][]        if(point=="from")\{  
![InBlock.gif][]              
![InBlock.gif][]            lineObj.line.from=item.getMiddleX() \+ "," \+ item.getMiddleY();  
![ExpandedSubBlockStart.gif][]        \}else if(point=="to") \{  
![InBlock.gif][]              
![InBlock.gif][]            lineObj.line.to=item.getMiddleX() \+ "," \+ item.getMiddleY();  
![ExpandedSubBlockEnd.gif][]        \}  
![InBlock.gif][]          
![InBlock.gif][]        item.lineObjs.push(lineObj);  
![InBlock.gif][]        line.style.zIndex=item.style.zIndex\-1;  
![ExpandedSubBlockEnd.gif][]    \}  
![InBlock.gif][]      
![InBlock.gif][]    return item;  
![InBlock.gif][]  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]LineObj  =   function (line,point) \{  
![InBlock.gif][]              
![InBlock.gif][]    this.line = line;  
![InBlock.gif][]    this.point =point;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]buildLine  =   function (id,fromX,fromY,toX,toY,weight,color) \{  
![InBlock.gif][]      
![InBlock.gif][]    var line=document.createElement("v:line");  
![InBlock.gif][]      
![InBlock.gif][]    line.id=id;  
![InBlock.gif][]    line.style.position="absolute";  
![InBlock.gif][]    line.style.top="0px";  
![InBlock.gif][]    line.style.left="0px";  
![InBlock.gif][]    line.unselectable="on";  
![InBlock.gif][]  line.strokecolor=(typeof(color)=='undefined' || color.length==0) ? "\#000000":color;  
![InBlock.gif][]  line.from = (isNaN(parseInt(fromX)) ? 0:fromX) \+ "," \+ (isNaN(parseInt(fromY)) ? 0:fromY);  
![InBlock.gif][]  line.to = (isNaN(parseInt(toX)) ? 0:toX) \+ "," \+ (isNaN(parseInt(toY)) ? 0:toY);  
![InBlock.gif][]  line.strokeweight=(isNaN(parseInt(weight)) ? 0:weight) \+ "pt";  
![InBlock.gif][]  line.fill=false;  
![InBlock.gif][]  line.filled=false;  
![InBlock.gif][]    
![ExpandedSubBlockStart.gif][]  line.getFrom=function()\{  
![InBlock.gif][]                                  return line.from;  
![ExpandedSubBlockEnd.gif][]                              \}  
![ExpandedSubBlockStart.gif][]    line.setFrom=function(x,y)\{  
![InBlock.gif][]                                    line.from=x \+ "," \+ y;  
![ExpandedSubBlockEnd.gif][]                                \}  
![ExpandedSubBlockStart.gif][]  line.getTo=function()\{  
![InBlock.gif][]                                  return line.to;  
![ExpandedSubBlockEnd.gif][]                              \}  
![ExpandedSubBlockStart.gif][]    line.setTo=function(x,y)\{  
![InBlock.gif][]                                    line.to=x \+ "," \+ y;  
![ExpandedSubBlockEnd.gif][]                                \}  
![InBlock.gif][]                                
![InBlock.gif][]  return line;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![ExpandedBlockStart.gif][]window.onload  =   function ()  \{      
![InBlock.gif][]      
![InBlock.gif][]    App.Start();      
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][]

![None.gif][]   
![None.gif][] // 寻找对象的绝对X坐标   
![ExpandedBlockStart.gif][] function  findPosX(obj)  \{  
![InBlock.gif][]    var curleft = 0;  
![ExpandedSubBlockStart.gif][]    if (obj.offsetParent) \{  
![ExpandedSubBlockStart.gif][]        while (obj.offsetParent) \{  
![InBlock.gif][]            curleft \+= obj.offsetLeft;  
![InBlock.gif][]            obj = obj.offsetParent;  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedSubBlockEnd.gif][]    \} else if (obj.x) curleft \+= obj.x;  
![InBlock.gif][]    return curleft;  
![ExpandedBlockEnd.gif][]\}   
![None.gif][]  
![None.gif][] // 寻找对象的绝对Y坐标   
![ExpandedBlockStart.gif][] function  findPosY(obj)  \{  
![InBlock.gif][]    var curtop = 0;  
![ExpandedSubBlockStart.gif][]    if (obj.offsetParent) \{  
![ExpandedSubBlockStart.gif][]        while (obj.offsetParent) \{  
![InBlock.gif][]            curtop \+= obj.offsetTop;  
![InBlock.gif][]            obj = obj.offsetParent;  
![ExpandedSubBlockEnd.gif][]        \}  
![ExpandedSubBlockEnd.gif][]    \} else if (obj.y) curtop \+= obj.y;  
![InBlock.gif][]    return curtop;  
![ExpandedBlockEnd.gif][]\}

[524480624_b968652477_o.jpg]: http://farm1.static.flickr.com/207/524480624_b968652477_o.jpg
[524480626_9137446f4d_o.jpg]: http://farm1.static.flickr.com/254/524480626_9137446f4d_o.jpg
[None.gif]: /images/20220828/da6d95db01db4fdb93af33947159b61f.png
[ExpandedBlockStart.gif]: /images/20220828/fd5780a36fde46fc80a91377a106efcb.png
[ExpandedSubBlockStart.gif]: /images/20220828/5d3f6604acb74778ad187d185035e14d.png
[ExpandedBlockEnd.gif]: /images/20220828/c3c9a6c3f30c4659a55329f8e44c9160.png
[InBlock.gif]: /images/20220828/3d099ba4cbe44bc9ac58fbf89ad68685.png
[ExpandedSubBlockEnd.gif]: /images/20220828/ad73654f16fa4e14a361249801e81aee.png