效果图如下：
流程节点类型：
1.普通节点
2.分支节点
难点：
1.数据结构定义
2.节点有序渲染
3.分支节点渲染
数据结构：
flowNodesMap：节点映射对象；(以节点id为关键字存储节点数据)
startNodeId ：起始节点Id ；（方便从映射对象中找出起始节点数据）
本文介绍了流程图的渲染实现，重点讨论了数据结构定义、节点有序渲染和分支节点渲染的难点。流程图节点包括普通节点和分支节点，数据结构以节点id为关键字存储，包含nextId和preId属性。通过getSameLevelIds方法生成有序数组，并使用renderNodes遍历渲染。分支节点的渲染关键在于获取并渲染所有一级条件节点。组件样式自定义，整体结构由节点块和链接线构成。渲染策略是按节点映射排列纵向节点，对于分支节点，从条件节点开始循环调用renderNode实现分支渲染。
最低0.47元/天 解锁文章
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
