前言

各位路过的看官,且慢一步,容我与你分享下流程图绘制库的制作过程。 移步此处查看demo示例:演示地址 源代码

背景

  • 为什么需要重新开发?
    • 业务需求(没有买卖就没有杀害 o(╥﹏╥)o )
    • 强大的go.js可以完美的制作流程图功能,受限于其license,只能舍弃
    • G6库也十分强大,曾以G6为底层开发过一版,但是在绘制节点之间连线时,无法做到自由配置,导致功能跟不上需求,也放弃了

目标

  • 明确目标:这个库需要完成哪些功能?
    • 需要有开始/结束、步骤、判断,连线,这几个流程图的基础节点
    • 给定一组数据,能正常的展示出流程图
    • 流程图需要可编辑:增删节点,自由定位

分析

  • 节点如何绘制?
    • 节点是由一系列基础图形组合而来
    • 比如说要绘制开始节点,那它是由椭圆和文本这两个基础图形组合而来
    • 定义基础图形,节点的样式就可以千变万化
    • 一组基础图形就是一个节点,节点内图形的坐标相对于节点
  • 如何避免重复刷新计算?
    • 该库有显示模式与编辑模式
    • 编辑模式下存在增删节点操作,若每次操作都重绘整个画板,无疑增加计算
    • 设计两个画板,一个用来显示不常改变的节点:显示层;另一个用来绘制常刷新的节点:编辑层;这样可以节省大量计算资源
  • 节点之间连线逻辑?
    • 节点之间的连线要遵从尽量不重合、不相交
    • 当前使用的逻辑是:将节点用长方形包裹,有四个面,从开始节点到结束节点,有4 * 4条绘制逻辑

实现

  • 提供全局方法注册自定义节点,在此可以定义任何你想绘制的图形,在后面使用只需要提供这个图形的名称及配置信息
  • 创建编辑器实例,此时会初始化内部的渲染引擎,ID管理器,节点管理器,事件分发中心
    • 渲染引擎:真正在面板上绘制图形,依据自定义图形的描述绘制
    • ID管理器:每个节点都对应的id,此ID唯一,在此生成
    • 节点管理器:管理节点的增删改操作
    • 事件分发中心:接收浏览器事件,并转化成内部处理事件,供内部消化及向外部透出

下面是:系统架构图 系统架构图

下面是:程序运行图 程序运行图

写在最后

  • 感谢各位看官耐心的看到最后
  • 这个项目的完成度还是不够,现在也只出产demo,后续还有很多需要跟进的地方
  • 本项目参考了go.js的流程图操作,参考了g6的API写法
  • 若有任何你觉得不爽的地方,欢迎指出
  • 若你任何的建议或想法,欢迎讨论
  • 附带个广告:我的小站