基于html5二个div 连线



        因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法

extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于html5的画图引擎，而是选择了svg 。

      下边是花了不到一天的时间实现的任意点连线和拖动功能，代码没有优化，稍微乱了点

      如果单纯应用canvas进行画图，拖拽是非常麻烦的，我们往往要基于第三方的画图类库，这里实现是基于kineticjs

      为了测试方便我使用了双击事件控制拖动还是划线  。

      代码

Js代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   <head>  
  4.     <style>  
  5.       body {  
  6.         margin: 0px;  
  7.         padding: 0px;  
  8.       }  
  9.       canvas {  
  10.         border: 1px solid #9C9898;  
  11.       }  
  12.     </style>  
  13.         <script type="text/javascript" src="ext/bootstrap.js"></script>           
  14.         <!-- ENDLIBS -->  
  15.         <script type="text/javascript" src="ext/ext-all-debug.js"></script>  
  16.     <script src="js/kinetic-v3.10.2.min.js"></script>  
  17.     <script>  
  18.       
  19.     Ext.onReady(function(){  
  20.         /** 
  21.             自动判断顶点连线算法 
  22.         */        
  23.          
  24.        var stage=new Kinetic.Stage({  
  25.             container:'container',  
  26.             1000,  
  27.             height:1000  
  28.        });  
  29.        var layer=new Kinetic.Layer();  
  30.        var flag=false;  
  31.        var imgArray=[];   
  32.        var lineArray=[];  
  33.        var tmpMoveImg=null;  
  34.        var loop=0;  
  35.        function  Pos(x,y){  
  36.             this.x=x;  
  37.             this.y=y;  
  38.        };   
  39.        function LineImage(img,line){  
  40.             this.img=img;  
  41.             this.line=line;  
  42.        };  
  43.          
  44.        function NewImage(img,opsArray){  
  45.             this.img=img;  
  46.             this.opsArray=opsArray;   
  47.        };  
  48.           
  49.        var imgA= new Image();  
  50.        imgA.onload=function(){  
  51.            var imgObjA= createImage(imgA,100,100,100,100)  
  52.            var array=new Array();   
  53.            var na=new  NewImage(imgObjA,array);   
  54.            imgArray.push(na);  
  55.            layer.add(imgObjA);  
  56.            stage.add(layer);   
  57.        }   
  58.          
  59.        var imgB= new Image();  
  60.        imgB.onload=function(){  
  61.            var imgObjB= createImage(imgB,400,400,100,100)  
  62.            var array=new Array();   
  63.            var nb=new  NewImage(imgObjB,array);  
  64.            imgArray.push(nb);  
  65.            layer.add(imgObjB);  
  66.            stage.add(layer);   
  67.        }   
  68.          
  69.        var imgC= new Image();  
  70.        imgC.onload=function(){   
  71.            var imgObjC= createImage(imgC,700,100,100,100)   
  72.            var array=new Array();   
  73.            var nc=new  NewImage(imgObjC,array);   
  74.            imgArray.push(nc);  
  75.            layer.add(imgObjC);  
  76.            stage.add(layer);   
  77.        }    
  78.        var rect=new Kinetic.Rect({  
  79.             x:0,  
  80.             y:0,  
  81.             1000,  
  82.             height:1000,  
  83.             fill:'white',  
  84.             storke:'red',  
  85.             storkeWidth:5  
  86.               
  87.        });  
  88.        layer.add(rect);    
  89.        imgA.src='img/db.png';   
  90.        imgB.src='img/mj.png';   
  91.        imgC.src="img/kt1.png";  
  92.        rect.on('dblclick',function(){  
  93.               
  94.             if(loop%2==0){  
  95.                 flag=true;  
  96.                 for(var i=0;i<imgArray.length;i++){  
  97.                     imgArray[i].img.setDraggable(false);  
  98.                       
  99.                 }  
  100.             }else{  
  101.                 flag=false;  
  102.                
  103.                 for(var i=0;i<imgArray.length;i++){  
  104.                      
  105.                     imgArray[i].img.setDraggable(true);  
  106.                     imgArray[i].img.on('mouseover',function(){  
  107.                         var p=new Pos(this.getX(),this.getY());  
  108.                         tmpMoveImg=getImgByPos(p);  
  109.                           
  110.                     })  
  111.                       
  112.                     imgArray[i].img.on('dragmove',function(){  
  113.                          
  114.                         for(var j=0;j<tmpMoveImg.opsArray.length;j++){  
  115.                                 var realPoints=[];   
  116.                                 calculateStartEndPos(tmpMoveImg.opsArray[j].img,this,realPoints);   
  117.                                 var line= createLine(realPoints);   
  118.                                 var oldLine=tmpMoveImg.opsArray[j].line;   
  119.                                 var p=new Pos(tmpMoveImg.opsArray[j].img.getX(),tmpMoveImg.opsArray[j].img.getY());   
  120.                                 var oppoImg= getImgByPos(p);  
  121.                                 replaceOppoLine(oppoImg,oldLine,line);   
  122.                                 layer.remove(tmpMoveImg.opsArray[j].line);  
  123.                                 tmpMoveImg.opsArray[j].line=line;   
  124.                                 layer.add(line);  
  125.                                 layer.draw();  
  126.                                 realPoints=[];  
  127.                            
  128.                         }    
  129.                           
  130.                         layer.draw();  
  131.                           
  132.                     })  
  133.                 }  
  134.             }  
  135.             loop++;  
  136.               
  137.             for(var i=0;i<imgArray.length;i++){  
  138.                 var innerFlag=false;  
  139.                 var points=[];//标记性的点，为了获取img 使用  
  140.                 var realPoints=[];//真正计算后合理的划线点  
  141.                 imgArray[i].img.on('mousedown',function(){  
  142.                        
  143.                      if(flag){  
  144.                         var pos= stage.getMousePosition();    
  145.                         points.push(this.getX());  
  146.                         points.push(this.getY());  
  147.                         innerFlag=true;  
  148.                      }  
  149.                 });  
  150.                 imgArray[i].img.on('mouseup',function(){  
  151.                      if(flag&&innerFlag){  
  152.                         var pos= stage.getMousePosition();    
  153.                         points.push(this.getX());  
  154.                         points.push(this.getY());  
  155.                           
  156.                           
  157.                         var p=new Pos(points[0],points[1]);   
  158.                         var op=new Pos(points[2],points[3]);   
  159.                         var opImg=getImgByPos(p);   
  160.                         var owImg=getImgByPos(op);  
  161.                         if(opImg!=owImg){  
  162.                             calculateStartEndPos(opImg.img,owImg.img,realPoints);  
  163.                             var line= createLine(realPoints);  
  164.                               
  165.                             var opLine=new LineImage(opImg.img,line);  
  166.                             var owLine=new LineImage(owImg.img,line);  
  167.                               
  168.                                
  169.                             owImg.opsArray.push(opLine);   
  170.                             opImg.opsArray.push(owLine);  
  171.                               
  172.                               
  173.                             flag=false;  
  174.                             innerFlag=false;  
  175.                             points=[];  
  176.                             realPoints=[];  
  177.                             layer.add(line);  
  178.                             layer.draw();  
  179.                         }   
  180.                           
  181.                           
  182.                      }  
  183.                });  
  184.             }  
  185.        })  
  186.        /** 
  187.        * 通过坐标获取Img对象 
  188.        */  
  189.        function getImgByPos(pos){   
  190.             for(var i=0;i<imgArray.length;i++){   
  191.                 if(imgArray[i].img.getX()==pos.x&&imgArray[i].img.getY()==pos.y){   
  192.                     return imgArray[i];   
  193.                 }  
  194.             }   
  195.        }  
  196.        /** 
  197.        * 替换对方中line 
  198.        */  
  199.        function replaceOppoLine(imgObj,oldLine,newLine){  
  200.             for(var i=0;i<imgObj.opsArray.length;i++){  
  201.                    
  202.                 if(imgObj.opsArray[i].line==oldLine){   
  203.                     imgObj.opsArray[i].line=newLine;  
  204.                 }   
  205.             }  
  206.        }  
  207.        /** 
  208.         划线 
  209.        */  
  210.        function createLine(points){  
  211.                
  212.              var line=new Kinetic.Line({   
  213.                 points:points,  
  214.                 stroke:'bule',  
  215.                 strokeWidth:5,  
  216.                 lineCap:'round',  
  217.                 lineJoin:'round'   
  218.                   
  219.             });     
  220.               
  221.             return line;  
  222.        }  
  223.        /** 
  224.        * 计算划线的开始坐标 
  225.        */  
  226.        function calculateStartEndPos(imgStart,imgEnd,realPoints){  
  227.             var realSx=0;  
  228.             var realSy=0;  
  229.             var realEx=0;  
  230.             var realEy=0;  
  231.          
  232.             var sx=imgStart.getX();  
  233.             var sy=imgStart.getY();  
  234.             var swidth=imgStart.getWidth();  
  235.             var sheight=imgStart.getHeight();   
  236.             var ex=imgEnd.getX();  
  237.             var ey=imgEnd.getY();  
  238.             var ewidth=imgEnd.getWidth();  
  239.             var eheight=imgEnd.getHeight();   
  240.               
  241.             var arrayx=calculateX(sx,swidth,ex,ewidth );  
  242.               
  243.             var arrayy=calculateY(sy,sheight,ey,eheight );  
  244.                
  245.               
  246.             realPoints.push(arrayx[0]);  
  247.             realPoints.push(arrayy[0]);  
  248.             realPoints.push(arrayx[1]);  
  249.             realPoints.push(arrayy[1]);  
  250.               
  251.        }  
  252.        /** 
  253.             计算开始和结束节点x坐标 
  254.        */  
  255.        function calculateX(sx,swidth,ex,ewidth ){  
  256.             var arrayX=[];  
  257.             if(sx>ex){    
  258.                 arrayX.push(sx);  
  259.                 arrayX.push(ex+ewidth);  
  260.                
  261.             }else if(sx==ex){  
  262.                 arrayX.push(sx+(swidth/2));  
  263.                 arrayX.push(sx+(ewidth/2));  
  264.             }else{   
  265.                 arrayX.push(sx+swidth);  
  266.                 arrayX.push(ex);  
  267.             }  
  268.             return  arrayX;  
  269.        }  
  270.        /** 
  271.             计算开始和结束节点y坐标 
  272.        */  
  273.        function calculateY(sy,sheight,ey,eheight ){  
  274.                
  275.                
  276.             var arrayY=[];  
  277.             if(sy>ey){   
  278.                 arrayY.push(sy+(sheight/2));  
  279.                 arrayY.push(ey+(eheight/2));  
  280.             }else if(sy==ey){  
  281.                   
  282.                 arrayY.push(sy+(sheight/2));  
  283.                 arrayY.push(sy+(eheight/2));  
  284.             }else{   
  285.                 arrayY.push(sy+(sheight/2));  
  286.                 arrayY.push(ey+(eheight/2));  
  287.                   
  288.             }   
  289.             return  arrayY;  
  290.        }  
  291.        /** 
  292.             画图 
  293.        */  
  294.        function createImage(img,x,y,width,height){  
  295.             var imgObj=new Kinetic.Image({  
  296.                 x:x,  
  297.                 y:y,  
  298.                 width,  
  299.                 height:height,  
  300.                 draggable:true,  
  301.                 image:img  
  302.            });  
  303.            imgObj.on("mouseover", function(){  
  304.                 document.body.style.cursor = "pointer";  
  305.            });  
  306.            imgObj.on("mouseout", function(){  
  307.                 document.body.style.cursor = "default";  
  308.            });  
  309.            return imgObj  
  310.          
  311.        }   
  312.           
  313.     });   
  314.   
  315.     </script>  
  316.   </head>  
  317.   <body>  
  318.     <div id="container"></div>  
  319.   </body>  
  320. </html>  
  321.   
  322. <img alt="" src="http://dl.iteye.com/upload/attachment/0070/8176/f9bb5503-b35b-3a45-abb1-0241a1495665.png">  
  323.   
  324.    
  325. <img alt="" src="http://dl.iteye.com/upload/attachment/0070/8178/54c788d0-1395-3824-aea1-280b70b6f523.png">  
  326.   
  327.    

 效果如下

 

 代码里还有一项基于extjs4 的实现和纯html5 canvas 的实现



【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zjw2004112/p/11770429.html