jsPlumb学习笔记
这就是一个给元素画连接线的工具。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | <!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' //Either an element id, a DOM element, or a selector from the underlying library }); 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中都有,需要的动作,就是拖动。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步