Fabric JS：如何通过左上角与右下角两点程序化创建矩形？

当然可以通过左上角和右下角两点来创建Fabric.js的矩形！不过要先说明：aCoords是Fabric对象创建完成后才会生成的边界框属性，没法直接用它来初始化矩形。但我们可以通过这两个点的坐标，计算出Fabric.Rect需要的left、top、width、height参数，甚至封装成工具函数来简化操作。

方法一：手动计算参数创建 #

Fabric.Rect的left对应矩形左上角的x坐标，top对应左上角的y坐标，width和height则是矩形的宽高。如果我们有左上角点(x1, y1)和右下角点(x2, y2)，只需要做简单的计算：

• left = 取x1和x2中的较小值（确保是左上角的x）
• top = 取y1和y2中的较小值（确保是左上角的y）
• width = 两个x坐标的绝对值差
• height = 两个y坐标的绝对值差

示例代码：

// 假设左上角点(30, 40)，右下角点(100, 150)
const topLeft = { x: 30, y: 40 };
const bottomRight = { x: 100, y: 150 };

const rect = new fabric.Rect({
  left: Math.min(topLeft.x, bottomRight.x),
  top: Math.min(topLeft.y, bottomRight.y),
  width: Math.abs(bottomRight.x - topLeft.x),
  height: Math.abs(bottomRight.y - topLeft.y),
  fill: 'rgba(255,127,39,1)'
});

方法二：封装工具函数简化操作 #

如果需要频繁用两点创建矩形，可以封装一个工具函数，避免重复计算：

function createRectFromTwoPoints(point1, point2, options = {}) {
  const left = Math.min(point1.x, point2.x);
  const top = Math.min(point1.y, point2.y);
  const width = Math.abs(point2.x - point1.x);
  const height = Math.abs(point2.y - point1.y);
  
  return new fabric.Rect({
    left,
    top,
    width,
    height,
    ...options // 可以传入fill、stroke等自定义配置
  });
}

// 使用示例
const myRect = createRectFromTwoPoints(
  { x: 50, y: 50 },
  { x: 150, y: 120 },
  { fill: 'blue', stroke: 'black', strokeWidth: 2 }
);

这样不管两点是左上角+右下角，还是任意对角组合，函数都能正确生成矩形。创建完成后，你可以通过myRect.aCoords查看自动生成的边界框坐标，其中tl就是左上角，br就是右下角，和你传入的点完全对应。

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