大佬教程收集整理的这篇文章主要介绍了基于html5 拖拽连线加强版实现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
自动折线,自动判断起始点坐标,拖拽位置变换,大小拖拽,箭头指向等功能,这个版本稍微复杂一点,
还有个简单版本的实现http://zha-zi.iteye.com/blog/1586814 这个应该比较容易理解坐标换算不太多
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } </style> <script type="text/javascript" src="ext/bootstrap.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="ext/ext-all-debug.js"></script> <script src="js/kinetic-v3.10.2.min.js"></script> <script> Ext.onReady(function(){ /** 自动折叠连线算法 */ var stage=new Kinetic.Stage({ container:'container',width:1000,height:1000 }); /** 箭头角度 */ var arrowAngle=30; /** 箭头半径 */ var arrowRadius=5; /** 箭头长度 */ var arrowLenght=10; /** 表示方向 */ var E="E"; var W="W"; var S="S"; var N="N"; var layer=new Kinetic.Layer(); var flag=false; var imgArray=[]; var lineArray=[]; var tmpMoveImg=null; var loop=0; function Pos(x,y){ this.x=x; this.y=y; }; /** img 图像 lineArrow 带有箭头的line flag 图像与箭头的指向关系 */ function LineImage(img,lineArrow,flag){ this.img=img; this.lineArrow=lineArrow; this.flag=flag }; function LineArrow(line,arrow){ this.line=line; this.arrow=arrow; }; function NewImage(img,opsArray,group){ this.img=img; this.group=group; this.opsArray=opsArray; }; var imgA= new Image(); var imgObjA; var groupA; imgA.onload=function(){ imgObjA= createImage(imgA,100,100) var array=new Array(); groupA=new Kinetic.Group({ draggable:true }); groupA.add(imgObjA); layer.add(groupA); addAnchor(groupA,"topLeft"); addAnchor(groupA,200,"topRight"); addAnchor(groupA,"bottomRight"); addAnchor(groupA,"bottomLeft"); var na=new NewImage(imgObjA,array,groupA); imgArray.push(na); stage.add(layer); } var imgB= new Image(); var imgObjB; var groupB; imgB.onload=function(){ imgObjB= createImage(imgB,400,100) var array=new Array(); groupB=new Kinetic.Group({ draggable:true }); groupB.add(imgObjB); layer.add(groupB); addAnchor(groupB,"topLeft"); addAnchor(groupB,500,"topRight"); addAnchor(groupB,"bottomRight"); addAnchor(groupB,"bottomLeft"); var nb=new NewImage(imgObjB,groupB); imgArray.push(nb); stage.add(layer); } var imgC= new Image(); var imgObjc; var groupc; imgC.onload=function(){ imgObjC= createImage(imgC,700,100) var array=new Array(); groupC=new Kinetic.Group({ draggable:true }); groupC.add(imgObjC); layer.add(groupC); addAnchor(groupC,"topLeft"); addAnchor(groupC,800,"topRight"); addAnchor(groupC,"bottomRight"); addAnchor(groupC,"bottomLeft"); var nc=new NewImage(imgObjC,groupC); imgArray.push(nc); stage.add(layer); } var rect=new Kinetic.Rect({ x:0,y:0,height:1000,fill:'white',storke:'red',storkeWidth:5 }); layer.add(rect); imgA.src='img/db.png'; imgB.src='img/mj.png'; imgC.src="img/kt1.png"; rect.on('dblclick',function(){ if(loop%2==0){ flag=true; for(var i=0;i<imgArray.length;i++){ imgArraY[i].group.setDraggable(false); } }else{ flag=false; for(var i=0;i<imgArray.length;i++){ imgArraY[i].group.setDraggable(true); imgArraY[i].img.on('mouSEOver',function(){ var p=new Pos(this.getAbsolutePosition().x,this.getAbsolutePosition().y); tmpMoveImg=getImgByPos(p); }); imgArraY[i].group.on('dragmove',function(){ for(var j=0;j<tmpMoveImg.opsArray.length;j++){ var realPoints=[]; if(tmpMoveImg.opsArraY[j].flag){ calculateStartEndPos(tmpMoveImg.opsArraY[j].img,this.children[0],realPoints); }else{ calculateStartEndPos(this.children[0],tmpMoveImg.opsArraY[j].img,realPoints); } tmpMoveImg.opsArraY[j].lineArrow.line.setPoints(realPoints); var arrowPoint= calculateArrowPointsByPoints(realPoints); tmpMoveImg.opsArraY[j].lineArrow.arrow.setPoints(arrowPoint); layer.draw(); realPoints=[]; } layer.draw(); }); imgArraY[i].group.on('dragmove',function(){ for(var j=0;j<lineArray.length;j++){ //lineArraY[j].hide(); //moveLine@R_923_10586@rget(lineArraY[j]) } }); } } loop++; for(var i=0;i<imgArray.length;i++){ var innerFlag=false; var points=[];//标记性的点,为了获取img 使用 var realPoints=[];//真正计算后合理的划线点 imgArraY[i].img.on('mousedown',function(){ if(flag){ var pos= stage.getMousePosition(); points=[]; points.push(this.getAbsolutePosition().X); points.push(this.getAbsolutePosition().y); innerFlag=true; } }); imgArraY[i].img.on('mouseup',function(){ if(flag&&innerFlag){ var pos= stage.getMousePosition(); points.push(this.getAbsolutePosition().X); points.push(this.getAbsolutePosition().y); //起始点 var p=new Pos(points[0],points[1]); //结束点 var op=new Pos(points[2],points[3]); // 划线起始图像 var opImg=getImgByPos(p); // 划线结束图像 var owImg=getImgByPos(op); if(opImg!=owImg){ calculateStartEndPos(opImg.img,owImg.img,realPoints); var lineArrow= createLine(realPoints); var opLine=new LineImage(opImg.img,truE); var owLine=new LineImage(owImg.img,falsE); owImg.opsArray.push(opLinE); opImg.opsArray.push(owLinE); flag=false; innerFlag=false; points=[]; realPoints=[]; lineArray.push(lineArrow); layer.add(lineArrow.linE); layer.add(lineArrow.arrow); layer.draw(); bandEventToLine(lineArrow.linE); } } }); } }) /** * 通过坐标获取Img对象 */ function getImgByPos(pos){ for(var i=0;i<imgArray.length;i++){ if(imgArraY[i].img.getAbsolutePosition().x==pos.x&&imgArraY[i].img.getAbsolutePosition().y==pos.y){ return imgArraY[i]; } } } /** * 替换对方中line */ function replaceOppoLine(imgObj,oldLine,newLinE){ for(var i=0;i<imgObj.opsArray.length;i++){ if(imgObj.opsArraY[i].line==oldLinE){ imgObj.opsArraY[i].line=newLine; } } } /** * 计算划线的开始坐标 */ function calculateStartEndPos(imgStart,imgend,realPoints){ var reaLSX=0; var realSy=0; var realEx=0; var realEy=0; var sx=imgStart.getAbsolutePosition().x; var sy=imgStart.getAbsolutePosition().y; var swidth=imgStart.getWidth(); var sheight=imgStart.getHeight(); var ex=imgend.getAbsolutePosition().x; var ey=imgend.getAbsolutePosition().y; var ewidth=imgend.getWidth(); var eheight=imgend.getHeight(); var array=calculateXY(sy,sheight,ey,eheight,sx,swidth,ex,ewidth); var crossArray=null; if((array[0]!=array[2])&&(arraY[1]!=arraY[3])){ var crossArray= calculateCrossPoints(array,sy,ewidth); } realPoints.push(array[0]); realPoints.push(arraY[1]); if(crossArray!=null) for(var i=0;i<crossArray.length;i++){ realPoints.push(crossArraY[i]); } realPoints.push(array[2]); realPoints.push(arraY[3]); } /** 计算连线开始和结束坐标的位置 */ function calculateXY(sy,ewidth ){ var array=[]; if(sy==ey){ if(sx>eX){ array.push(sX); array.push(sy+(sheight/2)); array.push(ex+ewidth); array.push(sy+(eheight/2)); }else{ array.push(sx+swidth); array.push(sy+(sheight/2)); array.push(eX); array.push(sy+(eheight/2)); } }else{ if(sy>ey&&(sy-ey>sheight)){ if(sx>eX){ if(sx-ex<swidth/2){ array.push(sX); array.push(sy+(sheight/2)); array.push(eX); array.push(ey+eheight/2); }else{ array.push(sX); array.push(sy+(sheight/2)); array.push(ex+(ewidth/2)); array.push(ey+eheight); } }else if(sx==eX){ array.push(sx+(swidth/2)); array.push(sy); array.push(ex+(ewidth/2)); array.push(ey+eheight); }else{ if(ex-sx<ewidth/2){ array.push(sX); array.push(sy+(sheight/2)); array.push(eX); array.push(ey+eheight/2); }else{ array.push(sx+swidth); array.push(sy+(sheight/2)); array.push(ex+(ewidth/2)); array.push(ey+eheight); } } }else if(sy<ey&&(ey-sy>eheight)){ if(sx>eX){ if(sx-ex<swidth/2){ array.push(sX); array.push(sy+sheight/2); array.push(eX); array.push(ey+eheight/2); }else{ array.push(sx+(swidth/2)); array.push(sy+sheight); array.push(ex+ewidth); array.push(ey+(eheight/2)); } }else if(sx==eX){ array.push(sx+(swidth/2)); array.push(sy+sheight); array.push(ex+(ewidth/2)); array.push(ey); }else{ if(ex-sx<ewidth/2){ array.push(sX); array.push(sy+sheight/2); array.push(eX); array.push(ey+eheight/2); }else{ array.push(sx+(swidth/2)); array.push(sy+sheight); array.push(eX); array.push(ey+(eheight/2)); } } }else{ if((sy<ey&&(ey-sy<eheight))||sy>ey&&(sy-ey<sheight)){ array.push(sx+swidth/2); array.push(sy); array.push(ex+ewidth/2); array.push(ey); } } } return array; } /** 计算折叠点的位置 */ function calculateCrossPoints(array,ewidth){ var pointsArray=[]; var x=array[0]; var y=arraY[1]; var x1=array[2]; var y1=arraY[3]; var f=false; if((x-x1)>0&&(y-y1)>0){ f=true; } if((x1-X)>0&&(y1-y)>0){ f=true; } /** y轴的多个折叠点 */ if((sy>ey&&sy-ey<=sheight)||(sy<ey&&ey-sy<=eheight)){ if(sy>ey&&sy-ey<=sheight){ pointsArray.push(X); pointsArray.push(y1-sheight); pointsArray.push(x1); pointsArray.push(y1-sheight); }else if(sy<ey&&ey-sy<=eheight){ pointsArray.push(X); pointsArray.push(y-eheight); pointsArray.push(x1); pointsArray.push(y-eheight); } }else if((sx>ex&&sx-ex<=sheight/2)||(sx<ex&&ex-sx<=eheight/2)){ /** x轴的多个折点 */ //x= sx-swidth/2 //y=y+sheight/2 if(sx-ex<sheight/2){ pointsArray.push(sx-ewidth); pointsArray.push(sy+sheight/2); pointsArray.push(sx-ewidth); pointsArray.push(ey+eheight/2); }else if(ex-sx<eheight/2){ pointsArray.push(ex-swidth); pointsArray.push(sy+sheight/2); pointsArray.push(ex-swidth); pointsArray.push(ey+eheight/2); } }else{ /** 单个折叠点 */ if(f){ if(x<x1){ pointsArray.push(X); }else{ pointsArray.push(x1); } if(y<y1){ pointsArray.push(y1); }else{ pointsArray.push(y); } }else{ if(x<x1){ pointsArray.push(x1); }else{ pointsArray.push(X); } if(y<y1){ pointsArray.push(y1); }else{ pointsArray.push(y); } } } return pointsArray; } function createImage(img,x,y,width,height){ var imgObj=new Kinetic.Image({ x:x,y:y,width:width,height:height,//draggable:true,image:img,name:"image",}); imgObj.on("mouSEOver",function(){ document.body.style.cursor = "pointer"; }); imgObj.on("mouSEOut",function(){ document.body.style.cursor = "default"; }); return imgObj } /** 根据points 节点数组划线 */ function createLine(points){ var line=new Kinetic.Line({ points:points,stroke:'green',strokeWidth:2,lineCap:'round',lineJoin:'round' }); var lenght=points.length; var x=points[lenght-4]; var y=points[lenght-3]; var x1=points[lenght-2]; var y1=points[lenght-1]; var arrow=createArrow(calculateArrowPosition(x1,y1,calculateArrowAspect(x,x1,y1)),"black"); var la =new LineArrow(line,arrow); return la; } function bandEventToLine(linE){ line.saveData(); line.on("mouSEOver",function(){ document.body.style.cursor = "pointer"; }); line.on("mouSEOut",function(){ document.body.style.cursor = "default"; }); } /** 通过line计算 arrow 的points 数组 */ function calculateArrowPointsByLine(linE){ var points=line.getPoints(); var lenght=points.length; var x=points[lenght-4]; var y=points[lenght-3]; var x1=points[lenght-2]; var y1=points[lenght-1]; return calculateArrowPosition(x1,y1)); } function calculateArrowPointsByPoints(points){ var lenght=points.length; var x=points[lenght-4]; var y=points[lenght-3]; var x1=points[lenght-2]; var y1=points[lenght-1]; return calculateArrowPosition(x1,y1)); } /** 计算箭头朝向 */ function calculateArrowAspect(x,y1){ if(x==x1){ if(y>y1){ return N; }else{ return S; } }else if(y==y1){ if(x>x1){ return W; }else{ return E; } } } /** 计算箭头具体位置 */ function calculateArrowPosition(x,aspect){ var points=[]; switch(aspect){ case N: points.push(X); points.push(y); points.push(x-arrowRadius); points.push(y+arrowLenght); points.push(x+arrowRadius); points.push(y+arrowLenght); break; case S: points.push(X); points.push(y); points.push(x-arrowRadius); points.push(y-arrowLenght); points.push(x+arrowRadius); points.push(y-arrowLenght); break; case E: points.push(X); points.push(y); points.push(x-arrowLenght); points.push(y+arrowRadius); points.push(x-arrowLenght); points.push(y-arrowRadius); break; case W: points.push(X); points.push(y); points.push(x+arrowLenght); points.push(y+arrowRadius); points.push(x+arrowLenght); points.push(y-arrowRadius); break; } return points; } function createArrow(points,fill){ var arrow=new Kinetic.Polygon({ points: points,fill: fill,stroke: "black",strokeWidth: 1 }); return arrow; } function addAnchor(group,@R_489_8313@{ var stage=group.getStage(); var layer=group.getLayer(); var anchor=new Kinetic.Circle({ x:x,stroke:'#666',fill:'green',radius:1,name:name,draggable:true }); anchor.on('dragmove',function(){ @R_673_9531@e(group,this); layer.draw(); }); anchor.on('dragend',function(){ group.setDraggable(true); layer.draw(); }); anchor.on('mousedown touchstar',function(){ group.setDraggable(false); //this.moveToTop(); }); anchor.on('mouSEOver',function(){ var layer = this.getLayer(); document.body.style.cursor = "pointer"; this.seTradius(3); layer.draw(); }); anchor.on('mouSEOut',function(){ var layer = this.getLayer(); document.body.style.cursor = "default"; this.seTradius(1); layer.draw(); }); group.add(anchor); } function @R_673_9531@e(group,activeAnchor){ var topLeft=group.get(".topLeft")[0]; var topRight=group.get(".topRight")[0]; var bottomLeft=group.get(".bottomLeft")[0]; var bottomRight=group.get(".bottomRight")[0]; var image=group.children[0]; switch(activeAnchor.getName()){ case "topLeft": topRight.attrs.y = activeAnchor.attrs.y; bottomLeft.attrs.x = activeAnchor.attrs.x; break; case "topRight": topLeft.attrs.y = activeAnchor.attrs.y; bottomRight.attrs.x = activeAnchor.attrs.x; break; case "bottomRight": bottomLeft.attrs.y = activeAnchor.attrs.y; topRight.attrs.x = activeAnchor.attrs.x; break; case "bottomLeft": bottomRight.attrs.y = activeAnchor.attrs.y; topLeft.attrs.x = activeAnchor.attrs.x; break; } image.setPosition(topLeft.attrs.x,topLeft.attrs.y); image.setSize(topRight.attrs.x - topLeft.attrs.x,bottomLeft.attrs.y - topLeft.attrs.y); } }); </script> </head> <body> <div id="container"></div> </body> </html>
以上是大佬教程为你收集整理的基于html5 拖拽连线加强版实现全部内容,希望文章能够帮你解决基于html5 拖拽连线加强版实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。