Fabric 4.1.0自定义控件uniScaleTransform失效，求解决办法

我碰到过类似的问题，Fabric.js 4.1.0里自定义控件确实不会自动响应canvas.uniScaleTransform的设置——因为默认控件的等比缩放逻辑是内置的，但自定义控件得你自己手动把这个规则加上去。下面是具体的解决办法：

核心原因 #

Fabric的默认角落控件会自动读取canvas的uniScaleTransform配置，自动触发等比缩放；但自定义控件的交互逻辑完全由你定义，框架不会自动帮你把这个配置关联到缩放行为上，所以必须手动处理。

解决步骤 #

1. 在自定义控件的处理函数中复用默认逻辑并添加配置检查 #

如果你的自定义控件是基于默认缩放逻辑修改的，最简单的方式是在actionHandler里先检查canvas.uniScaleTransform，强制开启等比缩放锁，再调用默认的缩放处理函数：

// 自定义角落控件的actionHandler
function customCornerActionHandler(eventData, transform, x, y) {
  // 读取canvas的uniScaleTransform配置，强制开启等比缩放
  if (transform.canvas.uniScaleTransform) {
    transform.lockUniScaling = true;
  }
  // 调用Fabric内置的角落缩放逻辑
  return fabric.util.controlsUtils.scaleWithCorners(eventData, transform, x, y);
}

然后在注册自定义控件时关联这个处理函数：

fabric.Object.prototype.controls.customCorner = new fabric.Control({
  x: 1,
  y: 1,
  offsetX: -10,
  offsetY: -10,
  actionHandler: customCornerActionHandler,
  // 其他控件样式、偏移等配置...
});

2. 完全自定义缩放逻辑时手动实现等比计算 #

如果你是从零写的缩放逻辑，那需要在计算缩放比例时主动判断canvas.uniScaleTransform，保持宽高比不变：

function customScaleHandler(eventData, transform) {
  const canvas = transform.canvas;
  const target = transform.target;
  const pointer = transform.pointer;
  const origin = transform.originPoint;

  // 记录初始缩放值（在mouseDown时保存到transform.original里）
  const initialScaleX = transform.original.scaleX;
  const initialScaleY = transform.original.scaleY;

  let scaleX = initialScaleX;
  let scaleY = initialScaleY;

  if (canvas.uniScaleTransform) {
    // 计算等比缩放比例：基于鼠标移动的距离和初始距离的比值
    const initialDist = Math.sqrt(
      Math.pow(origin.x - transform.original.left, 2) +
      Math.pow(origin.y - transform.original.top, 2)
    );
    const currentDist = Math.sqrt(
      Math.pow(pointer.x - origin.x, 2) +
      Math.pow(pointer.y - origin.y, 2)
    );
    const scaleFactor = currentDist / initialDist;

    scaleX = initialScaleX * scaleFactor;
    scaleY = initialScaleY * scaleFactor;
  } else {
    // 你的原有非等比缩放计算逻辑
    // ...
  }

  // 应用缩放结果
  target.set({ scaleX, scaleY });
}

3. 验证控件配置 #

确保你的自定义控件没有在其他逻辑中覆盖lockUniScaling的值，比如不要在mouseDownHandler里强制把它设为false，否则会抵消我们的设置。

测试验证 #

设置canvas.uniScaleTransform = true后，拖动自定义角落控件，应该不用按住shift就能实现等比缩放，和默认矩形控件的行为一致了。

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