网页的设计流程图 第1篇
这一步的思路有一点小复杂，但是实现起来比较简单。
难点主要在于确定连接点的位置。矩形和菱形都有4个连接点，在下图中，左2连接右2并不是最好的连接方式，我们希望是以下三种方式：左2右1、左3右1、左3右0 ，所以我们就需要根据两个形状的位置关系来确定连接点。
这里要用到一点初高中的数学知识，我们要计算从起始形状到目标形状中心位置的连线，与横轴夹角的正弦值来确定连接点：
这里一共有12种情况，不做一一赘述。
决策图的连线还要标明“是”和“否”两种不同的情况，计算连线的中心点并插入形状即可：
网页的设计流程图 第2篇
这一步比较简单，无非就是遍历elements，并向当前的sheet插入形状：
我们通过数据中的信息来修改shape的样式，包括宽高以及背景色。
这里我们可以将id挂在shape上，后续方便通过id找到对应的形状或者数据model。
另外，读者可以注意到我在数据model上挂载了两个函数，分别为next和prev，这是为了方便寻找流程的下一级或者上一级，后续会经常用到这两个函数。
这样处理后，SpreadJS中的形状就已经生成好了：
网页的设计流程图 第3篇
因为用户可以随时拖动流程图，而流程图的变化属性大致有以下几种：位置、长宽、文字属性，我们要将他们最新的值记录下来，方便下次还原。另外，当位置和长宽变化时，连线也会自动更新，我们需要更新上文提到的“是”和“否”的文字的位置，这里用到了防抖模式以提升性能。
另外，我还在设计器中添加了一些新菜单，可以对流程的状态进行修改，也可以将流程图导出为图片，或打印流程图的数据model等，感兴趣的读者可以在源码中自行查看实现方式。
这里展示一下修改流程图后，数据同步修改的功能，我们以“换货”举例，默认状态下，换货的数据是这样的：
我们通过上方的按钮调整换货为已完成，修改文本，并且移动它的位置，改变其宽高后：
可以看到，表示其状态的process已经从1（进行中）变成了2（已完成），宽高、位置、文本也有相应的变化。
流程图是一种非常有用，也很常用的工具，结合SpreadJS，你可以比较方便的实现动态生成流程图的功能，在这个demo的基础上，你还可以添加右键新增子级、新增兄弟级元素等功能，借助SpreadJS丰富、开放的Api，你可以非常灵活地实现你要的功能。
最后，希望这篇文章能对你有帮助~
源码地址：
扩展链接：