开始之前
最近有一个前端项目一个需求是实现流程图绘制，之前一直用ProcessOn画一些流程图，为这个需求决定照葫芦画瓢实现一下ProcessOn的前端。项目为了安全可控决定不使用任何关于流程图绘制的框架，所以纯手撕实现。在实现过程中学习到了很多内容，记录一下开发的过程，感兴趣的朋友可以也跟着这个系列实现自己流程图。
效果展示
-
拖拽生成节点
图片1 -
节点连线
图片2 -
寻找连接点
图片3 -
删除节点或者连线
图片4
实现技术分析
- HTML5 drag属性
- 网页元素拖拽 mousedown mousemove mouseup
- svg基础 react circle line polyline polygon path
- 简易曼哈顿路由算法(智能连线)
- CSS3 animation offeset-path 动画路径
