最近公司打算实现通用的流程设计，对比之前公司有一套源码，发现它采用的是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来实现自己的示例程序如下：
<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>显示效果如下
C#实现参考地址：http://www.cnblogs.com/sggx/p/3836432.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232093.html原文链接：https://javaforall.net
