浏览 5436 次
|
锁定老帖子 主题：基于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 运行可以 大家在瞧瞧源码来着
|
| 返回顶楼 | |
