Fabric.js中矩形块移动与缩放的边界及碰撞问题求解

核心思路 #

在矩形块的移动、缩放过程中实时拦截并校正位置与尺寸，避免操作完成后再修正导致的跳变。关键是利用Fabric.js的变换事件，在每一步变换时做边界校验和重叠检测，强制对象保持合法状态。

关键实现步骤 #

1. 画布边界校验 #

无论移动还是缩放，都要确保矩形块的四个边缘不超出画布范围：

• 左边界：left >= 0
• 上边界：top >= 0
• 右边界：left + scaledWidth <= canvas.width
• 下边界：top + scaledHeight <= canvas.height

注意缩放时要基于原始尺寸计算实际缩放后的宽高（scaledWidth = originalWidth * scaleX），同时考虑缩放锚点的偏移影响——Fabric.js的缩放是围绕锚点进行的，所以调整位置时要补偿锚点带来的位移。

2. 重叠碰撞检测 #

使用轴对齐矩形碰撞算法判断当前操作的矩形与其他矩形是否重叠：两个矩形的横向和纵向范围同时交叉即判定为重叠。如果检测到重叠，需要计算最小偏移量将当前矩形推离重叠区域，或者限制缩放尺寸避免重叠。

异常场景修复 #

问题：操作时块跳至画布外 #

• 原因：边界校验时机滞后，或缩放时未考虑锚点导致位置计算错误。
• 修复：
  • 在before:transform事件中处理（比object:moving/object:scaling更早拦截），避免变换应用后再修正。
  • 缩放时，先计算缩放后的宽高，再反向推导合法的left/top值，比如当缩放后右侧超出画布，直接将left设为canvas.width - scaledWidth，或调整scaleX限制最大宽度。

问题：块与其他块重叠 #

• 原因：重叠检测逻辑遗漏了某些场景，或使用了变换前的旧位置/尺寸。
• 修复：
  • 每次变换时，获取当前对象的实时边界（用getBoundingRect()），遍历所有其他矩形做碰撞检测。
  • 移动时：选择最小的偏移方向（横向或纵向）推离重叠对象，避免过度偏移。
  • 缩放时：限制缩放比例，确保缩放后的矩形不会侵入其他对象的空间；如果已经重叠，调整位置或回退缩放比例。

特殊尺寸处理 #

全宽/全高设置 #

给矩形添加快捷操作按钮，点击时直接设置：

// 设置全宽
function setFullWidth(rect) {
  rect.set({
    width: canvas.width,
    left: 0,
    scaleX: 1 // 重置缩放比例避免冲突
  });
  // 校验是否与其他块重叠，若重叠可提示用户或自动调整
  checkAndFixOverlap(rect);
  canvas.renderAll();
}

// 设置全高同理
function setFullHeight(rect) {
  rect.set({
    height: canvas.height,
    top: 0,
    scaleY: 1
  });
  checkAndFixOverlap(rect);
  canvas.renderAll();
}

最小单元格尺寸 #

预设最小宽高值，在缩放时强制限制：

const MIN_WIDTH = 50;
const MIN_HEIGHT = 50;

canvas.on('object:scaling', (e) => {
  const target = e.target;
  const scaledWidth = target.width * target.scaleX;
  const scaledHeight = target.height * target.scaleY;
  
  if (scaledWidth < MIN_WIDTH) {
    target.scaleX = MIN_WIDTH / target.width;
  }
  if (scaledHeight < MIN_HEIGHT) {
    target.scaleY = MIN_HEIGHT / target.height;
  }
});

关键代码片段 #

// 重叠检测工具函数
function isOverlapping(rect1, rect2) {
  return rect1.left < rect2.right && rect1.right > rect2.left &&
         rect1.top < rect2.bottom && rect1.bottom > rect2.top;
}

// 边界校正工具函数
function fixBoundary(target, canvas) {
  const scaledWidth = target.getScaledWidth();
  const scaledHeight = target.getScaledHeight();
  target.set({
    left: Math.max(0, Math.min(target.left, canvas.width - scaledWidth)),
    top: Math.max(0, Math.min(target.top, canvas.height - scaledHeight))
  });
}

// 移动事件处理
canvas.on('before:transform', (e) => {
  const target = e.target;
  if (target.type !== 'rect') return;
  
  // 先校正边界
  fixBoundary(target, canvas);
  
  // 检测并修复重叠
  const currentBounds = target.getBoundingRect();
  canvas.getObjects().forEach(obj => {
    if (obj === target || obj.type !== 'rect') return;
    const objBounds = obj.getBoundingRect();
    if (isOverlapping(currentBounds, objBounds)) {
      // 计算最小偏移量
      const dx1 = objBounds.right - currentBounds.left;
      const dx2 = currentBounds.right - objBounds.left;
      const dy1 = objBounds.bottom - currentBounds.top;
      const dy2 = currentBounds.bottom - objBounds.top;
      
      const minDx = Math.abs(dx1) < Math.abs(dx2) ? dx1 : -dx2;
      const minDy = Math.abs(dy1) < Math.abs(dy2) ? dy1 : -dy2;
      
      // 优先偏移距离更小的方向
      if (Math.abs(minDx) < Math.abs(minDy)) {
        target.left += minDx;
      } else {
        target.top += minDy;
      }
      
      // 再次校正边界，避免偏移后出界
      fixBoundary(target, canvas);
    }
  });
});

// 缩放事件处理
canvas.on('object:scaling', (e) => {
  const target = e.target;
  if (target.type !== 'rect') return;
  
  // 最小尺寸限制
  const MIN_WIDTH = 50;
  const MIN_HEIGHT = 50;
  const scaledWidth = target.width * target.scaleX;
  const scaledHeight = target.height * target.scaleY;
  
  if (scaledWidth < MIN_WIDTH) target.scaleX = MIN_WIDTH / target.width;
  if (scaledHeight < MIN_HEIGHT) target.scaleY = MIN_HEIGHT / target.height;
  
  // 校正边界
  fixBoundary(target, canvas);
  
  // 检测并修复重叠
  const currentBounds = target.getBoundingRect();
  canvas.getObjects().forEach(obj => {
    if (obj === target || obj.type !== 'rect') return;
    const objBounds = obj.getBoundingRect();
    if (isOverlapping(currentBounds, objBounds)) {
      // 右侧重叠：限制宽度到左侧对象的左边界
      if (currentBounds.right > objBounds.left && currentBounds.left < objBounds.left) {
        const maxWidth = objBounds.left - target.left;
        target.scaleX = maxWidth / target.width;
      }
      // 左侧重叠：将当前块移到右侧对象的右边界
      if (currentBounds.left < objBounds.right && currentBounds.right > objBounds.right) {
        target.left = objBounds.right;
      }
      // 上下方向同理
      if (currentBounds.bottom > objBounds.top && currentBounds.top < objBounds.top) {
        const maxHeight = objBounds.top - target.top;
        target.scaleY = maxHeight / target.height;
      }
      if (currentBounds.top < objBounds.bottom && currentBounds.bottom > objBounds.bottom) {
        target.top = objBounds.bottom;
      }
      
      // 再次校正边界
      fixBoundary(target, canvas);
    }
  });
});

注意事项 #

• 优先使用before:transform事件，它在变换应用前触发，能避免视觉上的跳变。
• 处理多对象重叠时，建议按距离排序，优先处理最近的重叠对象，避免多次偏移导致的异常。
• 全宽/全高操作时，若存在重叠对象，可选择提示用户手动移开，或实现自动调整其他对象位置的逻辑（复杂度较高）。

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