大佬教程收集整理的这篇文章主要介绍了基于html5 的拖拽连线，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法
extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于html5的画图引擎，而是选择了svg 。
下边是花了不到一天的时间实现的任意点连线和拖动功能，代码没有优化，稍微乱了点
如果单纯应用canvas进行画图，拖拽是非常麻烦的，我们往往要基于第三方的画图类库，这里实现是基于kineticjs
<!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)
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,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)
var array=new Array();
var nc=new NewImage(imgObjC,array);
imgArray.push(nc);
layer.add(imgObjC);
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].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.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,newLinE){
for(var i=0;i<imgObj.opsArray.length;i++){
if(imgObj.opsArraY[i].line==oldLinE){
imgObj.opsArraY[i].line=newLine;
}
}
}
/**
划线
*/
function createLine(points){
var line=new Kinetic.Line({
points:points,stroke:'bule',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 arrayx=calculateX(sx,swidth,ex,ewidth );
var arrayy=calculateY(sy,sheight,ey,eheight );
realPoints.push(arrayx[0]);
realPoints.push(arrayy[0]);
realPoints.push(arrayx[1]);
realPoints.push(arrayY[1]);
}
/**
计算开始和结束节点x坐标
*/
function calculateX(sx,ewidth ){
var arrayX=[];
if(sx>eX){
arrayX.push(sX);
arrayX.push(ex+ewidth);
}else if(sx==eX){
arrayX.push(sx+(swidth/2));
arrayX.push(sx+(ewidth/2));
}else{
arrayX.push(sx+swidth);
arrayX.push(eX);
}
return arrayX;
}
/**
计算开始和结束节点y坐标
*/
function calculateY(sy,eheight ){
var arrayY=[];
if(sy>ey){
arrayY.push(sy+(sheight/2));
arrayY.push(ey+(eheight/2));
}else if(sy==ey){
arrayY.push(sy+(sheight/2));
arrayY.push(sy+(eheight/2));
}else{
arrayY.push(sy+(sheight/2));
arrayY.push(ey+(eheight/2));
}
return arrayY;
}
/**
画图
*/
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>
效果如下
以上是大佬教程为你收集整理的基于html5 的拖拽连线全部内容，希望文章能够帮你解决基于html5 的拖拽连线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
