对齐辅助线
拖动节点时显示横向与纵向辅助线,并在接近其他节点的边缘或中心时自动吸附。
·Musein Team
对齐辅助线的作用很直接:当你在画布里拖动节点时,系统会实时判断它和周围节点之间是否接近对齐,并在需要的时候给出辅助线和吸附结果。
它不是一个单独的排版面板,而是拖拽过程中的即时反馈。你不用先打开设置,只要开始移动节点,就能看到它是否准备对齐。
Drag to trigger alignment
This preview uses the real alignment guide overlay and snapping calculation from the canvas.
No snap yet
它实际会检测什么
对齐判断不是只看一个点,而是同时检查节点的关键边界:
- 左边缘对左边缘
- 水平中心对水平中心
- 右边缘对右边缘
- 上边缘对上边缘
- 垂直中心对垂直中心
- 下边缘对下边缘
也就是说,当你把一个节点拖到“差一点就对齐”的位置时,系统会优先寻找最接近的横向和纵向匹配。
拖动时会发生什么
当匹配成立时,你会看到两类反馈:
- 纵向辅助线:说明当前节点正在和别的节点共用一条竖直对齐线
- 横向辅助线:说明当前节点正在和别的节点共用一条水平对齐线
如果横向和纵向同时接近目标,两个方向都会生效,所以一个节点可以一次对齐到完整的交叉位置,而不是只修正一个轴。
松手后会自动吸附
这个功能不只是“显示参考线”。当节点已经足够接近目标位置时,松手后会自动吸附到计算后的精确位置。
这样你不需要手动一点点微调,就能把卡片边缘或中心真正对齐。
对复杂画布有什么帮助
在节点越来越多的时候,最难的往往不是“放上去”,而是“放整齐”。对齐辅助线能减少这些重复动作:
- 做 prompt、reference、result 这类节点排布时更容易形成稳定结构
- 画布里已有锚点节点时,新节点可以快速贴齐到已有布局
- 当你只想调整一个节点的位置时,不必重新手动比对上下左右关系
如何理解这篇预览
这篇文章里的演示不是静态效果图,而是直接复用了画布里的真实辅助线 overlay 和吸附计算逻辑。你可以拖动中间那个节点,观察它靠近两侧节点时,何时出现辅助线,以及松手后如何贴到正确位置。