如何实现元素间连接线的桌面端落地及移动端适配方案

需求拆解 #

• 第一阶段目标：落地桌面端版本的元素连通效果，完成多节点间的平滑连接线渲染
• 第二阶段目标：完成移动端版本适配，在竖屏纵向节点布局下实现预期的视觉连接线效果，消除布局错位、路径溢出问题

核心待解决难点：桌面端横向布局的连接线逻辑无法直接复用至移动端纵向堆叠布局，需要增加适配层做逻辑切换

桌面端实现思路 #

• 渲染层选型：优先采用全局SVG覆盖层实现连接线绘制，不需要引入重型可视化库。将SVG设置为和节点容器同尺寸、绝对定位叠放在节点层下方、背景层上方，不干扰原有文档流布局
• 位置监听方案：使用ResizeObserver API监听所有连通节点的尺寸、位置变化，替代老旧的全局窗口resize监听，降低无效计算开销
• 路径绘制逻辑：
  1. 每次重绘时获取所有相邻连通节点的边缘坐标（取左节点右侧中点、右节点左侧中点作为路径端点）
  2. 用三次贝塞尔曲线生成平滑路径，将两个端点的控制点设置为沿水平方向偏移两节点间距1/2的位置，实现柔和的过渡曲率，避免硬折线的生硬观感
  3. 连接线配置为统一粗细的淡色描边、无填充，可根据节点层级调整描边透明度区分视觉优先级
• 触发时机覆盖：在容器尺寸变化、节点动态增删的场景下主动触发路径重绘，避免出现连线位置错位

移动端适配核心方案 #

• 布局逻辑切换：触发移动端断点时，将原本横向排布的节点改为纵向垂直堆叠，节点宽度撑满内容容器，适配竖屏的有限显示空间
• 连线逻辑切换：复用原有SVG渲染层，在断点切换时重置路径取点规则——将原本横向连接的端点坐标，改为取上方节点下边缘中点、下方节点上边缘中点作为纵向连接的端点
• 路径适配：纵向场景下贝塞尔曲线的控制点调整为沿垂直方向偏移两节点间距1/2的位置，避免横向曲率的路径在窄屏下溢出容器
• 性能优化：移动端场景下对滚动事件做节流处理，滚动结束后再触发一次路径重绘，避免高频重绘导致低端机渲染卡顿
• 边界校验：每次生成路径时做容器可视区域裁剪，杜绝连接线超出屏幕边界的错位问题

可复用优化点：将路径计算、重绘逻辑封装为独立的适配层方法，同时接收横向/纵向两种布局的参数配置，不需要分别维护两套连线代码

内容的提问来源于stack exchange，提问作者Mark James