利用angularJs的双向绑定 绘制复杂流程图

效果如图:

Paste_Image.png

Paste_Image.png

最近需要做一个流程图, 具体实施由用户自己在app上操作.
本来准备用canvas给它画出来, 不过那样就有点复杂了.
基于angularjs 双向绑定的特性, 最终方案是选择以 数据 来绘制 图形.

由于业务比较复杂, 这里只简单介绍一下思路 和 大概的方法:

Paste_Image.png

先po一下html:

图中的节点 对应的是 一个二维数组.
横向的连接线 可以用一个数组的一个对象来确定存在与否.
斜线因为是动态的,各种角度. 这里的实现  ion-auto-connect="{{item}}". 自定义一个指令,每次在有斜线的时候, 都会进入directive来操作: 计算长度,角度,方向!然后再赋值 显示.
ion-scroll 在相关操作后需要动态给宽度, 不然就会导致意料外的换行!
一些线的连接  删除逻辑相对复杂, 以为要删除很多的相关关系, 不是单单的将节点 或者 连接线 删掉就可以了!
就这么简单介绍下了 ~ 

best wishes~