如何在Fabric.js中设置画布原点为左下角并修复选择框异常？

我之前也碰到过一模一样的问题——用setViewportTransform把原点改到左下角后，元素显示倒是正常，但旋转时选择框的方向完全反了。这是因为Fabric.js的控件（包括旋转手柄）是基于默认的左上角原点设计的，视口变换只影响了元素渲染，没同步更新控件的交互逻辑。下面是一套完整的解决方案：

1. 正确设置视口变换 #

这一步你已经完成了，但要确保后续交互逻辑跟上这个变换：

const canvas = new fabric.Canvas('canvas');
const canvasHeight = canvas.getHeight();

// 视口变换矩阵：[水平缩放, 水平倾斜, 垂直倾斜, 垂直缩放, 水平平移, 垂直平移]
// 垂直缩放设为-1实现Y轴翻转，垂直平移设为画布高度将原点移到左下角
canvas.setViewportTransform([1, 0, 0, -1, 0, canvasHeight]);

2. 修正鼠标坐标转换 #

Fabric.js的所有交互都依赖鼠标坐标，我们需要重写getPointer方法，让鼠标坐标适配新的左下角原点：

// 先保存原始方法，避免完全覆盖原生逻辑
const originalGetPointer = canvas.getPointer;
canvas.getPointer = function(event, ignoreZoom) {
  const pointer = originalGetPointer.call(this, event, ignoreZoom);
  // 将鼠标Y坐标转换为左下角原点的坐标体系
  pointer.y = this.getHeight() - pointer.y;
  return pointer;
};

3. 调整旋转角度计算逻辑 #

因为Y轴翻转了，旋转角度的计算需要反过来，否则旋转手柄的方向会完全错误。我们可以重写对象的旋转角度获取方法：

fabric.Object.prototype._getRotateAngle = function(eventData) {
  const center = this.getCenterPoint();
  const mousePoint = canvas.getPointer(eventData, true);
  // 基于转换后的鼠标坐标计算角度，再取反适配Fabric的旋转逻辑
  const angle = fabric.util.radiansToDegrees(
    Math.atan2(mousePoint.y - center.y, mousePoint.x - center.x)
  );
  return -angle;
};

4. 适配原有坐标习惯（可选） #

如果还是习惯用左上角的坐标体系创建元素，可以加个工具函数转换top属性：

function addObjectFromTopOrigin(obj) {
  // 将左上角的top值转换为左下角原点对应的top值
  obj.top = canvas.getHeight() - obj.top - obj.height;
  canvas.add(obj);
}

// 使用示例：创建一个左上角(100,100)的矩形
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red'
});
addObjectFromTopOrigin(rect);

这样设置后，元素渲染、选择框旋转方向都会完全符合左下角原点的预期。

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