背景
长久以来都想找一个画流程图的工具,有几个需求,可以将组件拖到绘图面板中,并且组件间可以通过线进行关联,在属性面板可以配置组件的属性,这里的组件可能是html的组件,也可能是一个功能,为什么需要这么一个东西呢?如果有这东西,很多想法就可以实现,比如工作流
服务编排
但一直找不到满意的框架,很大原因就是这些框架颜值太低,直到遇到NodeRed,NodeRed是物联网开发工具,提供可视化界面通过配置就能实现物联网程序的开发,让我感兴趣的是NodeRed可视化界面,颜值高,操作便利,简洁不花哨
因为NodeRed是开源的,也花了一段时间去研究他的代码,想把可视化工具抽离出为我所用,种种原因失败了,既然抽离不出来,能不能自己实现一个?之前从来没想过自己开发一个,但细想觉得并不难实现,可视化界面核心有两点组件的绘制
连接线的绘制
整个界面都是通过svg相关标签实现,组件的绘制相对比较简单,就是一些svg元素组合,卡在了连接线这里,因为NodeRed节点连接线操作平滑,曲线合理,一开始以为是用很复杂的算法实现的,在源码里去找这个算法,其实是把问题想复杂了,这个就是一条普通的贝塞尔曲线,既然知道了实