利用jsplumb画流程图

最新推荐文章于 2024-08-17 23:14:52 发布

一个不靠谱的程序员

最新推荐文章于 2024-08-17 23:14:52 发布

阅读量1.6w

点赞数 2

分类专栏： jsplumb 文章标签：技术 jsplumb 流程图

本文链接：https://blog.csdn.net/u013705066/article/details/53740327

版权

在项目中选择jsplumb.js作为流程审批系统的绘图工具，因其丰富的API和社区支持。通过创建节点和连线表来存储数据，前端使用vue结合数据库数据循环展示。流程图关键在于节点和连线，已实现从数据库获取并利用jsplumb在画布上绘制。

摘要由CSDN通过智能技术生成

最近根据项目的需求，需要做一个流程审批系统。经过对各个绘制流程图的代码对比，最终选用了jsplumb.js来做。因为该JS有完整的API介绍并且提供付费版的技术支持。因为项目初期并不需要用到过多的toolkit版的功能，因此暂时用的是社区版进行开发。

我在用这个绘制流程图的时候，觉得一个流程图里就两个要素，一个是节点，一个是连线，也就是jsplumb里所谓的connector。因此在建数据库的时候建了两张表，分别保存节点和线。

以下是封装的flowchart.js

/**
 * [Flowchart 根据需求对流程图的封装]
 * 依赖jquery.js
 * @method Flowchart
 * @param  {[array]}  node [description]
 * @param  {[array]}  line [description]
 */
function Flowchart(node , line){
   
    //流程图的节点图
    this.node = node;
    //流程图的线
    this.line = line;
}

Flowchart.prototype = {
    constructor : Flowchart,
    instance : jsPlumb.getInstance({
        DragOptions: { cursor: 'pointer', zIndex: 2000 },
        ConnectionOverlays: [
            [ "Arrow", {
  //箭头的样式
                location: 1,
                visible:true,
                width:11,
                length:11,
                id:"ARROW",
            }],
            [ "Label", {
  //连线上的label
                location: 0.4,
                id: "label",
                cssClass: "aLabel",
            }]
        ],
        Container: "canvas" //画布容器
    }),
    config : {
        nodeName : 'LCTNODE',//对应html里节点的ID前缀
        elementName : 'node',
        editable : false,
        sourceEndpoint : {
            endpoint: "Dot",
            paintStyle: {
                //stroke: "#7AB02C",
                fill: "transparent",
                radius: 7,
                strokeWidth: 1
            },
            isSource: true,
            connector: [ "Flowchart", {
                stub: [40, 60],
                //gap: 10,
                cornerRadius: 5,//连线的弯曲度
                alwaysRespectStubs: true
            } ],//流程图的线
            connectorStyle: {
                strokeWidth: 2,
                stroke: "#61B7CF",
                joinstyle: "round",
                outlineStroke: "white",
                outlineWidth: 5
            },
            connectorHoverStyle: {