如何使Fabric.js中的边界框始终与线条（含非垂直/水平）对齐？

Fabric.js默认的边界框是轴对齐包围盒（AABB），所以非水平/垂直线条的边界框会占据更大区域。目前没有内置选项直接让边界框沿线条方向，但可以通过扩展fabric.Line类、重写核心方法来实现。

核心思路 #

自定义计算沿线条方向的方向包围盒（OBB），替换默认的轴对齐坐标，同时适配选择、碰撞检测等交互逻辑。

实现步骤 #

1. 重写setCoords方法：该方法负责计算对象的边界坐标点，我们需要生成沿线条方向的四个边界点并替换默认值。
2. 重写containsPoint方法：适配新的边界框逻辑，确保点选判断符合预期。

代码示例 #

// 扩展fabric.Line类，自定义边界框计算
fabric.Line.prototype.setCoords = function() {
  // 先执行父类的默认逻辑
  this.callSuper('setCoords');
  
  // 获取线条旋转后的实际起点和终点（基于中心原点计算）
  const p1 = this.calcPointByOrigin(this.x1, this.y1, 'center', 'center');
  const p2 = this.calcPointByOrigin(this.x2, this.y2, 'center', 'center');
  
  // 计算线条的方向向量和长度
  const dx = p2.x - p1.x;
  const dy = p2.y - p1.y;
  const lineLength = Math.sqrt(dx * dx + dy * dy);
  const halfStrokeWidth = this.strokeWidth / 2;
  
  // 计算垂直于线条的单位向量（用于扩展出边界框的厚度）
  const perpDx = -dy / lineLength;
  const perpDy = dx / lineLength;
  
  // 生成沿线条方向的四个边界点
  this.oCoords.tl = new fabric.Point(p1.x + perpDx * halfStrokeWidth, p1.y + perpDy * halfStrokeWidth);
  this.oCoords.tr = new fabric.Point(p2.x + perpDx * halfStrokeWidth, p2.y + perpDy * halfStrokeWidth);
  this.oCoords.br = new fabric.Point(p2.x - perpDx * halfStrokeWidth, p2.y - perpDy * halfStrokeWidth);
  this.oCoords.bl = new fabric.Point(p1.x - perpDx * halfStrokeWidth, p1.y - perpDy * halfStrokeWidth);
  
  // 更新控制手柄的位置，保持交互逻辑一致
  this.setControlPointsCoords();
};

// 重写点选判断逻辑，基于点到线条的距离
fabric.Line.prototype.containsPoint = function(point) {
  const p1 = this.calcPointByOrigin(this.x1, this.y1, 'center', 'center');
  const p2 = this.calcPointByOrigin(this.x2, this.y2, 'center', 'center');
  
  // 计算点到直线的距离公式
  const distance = Math.abs(
    (p2.y - p1.y) * point.x - (p2.x - p1.x) * point.y + p2.x * p1.y - p2.y * p1.x
  ) / Math.sqrt(Math.pow(p2.y - p1.y, 2) + Math.pow(p2.x - p1.x, 2));
  
  // 距离小于等于线条宽度的一半时，判定为选中
  return distance <= this.strokeWidth / 2;
};

注意事项 #

• 上述修改会影响所有fabric.Line实例，如果需要仅针对特定线条生效，可以创建自定义子类而非直接修改原型。
• Fabric.js的部分内置功能（如自动布局、碰撞检测）可能依赖轴对齐边界框，使用时需要额外适配这些逻辑。

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