如何解决Konva中矩形吸附为正方形时宽高意外增大的问题？

原逻辑的问题出在使用Math.max(newPos.width, newPos.height)作为正方形边长，这会强制把原本较小的维度拉升到较大值，导致宽高意外增大。

优化思路：

• 吸附时贴合用户的操作趋势：判断用户当前主要调整的是宽还是高，以此决定用对应维度作为正方形边长
• 或者直接取宽高中的较小值，彻底避免尺寸意外变大

优化后的boundBoxFunc代码：

boundBoxFunc={(oldPos, newPos) => {
  const widthChange = Math.abs(newPos.width - oldPos.width);
  const heightChange = Math.abs(newPos.height - oldPos.height);
  const sizeGap = Math.abs(newPos.width - newPos.height);

  // 3px范围内触发吸附逻辑
  if (sizeGap <= 3) {
    // 已经处于正方形状态，直接返回
    if (Math.abs(oldPos.width - oldPos.height) <= 3) {
      return newPos;
    }

    let squareSize;
    // 根据操作方向判断：调整幅度大的维度，以另一个维度为基准匹配
    if (widthChange > heightChange) {
      squareSize = newPos.height;
    } else {
      squareSize = newPos.width;
    }

    // 若要完全避免吸附时尺寸增大，可替换为以下行：
    // squareSize = Math.min(newPos.width, newPos.height);

    return {
      ...newPos,
      width: squareSize,
      height: squareSize
    };
  }
  return newPos;
}}

说明：

• 通过对比宽高的调整幅度，判断用户当前的操作意图，让吸附后的尺寸更符合预期
• 若选择用Math.min的方案，吸附后的正方形会以当前宽高中较小的那个维度为基准，彻底杜绝尺寸意外增大的情况

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