jsPlumb学习笔记

浏览数：61 / 时间：2015年06月09日

自以为会了D3就可以无敌于可视化了，不过项目中却要求用jsPlumb。在我看来，这就是一个给元素画连接线的工具。

<!DOCTYPE html>
<html>
	<head>
		<title>jsPlumb</title>
		<style>
			.item{
				width:100px;
				height:50px;
				border:3px solid green;
				position: absolute;
			}
			.item1{
				left:400px;
				top:100px; 
			}
			.item2{
				left:300px;
				top:250px; 
			}
			.item3{
				left:500px;
				top:250px; 
			}
			.item4{
				left:200px;
				top:400px; 
			}
			.item5{
				left:400px;
				top:400px; 
			}
			.item6{
				left:600px;
				top:400px; 
			}
		</style>
	</head>
	<body>
		<div class=‘demo‘ id=‘demo‘>
			<div class=‘item item1‘ id=‘item1‘>1</div>
			<div class=‘item item2‘ id=‘item2‘>2</div>
			<div class=‘item item3‘ id=‘item3‘>3</div>
			<div class=‘item item4‘ id=‘item4‘>4</div>
			<div class=‘item item5‘ id=‘item5‘>5</div>
			<div class=‘item item6‘ id=‘item6‘>6</div>
		</div>	
	<script src="jquery-2.1.1.js"></script>
	<script src="jquery-ui-1.9.2.js"></script>
	<script src="jquery.jsPlumb-1.4.1-all.js"></script>
	<script>
	jsPlumb.ready(function(){
		var color = ‘#222‘;
		var instance = jsPlumb.getInstance({
			//连线
			Connector:[‘Bezier‘, {curviness:50}],
			//拖动时的演示
			DragOptions:{cursor:‘pointer‘, zIndex:2000},
			//连接线的样式
			PaintStyle:{strokeStyle:‘steelblue‘, lineWidth:3},
			//连接点的样式
			EndpointStyle:{radius:6, fillStyle:‘#222‘},
			//hover时线样式
			HoverPaintStyle:{strokeStyle:‘green‘},
			//hover时点的样式
			EndpointHoverStyle:{fillStyle:‘red‘},
			Container:‘demo‘    //这里是container的id，而不是class。
		});
		instance.doWhileSuspended(function(){
			var arrowCommon = {foldback: .7, fillStyle: color, width: 14},
				overlays = [
				[‘Arrow‘, {location:.8}, arrowCommon],
				// [‘Arrow‘, {location:.3, direction:-1}, arrowCommon],
				];
			var windows = jsPlumb.getSelector(‘.item‘);

			for(var i = 0; i<windows.length;i++){
				instance.addEndpoint(windows[i], {
					uuid:windows[i].getAttribute(‘id‘)+‘-bottom‘,
					anchor:‘Bottom‘,
					maxConnections:-1
				});
				instance.addEndpoint(windows[i], {
					uuid:windows[i].getAttribute(‘id‘)+‘-top‘,
					anchor:‘Top‘,
					maxConnections:-1
				});
			}
			//connect 函数
			instance.connect({uuids:[‘item3-bottom‘,‘item6-top‘], overlays:overlays, detachable:true, reattach:true});
			instance.connect({uuids:[‘item1-bottom‘,‘item2-top‘], overlays:overlays});
			instance.connect({uuids:[‘item1-bottom‘,‘item3-top‘], overlays:overlays});
			instance.connect({uuids:[‘item2-bottom‘,‘item4-top‘], overlays:overlays});
			instance.connect({uuids:[‘item2-bottom‘,‘item5-top‘], overlays:overlays});
			//jquery ui里的draggable功能
			instance.draggable(windows);
		});
		jsPlumb.fire(‘jsPlumbdemoLoaded‘, instance);
	})
	</script>
	</body>
</html>

这是一个简单的小例子。是官网中一个demo的简化版，在学习了网上的教程之后，给官网的例子加了自己的注释。

给元素加连接点，给连接点加连接线，给连接线加各种装饰。需要的样式，canvas和SVG中都有，需要的动作，就是拖动。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jsPlumb学习笔记