基于html5二个div 连线

贵不可言 發表於 2019-10-31 12:00:00

<img src="http://dl.iteye.com/upload/attachment/0075/5037/8e381798-1fc6-3f0a-adc7-087e6f9aee3b.jpg">
 
 <img src="http://dl.iteye.com/upload/attachment/0075/5039/dada324d-cd01-31a1-ab96-b77d7e97043c.jpg">
        因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法
extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于html5的画图引擎，而是选择了svg 。
      下边是花了不到一天的时间实现的任意点连线和拖动功能，代码没有优化，稍微乱了点
      如果单纯应用canvas进行画图，拖拽是非常麻烦的，我们往往要基于第三方的画图类库，这里实现是基于kineticjs
      为了测试方便我使用了双击事件控制拖动还是划线  。
      代码
<div id="" class="dp-highlighter">
<div class="bar">
<div class="tools">Js代码  <img src="https://www.iteye.com/images/icon_star.png"></div>

</div>
<ol class="dp-c" start="1">
<li><!DOCTYPE HTML>  </li>
<li><html>  </li>
<li>  <head>  </li>
<li>    <style>  </li>
<li>      body {  </li>
<li>        margin: 0px;  </li>
<li>        padding: 0px;  </li>
<li>      }  </li>
<li>      canvas {  </li>
<li>        border: 1px solid #9C9898;  </li>
<li>      }  </li>
<li>    </style>  </li>
<li>        <script type="text/javascript" src="ext/bootstrap.js"></script>           </li>
<li>          </li>
<li>        <script type="text/javascript" src="ext/ext-all-debug.js"></script>  </li>
<li>    <script src="js/kinetic-v3.10.2.min.js"></script>  </li>
<li>    <script>  </li>
<li>      </li>
<li>    Ext.onReady(function(){  </li>
<li>        /** </li>
<li>            自动判断顶点连线算法 </li>
<li>        */        </li>
<li>         </li>
<li>       var stage=new Kinetic.Stage({  </li>
<li>            container:'container',  </li>
<li>            width:1000,  </li>
<li>            height:1000  </li>
<li>       });  </li>
<li>       var layer=new Kinetic.Layer();  </li>
<li>       var flag=false;  </li>
<li>       var imgArray=[];   </li>
<li>       var lineArray=[];  </li>
<li>       var tmpMoveImg=null;  </li>
<li>       var loop=0;  </li>
<li>       function  Pos(x,y){  </li>
<li>            this.x=x;  </li>
<li>            this.y=y;  </li>
<li>       };   </li>
<li>       function LineImage(img,line){  </li>
<li>            this.img=img;  </li>
<li>            this.line=line;  </li>
<li>       };  </li>
<li>         </li>
<li>       function NewImage(img,opsArray){  </li>
<li>            this.img=img;  </li>
<li>            this.opsArray=opsArray;   </li>
<li>       };  </li>
<li>          </li>
<li>       var imgA= new Image();  </li>
<li>       imgA.onload=function(){  </li>
<li>           var imgObjA= createImage(imgA,100,100,100,100)  </li>
<li>           var array=new Array();   </li>
<li>           var na=new  NewImage(imgObjA,array);   </li>
<li>           imgArray.push(na);  </li>
<li>           layer.add(imgObjA);  </li>
<li>           stage.add(layer);   </li>
<li>       }   </li>
<li>         </li>
<li>       var imgB= new Image();  </li>
<li>       imgB.onload=function(){  </li>
<li>           var imgObjB= createImage(imgB,400,400,100,100)  </li>
<li>           var array=new Array();   </li>
<li>           var nb=new  NewImage(imgObjB,array);  </li>
<li>           imgArray.push(nb);  </li>
<li>           layer.add(imgObjB);  </li>
<li>           stage.add(layer);   </li>
<li>       }   </li>
<li>         </li>
<li>       var imgC= new Image();  </li>
<li>       imgC.onload=function(){   </li>
<li>           var imgObjC= createImage(imgC,700,100,100,100)   </li>
<li>           var array=new Array();   </li>
<li>           var nc=new  NewImage(imgObjC,array);   </li>
<li>           imgArray.push(nc);  </li>
<li>           layer.add(imgObjC);  </li>
<li>           stage.add(layer);   </li>
<li>       }    </li>
<li>       var rect=new Kinetic.Rect({  </li>
<li>            x:0,  </li>
<li>            y:0,  </li>
<li>            width:1000,  </li>
<li>            height:1000,  </li>
<li>            fill:'white',  </li>
<li>            storke:'red',  </li>
<li>            storkeWidth:5  </li>
<li>              </li>
<li>       });  </li>
<li>       layer.add(rect);    </li>
<li>       imgA.src='img/db.png';   </li>
<li>       imgB.src='img/mj.png';   </li>
<li>       imgC.src="img/kt1.png";  </li>
<li>       rect.on('dblclick',function(){  </li>
<li>              </li>
<li>            if(loop%2==0){  </li>
<li>                flag=true;  </li>
<li>                for(var i=0;i<imgArray.length;i++){  </li>
<li>                    imgArray.img.setDraggable(false);  </li>
<li>                      </li>
<li>                }  </li>
<li>            }else{  </li>
<li>                flag=false;  </li>
<li>               </li>
<li>                for(var i=0;i<imgArray.length;i++){  </li>
<li>                     </li>
<li>                    imgArray.img.setDraggable(true);  </li>
<li>                    imgArray.img.on('mouseover',function(){  </li>
<li>                        var p=new Pos(this.getX(),this.getY());  </li>
<li>                        tmpMoveImg=getImgByPos(p);  </li>
<li>                          </li>
<li>                    })  </li>
<li>                      </li>
<li>                    imgArray.img.on('dragmove',function(){  </li>
<li>                         </li>
<li>                        for(var j=0;j<tmpMoveImg.opsArray.length;j++){  </li>
<li>                                var realPoints=[];   </li>
<li>                                calculateStartEndPos(tmpMoveImg.opsArray.img,this,realPoints);   </li>
<li>                                var line= createLine(realPoints);   </li>
<li>                                var oldLine=tmpMoveImg.opsArray.line;   </li>
<li>                                var p=new Pos(tmpMoveImg.opsArray.img.getX(),tmpMoveImg.opsArray.img.getY());   </li>
<li>                                var oppoImg= getImgByPos(p);  </li>
<li>                                replaceOppoLine(oppoImg,oldLine,line);   </li>
<li>                                layer.remove(tmpMoveImg.opsArray.line);  </li>
<li>                                tmpMoveImg.opsArray.line=line;   </li>
<li>                                layer.add(line);  </li>
<li>                                layer.draw();  </li>
<li>                                realPoints=[];  </li>
<li>                           </li>
<li>                        }    </li>
<li>                          </li>
<li>                        layer.draw();  </li>
<li>                          </li>
<li>                    })  </li>
<li>                }  </li>
<li>            }  </li>
<li>            loop++;  </li>
<li>              </li>
<li>            for(var i=0;i<imgArray.length;i++){  </li>
<li>                var innerFlag=false;  </li>
<li>                var points=[];//标记性的点，为了获取img 使用  </li>
<li>                var realPoints=[];//真正计算后合理的划线点  </li>
<li>                imgArray.img.on('mousedown',function(){  </li>
<li>                       </li>
<li>                     if(flag){  </li>
<li>                        var pos= stage.getMousePosition();    </li>
<li>                        points.push(this.getX());  </li>
<li>                        points.push(this.getY());  </li>
<li>                        innerFlag=true;  </li>
<li>                     }  </li>
<li>                });  </li>
<li>                imgArray.img.on('mouseup',function(){  </li>
<li>                     if(flag&&innerFlag){  </li>
<li>                        var pos= stage.getMousePosition();    </li>
<li>                        points.push(this.getX());  </li>
<li>                        points.push(this.getY());  </li>
<li>                          </li>
<li>                          </li>
<li>                        var p=new Pos(points,points);   </li>
<li>                        var op=new Pos(points,points);   </li>
<li>                        var opImg=getImgByPos(p);   </li>
<li>                        var owImg=getImgByPos(op);  </li>
<li>                        if(opImg!=owImg){  </li>
<li>                            calculateStartEndPos(opImg.img,owImg.img,realPoints);  </li>
<li>                            var line= createLine(realPoints);  </li>
<li>                              </li>
<li>                            var opLine=new LineImage(opImg.img,line);  </li>
<li>                            var owLine=new LineImage(owImg.img,line);  </li>
<li>                              </li>
<li>                               </li>
<li>                            owImg.opsArray.push(opLine);   </li>
<li>                            opImg.opsArray.push(owLine);  </li>
<li>                              </li>
<li>                              </li>
<li>                            flag=false;  </li>
<li>                            innerFlag=false;  </li>
<li>                            points=[];  </li>
<li>                            realPoints=[];  </li>
<li>                            layer.add(line);  </li>
<li>                            layer.draw();  </li>
<li>                        }   </li>
<li>                          </li>
<li>                          </li>
<li>                     }  </li>
<li>               });  </li>
<li>            }  </li>
<li>       })  </li>
<li>       /** </li>
<li>       * 通过坐标获取Img对象 </li>
<li>       */  </li>
<li>       function getImgByPos(pos){   </li>
<li>            for(var i=0;i<imgArray.length;i++){   </li>
<li>                if(imgArray.img.getX()==pos.x&&imgArray.img.getY()==pos.y){   </li>
<li>                    return imgArray;   </li>
<li>                }  </li>
<li>            }   </li>
<li>       }  </li>
<li>       /** </li>
<li>       * 替换对方中line </li>
<li>       */  </li>
<li>       function replaceOppoLine(imgObj,oldLine,newLine){  </li>
<li>            for(var i=0;i<imgObj.opsArray.length;i++){  </li>
<li>                   </li>
<li>                if(imgObj.opsArray.line==oldLine){   </li>
<li>                    imgObj.opsArray.line=newLine;  </li>
<li>                }   </li>
<li>            }  </li>
<li>       }  </li>
<li>       /** </li>
<li>        划线 </li>
<li>       */  </li>
<li>       function createLine(points){  </li>
<li>               </li>
<li>             var line=new Kinetic.Line({   </li>
<li>                points:points,  </li>
<li>                stroke:'bule',  </li>
<li>                strokeWidth:5,  </li>
<li>                lineCap:'round',  </li>
<li>                lineJoin:'round'   </li>
<li>                  </li>
<li>            });     </li>
<li>              </li>
<li>            return line;  </li>
<li>       }  </li>
<li>       /** </li>
<li>       * 计算划线的开始坐标 </li>
<li>       */  </li>
<li>       function calculateStartEndPos(imgStart,imgEnd,realPoints){  </li>
<li>            var realSx=0;  </li>
<li>            var realSy=0;  </li>
<li>            var realEx=0;  </li>
<li>            var realEy=0;  </li>
<li>         </li>
<li>            var sx=imgStart.getX();  </li>
<li>            var sy=imgStart.getY();  </li>
<li>            var swidth=imgStart.getWidth();  </li>
<li>            var sheight=imgStart.getHeight();   </li>
<li>            var ex=imgEnd.getX();  </li>
<li>            var ey=imgEnd.getY();  </li>
<li>            var ewidth=imgEnd.getWidth();  </li>
<li>            var eheight=imgEnd.getHeight();   </li>
<li>              </li>
<li>            var arrayx=calculateX(sx,swidth,ex,ewidth );  </li>
<li>              </li>
<li>            var arrayy=calculateY(sy,sheight,ey,eheight );  </li>
<li>               </li>
<li>              </li>
<li>            realPoints.push(arrayx);  </li>
<li>            realPoints.push(arrayy);  </li>
<li>            realPoints.push(arrayx);  </li>
<li>            realPoints.push(arrayy);  </li>
<li>              </li>
<li>       }  </li>
<li>       /** </li>
<li>            计算开始和结束节点x坐标 </li>
<li>       */  </li>
<li>       function calculateX(sx,swidth,ex,ewidth ){  </li>
<li>            var arrayX=[];  </li>
<li>            if(sx>ex){    </li>
<li>                arrayX.push(sx);  </li>
<li>                arrayX.push(ex+ewidth);  </li>
<li>               </li>
<li>            }else if(sx==ex){  </li>
<li>                arrayX.push(sx+(swidth/2));  </li>
<li>                arrayX.push(sx+(ewidth/2));  </li>
<li>            }else{   </li>
<li>                arrayX.push(sx+swidth);  </li>
<li>                arrayX.push(ex);  </li>
<li>            }  </li>
<li>            return  arrayX;  </li>
<li>       }  </li>
<li>       /** </li>
<li>            计算开始和结束节点y坐标 </li>
<li>       */  </li>
<li>       function calculateY(sy,sheight,ey,eheight ){  </li>
<li>               </li>
<li>               </li>
<li>            var arrayY=[];  </li>
<li>            if(sy>ey){   </li>
<li>                arrayY.push(sy+(sheight/2));  </li>
<li>                arrayY.push(ey+(eheight/2));  </li>
<li>            }else if(sy==ey){  </li>
<li>                  </li>
<li>                arrayY.push(sy+(sheight/2));  </li>
<li>                arrayY.push(sy+(eheight/2));  </li>
<li>            }else{   </li>
<li>                arrayY.push(sy+(sheight/2));  </li>
<li>                arrayY.push(ey+(eheight/2));  </li>
<li>                  </li>
<li>            }   </li>
<li>            return  arrayY;  </li>
<li>       }  </li>
<li>       /** </li>
<li>            画图 </li>
<li>       */  </li>
<li>       function createImage(img,x,y,width,height){  </li>
<li>            var imgObj=new Kinetic.Image({  </li>
<li>                x:x,  </li>
<li>                y:y,  </li>
<li>                width:width,  </li>
<li>                height:height,  </li>
<li>                draggable:true,  </li>
<li>                image:img  </li>
<li>           });  </li>
<li>           imgObj.on("mouseover", function(){  </li>
<li>                document.body.style.cursor = "pointer";  </li>
<li>           });  </li>
<li>           imgObj.on("mouseout", function(){  </li>
<li>                document.body.style.cursor = "default";  </li>
<li>           });  </li>
<li>           return imgObj  </li>
<li>         </li>
<li>       }   </li>
<li>          </li>
<li>    });   </li>
<li>  </li>
<li>    </script>  </li>
<li>  </head>  </li>
<li>  <body>  </li>
<li>    <div id="container"></div>  </li>
<li>  </body>  </li>
<li></html>  </li>
<li>  </li>
<li><img alt="" src="http://dl.iteye.com/upload/attachment/0070/8176/f9bb5503-b35b-3a45-abb1-0241a1495665.png">  </li>
<li>  </li>
<li>   </li>
<li><img alt="" src="http://dl.iteye.com/upload/attachment/0070/8178/54c788d0-1395-3824-aea1-280b70b6f523.png">  </li>
<li>  </li>
<li>   </li>

</ol></div>
 效果如下 <img alt="" data-src="http://dl.iteye.com/upload/attachment/0070/6648/40e36fc5-57b4-33da-a5f1-d73a3996261c.png">   <img src="http://dl.iteye.com/upload/attachment/0070/6646/3b1a389b-7f5b-3ded-8dd6-d2838b933da3.png">
 代码里还有一项基于extjs4 的实现和纯html5 canvas 的实现
<div class="attachments">
<ul>
<li>ExtDraw.zip (2.1 MB)</li>
<li>下载次数: 420</li>

</ul>
<ul>
<li>ExtDraw1.zip (2.2 MB)</li>
<li>下载次数: 455</li>

</ul>
<ul>
<li>查看图片附件</li>

</ul>

</div>
 
来源：https://www.cnblogs.com/zjw2004112/p/11770429.html

頁: [1]

琼殿技术论坛's Archiver

基于html5二个div 连线