对齐辅助线

拖动节点时显示横向与纵向辅助线,并在接近其他节点的边缘或中心时自动吸附。

·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 和吸附计算逻辑。你可以拖动中间那个节点,观察它靠近两侧节点时,何时出现辅助线,以及松手后如何贴到正确位置。

继续阅读