zoukankan      html  css  js  c++  java

  • 基于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 的实现
  • 相关阅读:
    bash中一次性给多个变量赋值命名管道的使用
    Mysql复制还原后root帐号权限丢失问题
    TC中HTB的使用备注
    Python 调用JS文件中的函数
    PIL图像处理模块，功能强大、简单易用(转)
    openfeign 实现动态Url
    Extjs 进度条的应用【转】
    Javascript 对象与数组中的函数下【转】
    Linq学习笔记之一：Linq To XML
    Sql Server查询语句的一些小技巧
  • 原文地址：https://www.cnblogs.com/zjw2004112/p/11770429.html
Copyright © 2011-2022 走看看