托盘装箱应用中奇数尺寸Box的Snap to Grid对齐问题

这个问题我之前做仓储排布类工具时也碰到过，固定死50的网格步长确实没法灵活适配像50×110这种非50整数倍的Box尺寸，要么留间隙要么重叠。给你几个针对性的解决思路：

1. 动态计算网格步长（基于Box尺寸的最大公约数） #

既然固定步长不行，那就让网格跟着当前用的Box尺寸走。核心思路是计算当前Box宽高的最大公约数（GCD），把这个数值作为新的网格步长。比如50和110的GCD是10，用10作为步长的话：

• 50的Box可以完美对齐到10的倍数（50=10×5）
• 110的Box也能刚好贴合（110=10×11）
• 用户操作起来也不会太繁琐，10的步长比50精细但也足够好控制

举个简单的代码示例（以JavaScript为例）：

// 计算最大公约数的函数
function gcd(a, b) {
  return b === 0 ? a : gcd(b, a % b);
}

// 获取当前Box的宽高
const boxWidth = 50;
const boxHeight = 110;
const snapStep = gcd(boxWidth, boxHeight); // 得到10

// 鼠标位置取整到最近的snapStep倍数
function snapToGrid(pos) {
  return Math.round(pos / snapStep) * snapStep;
}

这个方案特别适合同批次使用同尺寸Box的场景，能保证排布时既对齐又无间隙重叠。

2. 基于边缘的智能吸附（替代固定网格） #

如果你的场景里经常混用多种不同尺寸的Box，那固定网格不管怎么调都有局限。这时候可以换成边缘吸附逻辑：

• 记录所有已放置Box的边缘坐标（上下左右四个边的位置）
• 当用户拖动当前Box时，实时计算当前Box的边缘与其他Box边缘的距离
• 当距离小于一个小阈值（比如5px）时，自动把当前Box的边缘吸附到对应位置

这种方式完全摆脱了固定网格的限制，不管Box尺寸是多少，都能让相邻Box完美贴合，从根源上解决重叠和间隙问题。唯一需要注意的是，当场景里Box很多时，要优化边缘检测的性能，避免卡顿。

3. 混合模式：固定网格+边缘吸附（兼顾便捷性和精度） #

如果不想完全放弃网格的便捷性，可以把两种方式结合起来：

• 默认用一个适中的固定步长（比如20）做基础网格对齐，让用户能快速大致排布
• 同时开启边缘吸附，当用户拖动Box靠近其他Box边缘时，优先触发边缘吸附，保证贴合精度

这种模式既能让用户快速上手，又能处理非标准尺寸的贴合需求，是比较通用的折中方案。

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