jsplumb 绘制页面链接线

全栈程序员-站长 • 2025年11月2日下午12:15 • 未分类 • 阅读 3

最近公司打算实现通用的流程设计，对比之前公司有一套源码，发现它采用的是FlowDesign来实现的，但从晚上查找之后发现它实际上是采用了jsplumb 来实现流程绘制的，这也不难理解，毕竟jsplumb 是通用的程序，FlowDesign只能算是jsplumb的具体使用，

FlowDesign 的地址是http://flowdesign.leipi.org/

Jsplumb官网：https://jsplumbtoolkit.com

GitHub：https://github.com/sporritt/jsplumb/

jsplumb 的概念中主要分为四部分：参照jsplumb介绍的文档写的

锚(Anchor)：一个位置，放置端点的地方，相对于一个元素的来源，您不需要自己硬编码来创建它，jsPlumb提供给您各种功能，您只需要按照您的需要创建它就可以了。它没有可视化的显示，只是一个逻辑位置，可以使用锚的id来引用它，jsPlumb支持这样做，并且您可以使用坐标来表示[x,y,x方向,y方向]

端点(Endpoint )：链接的一端的可视化表示，您可以创建并可以链接他们；您可以让他们支持拖拽，或者您可以直接使用jsPlumb.connect()在创建链接时直接创建它们。

连接器(Connector)：链接两个元素的线，页面的可视化表示，jsPlumb有三种默认类型:Bezier曲线，直线，和流程图链接器，您不用去处理连接器，当您需要使用它们时，您只需要定义它们即可。

覆盖物(Overlay)：一个UI组件，是用来是用来装饰连接器，例如标签、箭头等。

参照https://segmentfault.com/a/22507 绘制的位置图来理解

jsplumb 绘制页面链接线

按照说明必须引用的文件如下：

在使用jsplumb来实现自己的示例程序如下：

<style> #diagramContainer { padding: 20px; width: 80%; height: 400px; border: 1px solid gray; background-image: url(http://p3alsaatj.bkt.clouddn.com/310_1bVYeW_grid.jpeg); background-repeat: repeat; } .item { height: 80px; width: 80px; border: 1px solid blue; float: left; } .myCssClass { color: bisque; background-color: red; } </style> </head> <body> <div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="margin-left:300px;margin-top: 100px;"></div> </div> </body> <script> //Straight:直线，Bezier :Bezier曲线,流程图链接器 Flowchart var common = { isSource:true, isTarget:true, connector: ['Bezier'], //paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//空的锚点风格 endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } } jsPlumb.ready(function(){ //添加节点 jsPlumb.addEndpoint('item_left',{achors:['Right']},common) jsPlumb.addEndpoint('item_right',{achors:['Left']},common) jsPlumb.draggable('item_left', { containment: 'parent', grid: [10, 10] }) jsPlumb.draggable('item_right') // 单点击了连接线, 似乎不怎么好用 jsPlumb.bind('click', function (conn, originalEvent) { if (confirm('确定删除所点击的链接吗？')) { jsPlumb.detach(conn) } }) }); //增加拖拽，也不怎么好用 $('.item').resizable({ resize: function (event, ui) { jsPlumb.repaint(ui.helper) } }) //jsPlumb.setContainer('adiagramContainer') </script>

显示效果如下

jsplumb 绘制页面链接线