基于antv x6流程自定义设计并自适应排版

文章介绍了流程自定义功能,允许用户自定义节点并设置节点关系,包括串联和并联。支持跨层级和同层级节点插入,通过计算实现自适应排列。重点在于处理节点间的重叠问题,通过检测横轴和纵轴的重叠并进行相应调整,确保布局的合理性。
摘要由CSDN通过智能技术生成

流程自定义,此处可以自定义节点并设置节点相关信息,配置完成后可以使用于页面中,此处仅做流程设计部分演示。节点间的关系包含串联和并联,支持跨层级和同层级插入节点,计算后进行自适应排列。一级节点并联于向下排布,二级或以上节点并联节点边为左边,串联中中间连线
其中排版的要点是:

  • 每个节点会定义横轴值(层级值)、纵轴值(列值)和当前下标值(当前层级的下标值);例如,第二列的第一个一级节点,对应的值为1、2、0。
  • 查找纵向重叠节点,先获取画布已有节点,根据上述参数值,在已有节点中循环遍历是否有重叠,如重叠则重排。
  • 查找横向重叠节点,根据生成节点的定位为起点,通过getNodesInArea方法,查找范围内的重叠节点,进行重排。
    在这里插入图片描述
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值