即使用自定义FabricJS构建版本也无法使用触摸手势该如何解决

基础配置修正 #

你当前手动触发touch:gesture事件本身就不会携带原生触摸参数，属于调试行为，无法验证原生手势功能，按以下步骤调整即可：

• 首先确认你使用的是FabricJS 4.0及以上稳定版本，默认已集成手势识别能力，无需额外自定义构建
• 初始化画布时新增手势相关配置项：

let fabricCanvas = new fabric.Canvas('myCanvas', {
  width: canvasContainer.current.offsetWidth,
  height: canvasContainer.current.offsetHeight,
  isDrawingMode: true,
  // 新增以下配置
  enableTouchSupport: true,
  allowTouchScrolling: false, // 阻止触摸时触发页面滚动，避免手势被浏览器拦截
  gestureEnabled: true // 开启内置手势事件识别
})

手势事件逻辑实现 #

原生触发的touch:gesture事件会自动携带触摸坐标、缩放比例、位移差等参数，按以下示例补全平移、缩放处理逻辑：

fabricCanvas.on('touch:gesture', function(e) {
  // 仅处理双指操作
  if (e.e.touches?.length !== 2) return
  // 缩放逻辑，可根据需求调整缩放范围
  if (e.scale) {
    const currentZoom = fabricCanvas.getZoom()
    const targetZoom = Math.max(0.5, Math.min(currentZoom * e.scale, 3))
    // 以双指中心点为基准缩放
    fabricCanvas.zoomToPoint(new fabric.Point(e.self.x, e.self.y), targetZoom)
  }
  // 平移逻辑
  if (e.deltaX || e.deltaY) {
    fabricCanvas.relativePan(new fabric.Point(e.deltaX, e.deltaY))
  }
})

冲突规避注意事项 #

• 若保留isDrawingMode: true的绘制需求，可额外监听触摸事件判断触点数量，双指操作时临时关闭绘制模式，手势结束后恢复：

let originDrawingMode = true
fabricCanvas.on('touch:dragstart', (e) => {
  if (e.e.touches.length >=2) {
    originDrawingMode = fabricCanvas.isDrawingMode
    fabricCanvas.isDrawingMode = false
  }
})
fabricCanvas.on('touch:dragend', () => {
  fabricCanvas.isDrawingMode = originDrawingMode
})

• 需在页面HTML的head中添加viewport配置，禁用浏览器默认缩放行为，避免和画布手势冲突：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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