Fabric.js结合手势：如何阻止超出1x-4x范围的缩放操作

我之前也踩过这个坑——想用preventDefault()和stopPropagation()阻止超出范围的缩放，结果完全没用！后来才搞明白：Fabric.js的变换（包括缩放）逻辑是在内部处理的，原生事件的阻止方法根本干涉不到它的内部流程。下面给你两种靠谱的解决方案，看你用的是Fabric原生手势还是第三方手势库：

方案一：用Fabric内置的before:transform钩子（推荐） #

Fabric提供了before:transform事件，它会在任何变换操作（缩放、旋转、平移等）执行前触发，我们可以在这里判断缩放后的倍数，直接阻止不符合要求的变换：

// 假设你的canvas实例是canvas
canvas.on('before:transform', (opt) => {
  // 获取当前画布的缩放比例
  const currentZoom = canvas.getZoom();
  // 计算这次手势操作后会达到的新比例
  const newZoom = currentZoom * opt.e.scale;

  // 检查是否超出1-4倍的范围
  if (newZoom > 4 || newZoom < 1) {
    // 返回false直接阻止后续的变换操作
    return false;
  }
});

这个方法的好处是不用管手势是怎么触发的，只要是Fabric处理的缩放，都会被这个钩子拦截，逻辑非常简洁。

方案二：第三方手势库（比如Hammer.js）的场景 #

如果你是用Hammer这类库绑定的手势，那就要在手势回调里主动控制缩放行为，而不是让手势直接驱动画布：

// 初始化Hammer实例，绑定到canvas元素
const hammer = new Hammer(canvas.getElement());
hammer.get('pinch').set({ enable: true });

hammer.on('pinch', (e) => {
  const currentZoom = canvas.getZoom();
  // 计算新的缩放比例（注意Hammer的e.scale是相对于手势开始时的比例，所以要处理一下）
  const newZoom = currentZoom * e.scale;

  // 只在范围内执行缩放
  if (newZoom >= 1 && newZoom <= 4) {
    // 以手势中心点为基准缩放画布
    canvas.zoomToPoint({ x: e.center.x, y: e.center.y }, newZoom);
    canvas.renderAll();
  }

  // 重置Hammer的scale值，避免下次手势累积错误
  e.scale = 1;
});

这里要注意每次手势结束后重置e.scale，不然下次手势会基于上一次的缩放比例计算，导致缩放异常。

为什么原生事件阻止没用？ #

简单说：Fabric的缩放不是直接依赖原生事件的默认行为，而是自己监听了手势事件后，在内部计算画布的变换矩阵，然后重新渲染。所以你阻止原生事件的默认行为，根本影响不到Fabric内部的渲染逻辑，自然没用。

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