用LogicFlow实现动画边-让流程图动起来

引言

在流程图中，边（Edge） 的主要作用是连接两个节点，表示从一个节点到另一个节点的关系或流程。在业务系统中，边通常代表某种逻辑连接，比如状态转移、事件触发、任务流动等。对于复杂的流程图，边不仅仅是两点之间的连接，它还可以传递信息、约束流程的顺序，并通过不同的样式或标记来表达不同的含义。

不同的场景下，边可能需要具备丰富的样式或交互，比如箭头表示方向、虚线表示条件判断、动画表示动态效果等。因此，灵活定义和实现自定义边对于流程图的可视化设计尤为重要。

LogicFlow的边

为了灵活适配不同场景下的需求，LogicFlow的边模型是由 线条、箭头、文本、调整点五个模块组成。用户可以继承基础边类，对边的线条、箭头、文本和调整点进行自定义。

在技术实现上，LogicFlow设计了一个基础边模型BaseEdge，它定义了LogicFlow边的基本属性，如起点、终点、路径、样式等，并提供了操作这些属性的基本方法，提供逻辑处理和渲染的基础，通过继承基础边的数据类BaseEdgeModel和视图类BaseEdge，可以实现自定义边的逻辑和交互。

基础边：BaseEdge

属性方法简介

BaseEdgeModel中定义了一些核心属性，用于描述边的几何结构和样式。

属性	释义
sourceNodeId	起始节点Id
targetNodeId	目标节点Id
startPoint	起点信息，默认存储的是起始节点上连接该边锚点的坐标信息
endPoint	终点信息，默认存储的是目标节点上连接该边锚点的坐标信息
text	边文本信息，存储边上文本的内容和位置
properties	自定义属性，用于存储不同业务场景下的定制属性
pointsList	路径顶点坐标列表

围绕着这些核心属性，LogicFlow设计了支撑边运转的核心方法

方法	用途
initEdgeData	初始化边的数据和状态
setAnchors	设置边的端点，startPoint和endPoint会在这个被赋值
initPoints	设置边路径，pointsList会在这个阶段被赋值
formatText	将外部传入的文本格式化成统一的文本对象

还有一些渲染使用的样式方法

方法	用途
getEdgeStyle	设置边样式
getEdgeAnimationStyle	设置边动画
getAdjustPointStyle	设置调整点样式
getTextStyle	设置文本样式
getArrowStyle	设置箭头样式
getOutlineStyle	设置边外框样式
getTextPosition	设置文本位置

运转过程

边实例化时，数据层Model类内部会先调用initeEdgeData方法，将无需处理的属性直接存储下来，设置为监听属性然后触发setAnchors、initPoints和formatText方法，生成边起终点、路径和文本信息存储并监听。

<