Raphael之拖出控件连线控件
1）代码
<span style="font-size:14px;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="myJs/jquery.min.js" type="text/javascript"></script>
<script src="myJs/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="myJs/raphael.js"></script>
<title>控件之间的连线可以随控件移动而改变位置</title>
<style>
#tool_bar
{
color:#36F;
border-radius:10px;
background:red;
width:200px;
height:50px;
font-family:微软雅黑;
font-size:14px;
text-align:center;
cursor:move;
}
#tool
{
color:#36F;
border-radius:10px;
width:200px;
height:50px;
font-family:微软雅黑;
font-size:14px;
text-align:center;
cursor:default;
}
</style>
<script>
var paper;
var padd_top = 100;//画布上点位置与整体位置y坐标偏差
var padd_left = 0;
$(function()
{
paper = new Raphael(document.getElementById("paper"),1600, 800);
$("#tool_bar").draggable({helper:"clone",cursor:'move'})
$("#paper").droppable({
accept:"#tool_bar",
drop:function(event,ui)
{
drawSvg(event.clientX,event.clientY);//firefox不支持event.clientX的直接使用
}
});
})
/*
获取两矩形中点连线
*/
function getLine(element1,element2)
{
var fromDotX = element1.attr("x")+element1.attr("width")/2;
var fromDotY = element1.attr("y")+element1.attr("height")/2;
var toDotX = element2.attr("x")+element2.attr("width")/2;
var toDotY = element2.attr("y")+element2.attr("height")/2;
return "M "+fromDotX+" "+fromDotY+" L "+toDotX+" "+toDotY+"";
}
/*
获取某个矩形的四边组合的路径线
*/
function getElementLine(elementId)
{
var element = paper.getById(elementId);
var p1 = element.attr("x");
var p2 = element.attr("y");
var p3 = element.attr("x")+element.attr("width");
var p4 = element.attr("y");
var p5 = element.attr("x")+element.attr("width");
var p6 = element.attr("y")+element.attr("height");
var p7 = element.attr("x");
var p8 = element.attr("y")+element.attr("height");
//console.log("M "+p1+" "+p2+" L "+p3+" "+p4+" L "+p5+" "+p6+" L "+p7+" "+p8+" L "+p1+" "+p2+"");
return "M "+p1+" "+p2+" L "+p3+" "+p4+" L "+p5+" "+p6+" L "+p7+" "+p8+" L "+p1+" "+p2+"";
}
/*
拖动到画布中画矩形
*/
function drawSvg(x,y)
{
//移动前事件
var start = function()
{
this.ox = this.attr("x");//自定义该对象坐标存储变量
this.oy = this.attr("y");
}
//拖动中更改坐标
var move = function(dx,dy)
{
var att = { x: this.ox + dx, y: this.oy + dy };
this.attr(att);
//判断是否有关联线
if(this.dotArray)
{
for(var i=0;i<this.dotArray.length;i++)
{
//判断是起点还是终点
if("from"==this.dotArray[i].state)
{
var connLine = getLine(paper.getById(this.dotArray[i].id),this);//交点连线
var fromDot = Raphael.pathIntersection(connLine,getElementLine(this.dotArray[i].id));
var toDot = Raphael.pathIntersection(connLine,getElementLine(this.id));
var path = paper.getById(this.dotArray[i].path_id);
path.attr({path:"M "+fromDot[0].x+" "+fromDot[0].y+" L "+toDot[0].x+" "+toDot[0].y+""});
}
if("to"==this.dotArray[i].state)
{
var connLine = getLine(paper.getById(this.dotArray[i].id),this);//交点连线
var fromDot = Raphael.pathIntersection(connLine,getElementLine(this.id));
var toDot = Raphael.pathIntersection(connLine,getElementLine(this.dotArray[i].id));
var path = paper.getById(this.dotArray[i].path_id);
path.attr({path:"M "+fromDot[0].x+" "+fromDot[0].y+" L "+toDot[0].x+" "+toDot[0].y+""});
console.log(path.attr("path"));
}
}
}
}
//拖动后可以什么都不执行
var end = function(){}
//绘制矩形
var tool = paper.rect(x,y-padd_top,100,50).attr({fill:'white'});
tool.attr({cursor:'pointer'});
tool.drag(move,start,end);//API支持的拖动事件
tool.click(function()
{
if(lineType)
{
if("no"!=tempData[0]&&tempData[0]!=null)
{
lineType = false;
var element = paper.getById(tempData[0]);//API方法，每一个画布上的元素都有一个唯一的id；根据id取到这个元素
var connLine = getLine(element,tool);//交点连线
var fromDot = Raphael.pathIntersection(connLine,getElementLine(tempData[0]));//起点
var toDot = Raphael.pathIntersection(connLine,getElementLine(this.id));//终点
var path = paper.path("M "+fromDot[0].x+" "+fromDot[0].y+" L "+toDot[0].x+" "+toDot[0].y+"").attr({stroke:"white",fill:"red","stroke-width":2,"arrow-end":'classic-wide-long'});//开始画线
if(this.dotArray)
{
this.dotArray.push({path_id:path.id,state:"from",id:element.id});
}
else
{
this.dotArray = new Array();//生成存放连线的各种信息
this.dotArray[0] = ({path_id:path.id,state:"from",id:element.id});
}
if(element.dotArray)
{
element.dotArray.push({path_id:path.id,state:"to",id:this.id});
}
else
{
element.dotArray = new Array();
element.dotArray[0] = ({path_id:path.id,state:"to",id:this.id});
}
for(var i=0;i<tempData.length;i++)
{
tempData[i] = "no";
}
$("#tool").css('background','');
}
else
{
tempData[0] = tool.id;
}
}
});
}
var lineType = false;//默认的
var tempData = ["no","no","no"];//存储需要连线的元素信息，可扩展
function getLineType()
{
if(lineType==false)
{
lineType = true;
$("#tool").css('background','gray')
}
else
{
lineType = false;
$("#tool").css('background','')
}
}
</script>
</head>
<body>
<div id="tool_bar" >
<br />拖动我到黑布里面
</div>
<div id="tool" onclick="javascript:getLineType()" >
<br />点击我再选择两个矩形画线
</div>
<div id="paper" style="background:black;width:1600px;height:800;"></div>
</body>
</html>
</span>2）示例图：
3）免费源代码地址
http://download.csdn.net/detail/wow4464/7549803
