求绘制90度转角连接线的算法（元素移动时保持角度）

这类需求对应的是正交路由（Orthogonal Routing）算法，是流程图、ER图（如dbdiagram.io）等场景中常用的连线方案，完全满足你描述的“仅90度转角、元素移动时自动调整路径”的要求。

一、基础实现思路（无障碍物场景） #

如果画布中没有其他元素遮挡，无需复杂搜索，用简单的两步逻辑就能生成符合要求的连线：

• 确定连接锚点：为两个元素分别选择最合适的边缘点（比如边缘中点，或距离对方最近的边缘位置），作为连线的起点和终点。
• 生成正交路径：采用“先对齐某一轴，再对齐另一轴”的策略，比如先将起点水平移动到与终点同X轴（或同Y轴）的位置，再垂直（或水平）移动到终点，自然形成一个90度转角的路径；也可以根据元素的相对位置，选择转角更少、视觉更简洁的路径方向。

二、网格+A*算法的可行性（有障碍物场景） #

如果需要避开画布中的其他元素（障碍物），用网格结合A*算法是非常可靠的实现方案，具体逻辑如下：

1. 网格抽象：将画布划分为均匀的网格单元，把元素占据的网格标记为不可通行区域。
2. A*路径搜索配置：
   • 移动方向限制为上下左右四个正交方向，确保路径仅包含水平/垂直线段。
   • 启发函数使用曼哈顿距离（仅计算水平+垂直方向的距离），既符合正交路径的移动规则，又能保证A*搜索到最优路径。
3. 路径优化：A*搜索得到的路径可能包含连续的同方向线段，可以将这些线段合并，减少不必要的转角，让连线更简洁（类似dbdiagram.io中常见的1-2个转角的样式）。

三、动态调整的实现要点 #

当元素位置变化时，只需重新执行以下步骤即可更新连线：

• 重新计算两个元素的连接锚点；
• 根据是否存在障碍物，选择使用简单正交路径生成或A*网格搜索，得到新的90度转角路径；
• 重绘连线。

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