Canvas好难，如何让研发低成本实现Web端流程图设计功能

摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言

相信大家在职场中经常会用到流程图，在互联网行业，绘制流程图不论在产品的设计阶段，还是后期优化业务流程的阶段，都有着巨大的价值。事实上，不仅是互联网行业，流程图其实广泛应用于各行各业。

比如说，银行在办理开户业务时，会有一套较为复杂的流程，中间不仅有固定的步骤，如审核材料、打印凭证等，还会有一些判断条件，如金额是否超过20万、是否需凭密码支取等，这个时候可以通过一张流程图来清晰明了地展现整个业务流：

再例如在进行新员工培训时，可能有多个部门之间的协作，那么用流程图也可以很好地帮助员工了解后续的培训步骤：

再举个例子，在互联网行业中，一个项目上线前需要进行完整的测试，测试分为很多类型，如黑盒、白盒、冒烟测试等，按照步骤进行，还要生成对应的测试报告。如果其中某一步测试不通过，需要通知研发修改bug，并重新测试，下面的流程图就可以非常清晰地展现研发、产品和测试相互合作的过程：

之所以有这么多的行业都在使用流程图，是因为它具备以下几点好处：

1. 让复杂的过程易于理解。

2. 方便识别业务瓶颈，改进现有流程。

3. 容易向其他人解释业务。

而SreadJS（本公司产品，一款前端在线Excel表格）也支持插入流程图，但是有时候我们并不想自己去绘制流程图，而是希望根据某种数据结构自动生成一个流程图，而这个数据可以在服务端自动拼接好，也可以直接是其他三方服务的数据。将数据发送到前端后，自动生成一个流程图，如果对流程图做出一定的修改，数据也跟着变动，这样流程图的数据也可以保存下来，方便下次使用。

假定我们目前有一个这样的数据结构（省略部分数据）。

其中elements数组保存了所有的流程，id为流程的唯一id值；text代表流程框中的文本；type代表是普通流程的矩形框还是决策型的菱形框；process代表当前流程的进展，分为未开始、进行中和已完成，默认为未开始；width和height代表形状的宽高，可以不写。

edge数组则包含了各个流程中间的连接关系，表现在流程图中就是箭头从source指向target，其中flag代表在决策型流程中的结果。

最终想要在SpreadJS中生成这样一个流程图：

那么如何才能实现这样的效果呢？我认为大致需要做以下几个工作：

1. 根据elements的信息，向SpreadJS插入所有流程图形状

2. 根据edge的连线关系，将各个形状摆放到正确的位置

3. 创建形状之间的连线

4. 添加监听，当流程发生变化时，动态地改变数据

实现步骤

接下来就讲一下以上四个步骤具体如何实现。

1. 根据elements的信息，向SpreadJS插入所有流程图形状

这一步比较简单，无非就是遍历elements，并向当前的sheet插入形状：

我们通过数据中的信息来修改shape的样式，包括宽高以及背景色。

这里我们可以将id挂在shape上，后续方便通过id找到对应的形状或者数据model。

另外，读者可以注意到我在数据model上挂载了两个函数，分别为next和prev，这是为了方便寻找流程的下一级或者上一级，后续会经常用到这两个函数。

这样处理后，SpreadJS中的形状就已经生成好了：

2. 根据edge的连线关系，将各个形状摆放到正确的位置

这一步是比较困难的，假设我们的流程图是由左向右扩展的，那么横坐标（x方向）的位置是很好确定的，每深入一级，横坐标向右移动即可，困难的在于纵坐标（y方向）的位置计算，我这里抛砖引玉，如果大家有更好的算法，可以在评论区分享~

大致思路如下：请看下图的结构，左右两图中，B、C两节点距离A的纵向位置是不同的，这是因为左图的B节点拥有更多的子节点，而右图则较少，所以左侧在纵向需要拉开更多的距离，以摆放后续的节点。

当然，这里并不是单指子节点数量的多少，而是要看他们所占据的高度，也就是兄弟节点的数量。所以在代码中，我们需要递归计算一个节点后续的高度值：

其中hasCountMax值是为了预防节点循环的情况，比如A→B→A，代码中还有类似的处理。

得到节点的高度值后，就可以计算位置了，这个高度值越大，它离父级节点的纵向距离就越远，当然这里还要考虑当前节点占据兄弟节点的第几个，以及父级、兄弟节点的高度情况：

最后的代码可以看到这里也是一个递归计算，需要计算每一个节点下一级的位置。

3. 创建形状之间的连线

这一步的思路有一点小复杂，但是实现起来比较简单。

难点主要在于确定连接点的位置。矩形和菱形都有4个连接点，在下图中，左2连接右2并不是最好的连接方式，我们希望是以下三种方式：左2右1、左3右1、左3右0 ，所以我们就需要根据两个形状的位置关系来确定连接点。

这里要用到一点初高中的数学知识，我们要计算从起始形状到目标形状中心位置的连线，与横轴夹角的正弦值来确定连接点：

这里一共有12种情况，不做一一赘述。

决策图的连线还要标明“是”和“否”两种不同的情况，计算连线的中心点并插入形状即可：

4. 添加监听，当流程图发生变化时，动态地改变数据

因为用户可以随时拖动流程图，而流程图的变化属性大致有以下几种：位置、长宽、文字属性，我们要将他们最新的值记录下来，方便下次还原。另外，当位置和长宽变化时，连线也会自动更新，我们需要更新上文提到的“是”和“否”的文字的位置，这里用到了防抖模式以提升性能。

另外，我还在设计器中添加了一些新菜单，可以对流程的状态进行修改，也可以将流程图导出为图片，或打印流程图的数据model等，感兴趣的读者可以在源码中自行查看实现方式。

这里展示一下修改流程图后，数据同步修改的功能，我们以“换货”举例，默认状态下，换货的数据是这样的：

我们通过上方的按钮调整换货为已完成，修改文本，并且移动它的位置，改变其宽高后：

可以看到，表示其状态的process已经从1（进行中）变成了2（已完成），宽高、位置、文本也有相应的变化。

结语：

流程图是一种非常有用，也很常用的工具，结合SpreadJS，你可以比较方便的实现动态生成流程图的功能，在这个demo的基础上，你还可以添加右键新增子级、新增兄弟级元素等功能，借助SpreadJS丰富、开放的Api，你可以非常灵活地实现你要的功能。

最后，希望这篇文章能对你有帮助~

源码地址：

https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=Mjg0MjY2fDg4YjJmMDRlfDE2OTA4NzU1NTN8ODE2MDZ8MTc5NzE0

扩展链接：

Spring Boot框架下实现Excel服务端导入导出

项目实战：在线报价采购系统（React +SpreadJS+Echarts）

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计