手撕 ProcessOn前端代码(一)

开始之前

最近有一个前端项目一个需求是实现流程图绘制，之前一直用ProcessOn画一些流程图，为这个需求决定照葫芦画瓢实现一下ProcessOn的前端。项目为了安全可控决定不使用任何关于流程图绘制的框架，所以纯手撕实现。在实现过程中学习到了很多内容，记录一下开发的过程，感兴趣的朋友可以也跟着这个系列实现自己流程图。

效果展示

1. 拖拽生成节点

   
   图片1

2. 节点连线

   
   图片2

3. 寻找连接点

   
   图片3

4. 删除节点或者连线

   
   图片4

实现技术分析

1. HTML5 drag属性
2. 网页元素拖拽 mousedown mousemove mouseup
3. svg基础 react circle line polyline polygon path
4. 简易曼哈顿路由算法(智能连线)
5. CSS3 animation offeset-path 动画路径