本文介绍了从零开始画DAG作业依赖图的方法，重点讲述了直线、曲线和折线三种连线方式。其中，直线方式适用于节点较少的情况，而折线方式能有效规避节点并充分利用空间，适合节点较多的场景。具体实现中，通过节点排序和避免线条重叠，实现了简单有效的折线连接。此方法虽不能解决所有复杂情况，但为后续优化路径寻找提供了基础。
概述
分层布局弄好之后，每一层的节点上下的相对位置基本确定了，我们最简单的方式，就是每一层平铺所有节点，节点宽度固定以及间距固定，每个节点的位置基本就确定了。我们只要基于这些节点进行连线就可以了。
方案思路
直线方式
最简单的方式就是直线，我们只要确定两个节点之间的相对具体坐标，然后两点之间画一条直线就可以了。效果如下
从上图可以看出，直线实现起来是比较简单的，但是节点很少的情况，还是可以勉强可以接受的，如果节点太多，线条复杂，基本没办法看了，效果不是很好。
曲线方式
曲线是比较常见的方式，这里可以用3次贝塞尔曲线或者2次贝塞尔曲线，算好相应的控制点即可。但是这些控制点不是很好算，并且通用的一些控制点，在一些复杂情况下，展示的效果也不是很好，这里也没打算使用这个。
折线方式
就是通过折线，曼哈顿的方式，在空白的地方进行拐点，进行连线，这种方式可以很好利用空间，并且可以规避节点，不会出现 线和节点的相互遮盖，这里我就采用了这种方式。由于我们的业务场景，节点比较多，并且层级不是很多，这里我投机采用了一种比较简单的方式来画这个折线。首先看下效果
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
