浏览 5437 次
锁定老帖子 主题:基于html5 拖拽连线加强版实现
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-07-16
最后修改:2012-07-16
自动折线,自动判断起始点坐标,拖拽变换等功能 <!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 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; }; function LineImage(img,line){ this.img=img; this.line=line; }; function NewImage(img,opsArray){ this.img=img; this.opsArray=opsArray; }; var imgA= new Image(); imgA.onload=function(){ var imgObjA= createImage(imgA,100,100,100,100) var array=new Array(); var na=new NewImage(imgObjA,array); imgArray.push(na); layer.add(imgObjA); stage.add(layer); } var imgB= new Image(); imgB.onload=function(){ var imgObjB= createImage(imgB,400,400,100,100) var array=new Array(); var nb=new NewImage(imgObjB,array); imgArray.push(nb); layer.add(imgObjB); stage.add(layer); } var imgC= new Image(); imgC.onload=function(){ var imgObjC= createImage(imgC,700,100,100,100) var array=new Array(); var nc=new NewImage(imgObjC,array); imgArray.push(nc); layer.add(imgObjC); stage.add(layer); } var imgD= new Image(); imgD.onload=function(){ var imgObjD= createImage(imgD,600,300,100,100) var array=new Array(); var nd=new NewImage(imgObjD,array); imgArray.push(nd); layer.add(imgObjD); stage.add(layer); } var rect=new Kinetic.Rect({ x:0, y:0, width:1000, 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"; imgD.src='img/kt2.png'; rect.on('dblclick',function(){ if(loop%2==0){ flag=true; for(var i=0;i<imgArray.length;i++){ imgArray[i].img.setDraggable(false); } }else{ flag=false; for(var i=0;i<imgArray.length;i++){ imgArray[i].img.setDraggable(true); imgArray[i].img.on('mouseover',function(){ var p=new Pos(this.getX(),this.getY()); tmpMoveImg=getImgByPos(p); }) imgArray[i].img.on('dragmove',function(){ for(var j=0;j<tmpMoveImg.opsArray.length;j++){ var realPoints=[]; calculateStartEndPos(tmpMoveImg.opsArray[j].img,this,realPoints); var line= createLine(realPoints); var oldLine=tmpMoveImg.opsArray[j].line; var p=new Pos(tmpMoveImg.opsArray[j].img.getX(),tmpMoveImg.opsArray[j].img.getY()); var oppoImg= getImgByPos(p); replaceOppoLine(oppoImg,oldLine,line); layer.remove(tmpMoveImg.opsArray[j].line); tmpMoveImg.opsArray[j].line=line; layer.add(line); layer.draw(); realPoints=[]; } layer.draw(); }) } } 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.getX()); points.push(this.getY()); innerFlag=true; } }); imgArray[i].img.on('mouseup',function(){ if(flag&&innerFlag){ var pos= stage.getMousePosition(); points.push(this.getX()); points.push(this.getY()); 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 line= createLine(realPoints); var opLine=new LineImage(opImg.img,line); var owLine=new LineImage(owImg.img,line); owImg.opsArray.push(opLine); opImg.opsArray.push(owLine); flag=false; innerFlag=false; points=[]; realPoints=[]; layer.add(line); layer.draw(); } } }); } }) /** * 通过坐标获取Img对象 */ function getImgByPos(pos){ for(var i=0;i<imgArray.length;i++){ if(imgArray[i].img.getX()==pos.x&&imgArray[i].img.getY()==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; } } } /** 根据points 节点数组划线 */ function createLine(points){ var line=new Kinetic.Line({ points:points, stroke:'green', strokeWidth:5, lineCap:'round', lineJoin:'round' }); return line; } /** * 计算划线的开始坐标 */ function calculateStartEndPos(imgStart,imgEnd,realPoints){ var realSx=0; var realSy=0; var realEx=0; var realEy=0; var sx=imgStart.getX(); var sy=imgStart.getY(); var swidth=imgStart.getWidth(); var sheight=imgStart.getHeight(); var ex=imgEnd.getX(); var ey=imgEnd.getY(); var ewidth=imgEnd.getWidth(); var eheight=imgEnd.getHeight(); var array=calculateXY(sy,sheight,ey,eheight ,sx,swidth,ex,ewidth); var crossArray= calculateCrossPoints(array,sy,sheight,ey,eheight ,sx,swidth,ex,ewidth); realPoints.push(array[0]); realPoints.push(array[1]); for(var i=0;i<crossArray.length;i++){ realPoints.push(crossArray[i]); } realPoints.push(array[2]); realPoints.push(array[3]); } /** 计算连线开始和结束坐标的位置 */ function calculateXY(sy,sheight,ey,eheight,sx,swidth,ex,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,sy,sheight,ey,eheight ,sx,swidth,ex,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 }); imgObj.on("mouseover", function(){ document.body.style.cursor = "pointer"; }); imgObj.on("mouseout", function(){ document.body.style.cursor = "default"; }); return imgObj } }); </script> </head> <body> <div id="container"></div> </body> </html> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-07-16
代码好长,头好大!
|
|
返回顶楼 | |
发表时间:2012-07-16
archy123 写道 代码好长,头好大!
计算坐标和开始结束点是有点长。 |
|
返回顶楼 | |
发表时间:2012-07-16
不喜欢EXT的东西
|
|
返回顶楼 | |
发表时间:2012-08-07
确实好长 最好给个在线效果DEOM 运行可以 大家在瞧瞧源码来着
|
|
返回顶楼 | |