首页 > 代码库 > jsPlumb学习笔记
jsPlumb学习笔记
自以为会了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="http://www.mamicode.com/jquery-2.1.1.js"></script> <script src="http://www.mamicode.com/jquery-ui-1.9.2.js"></script> <script src="http://www.mamicode.com/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学习笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。