Raphael之拖出控件连线控件

最新推荐文章于 2019-01-15 23:45:52 发布

Jinx_Q

最新推荐文章于 2019-01-15 23:45:52 发布

阅读量2.4k

点赞数

分类专栏： raphael.js Raphael 文章标签： raphael

知识本就需要传播，如果你需要请自行转走。

本文链接：https://blog.csdn.net/medivhq/article/details/34435391

版权

raphael.js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Raphael

13 篇文章 7 订阅

订阅专栏

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" οnclick="javascript:getLineType()" >
	<br />点击我再选择两个矩形画线
</div>

<div id="paper" style="background:black;width:1600px;height:800;"></div>

</body>
</html>
</span>

2）示例图：