二三维拓扑图卡顿？试试 HT 渲染优化方案

拓扑图作为抽象化的关系表达工具以节点与连线为核心元素可直观呈现各领域复杂系统的关联网络清晰揭示系统内部结构、层级依赖与业务逻辑为系统理解、运行管理及结构优化提供可视化支撑。基础拓扑仅通过节点与连线可表达基础连接关系但视觉上无法直观呈现连接类型、数据流向、业务属性等扩展信息。因此在实际工程应用中需通过图标、文本、标注等形式对连线信息进行增强表达完整呈现系统运行逻辑与实时状态。系统分析01连线信息显示实现方式在 HT 可视化框架中节点与连线分别通过 ht.Node 与 ht.Edge 对象进行建模。针对连线信息展示需求平台提供多种标准化实现方式。基础文本标注label 属性用于在连线对象上直接显示文本信息是最常用的文本标注方式。edge.s(label, 文本信息);note 属性以气泡提示形式呈现附加说明常用于状态标注、简要提示等场景。edge.s(note, 文本信息);图标与复合信息显示如需在连线上显示图标或更为复杂的文本信息时如状态图标、数据流向符号通常可以使用连线上的 icons 属性表示。edge.s({ arrow: { position: 17, keepOrien: true, names: [ symbols/拓扑图/arrow.json ] } });除此之外当连线信息内容较多的情况还可以选择直接在页面中添加图标节点来展示信息这类节点可通过 node.setHost(edge) 吸附在对应连线上。02 大规模拓扑性能影响分析在大型系统可视化场景中大量文本、图标及自定义节点的叠加显示会带来渲染负载提升过多绘制元素增加画布绘制压力导致交互卡顿、帧率下降。信息密度过载视图元素过于密集关键信息难以辨识影响可视化可读性与决策效率。针对上述问题HT 拓扑缩放自适应渲染方案根据视图缩放程度动态控制非必要元素的显隐平衡信息完整性与渲染性能。拓扑图渲染实现方案01 场景缩放控制元素显隐对于大图纸用户通常需要放大到一定程度才能看清连线 / 节点的详细信息。因此可设置当图纸缩放值大于某个阈值时才展示 label/note/icons 内容。在 HT 的视图组件 ht.graph.GraphView2D 图纸和 ht.graph3d.Graph3dView3D 场景中提供了 isNoteVisible 和 isLabelVisible 方法用于控制 label 与 note 的显示逻辑。Label 与 Note 动态控制在 2D 图纸中默认当图纸缩放值zoom小于 0.15 时会自动隐藏所有 label 和 note。如需自定义逻辑可重写这两个方法。view.isLabelVisible function (data) { return this.getZoom() 1; };Icons 动态控制通过监听画布缩放事件动态控制图标可见性减少非必要渲染。view.mp(e { if (e.property zoom) { const visible e.newValue 1; if (visible ! g2d._iconVisible) { g2d._iconVisible visible; g2d.dm().toDatas().each(data { if (data.s(icons)) { for (let key in data.s(icons)) { data.s(icons)[key].visible visible; } data.iv(); } }); } } });02 基于图层管理的批量控制在某些特殊场景下如附加信息图标需显示在非常规位置标准方式无法满足需求可采用更灵活的方案直接将 ht.Node 放置在连线附近并可设置吸附于连线目标 / 起始节点。node.setHost(target/source)对此类附加信息节点同样可根据缩放程度控制显示实现步骤如下创建自定义图层const layer g2d.getLayers(); layer.push({ name: newLayer, visible: true, selectable: true, movable: true, editable: true });绑定附加信息节点至图层node.setLayer(newLayer);根据缩放控制图层可见g2d.mp(e { if (e.property zoom) { const visible e.newValue 1; if (visible ! g2d._layerVisible) { g2d._layerVisible visible; const layer g2d.getLayers(); layer[1].visible visible; } } });03 海量连线优化ht.Shape 合并渲染在存在大量连线的场景中过多 ht.Edge 实例会显著降低渲染效率。可通过 ht.Shape 对象合并多条连线路径统一渲染以提升帧率与交互流畅度。■实现逻辑遍历数据模型筛选所有连线对象提取各连线起点、拐点与终点坐标构建统一路径并赋值给 ht.Shape隐藏原连线使用 Shape 替代渲染。■核心代码// 过滤数据模型获取所有 edges const edges dm.toDatas((d) { return d.getClassName() ht.Edge }) // 创建 ht.Shape 节点 const shape new ht.Shape(); let points []; let segments []; let edgeColor edges.get(0).s(edge.color), edgeWidth edges.get(0).s(edge.width); // 遍历所有的 edge获取点位信息 edges.each((edge) { const edgeInfo view.getEdgeInfo(edge); if (!edgeInfo) return; let edgePoints []; edgePoints.push(edgeInfo.sourcePoint); if (edgeInfo.points) { edgePoints edgePoints.concat(edgeInfo.points.toArray()); } edgePoints.push(edgeInfo.targetPoint); points points.concat(edgePoints); edgePoints.forEach((item, i) { segments.push(i 0 ? 1 : 2); }) edge.s(2d.visible, false) // 将 edge 设置为不可见 }) // 设置 shape 的点位和样式 shape.setPoints(points) shape.setSegments(segments); shape.s({ shape.background: null, shape.border.width: edgeWidth, shape.border.color: edgeColor }) dm.add(shape);■性能对比在约 2048 条连线的测试场景中合并渲染可显著提升高密连线场景下的运行性能。左为 ht.Shape | 右为 ht.Edge总结本文介绍了 HT 平台下拓扑图连线信息的标准化展示方案以及针对大规模拓扑场景的性能优化策略基础信息可通过 label、note 快速实现文本标注复杂图标与流向信息可通过 icons 或自定义节点扩展大规模视图采用自适应缩放渲染根据缩放动态控制元素与图层显隐海量连线场景使用 ht.Shape 合并路径降低实例数量提升渲染效率。实际开发中可结合项目业务需求、视图复杂度与性能指标灵活选用或组合使用上述方案实现可视化效果与运行效率的最优平衡。