FabricJS 自由绘图在触摸屏设备上失效的解决方案

fabricjs 的 `freedrawingbrush` 在桌面端正常，但在 ios/android 触摸设备上无法绘图，主因是默认构建未启用触控交互模块（如 `event.js` 和 `interaction`），需使用支持手势的定制化构建或升级至 v5+ 版本。

FabricJS 默认的 CDN 构建（尤其是 4.x beta 版本）为减小体积，移除了移动端必需的触摸事件处理模块，导致 isDrawingMode = true 在触摸设备上完全无响应——用户触屏时页面滚动而非绘图，这正是你遇到的典型现象。

✅ 正确解决方案

1. 升级至 FabricJS v5.0.0 或更高版本（推荐）

v5+ 已重构事件系统，原生增强对 touchstart/touchmove/touchend 的支持，并修复了大量移动端手势兼容性问题。请替换 CDN 链接：

<!-- 推荐：使用最新稳定版（截至 2024，v6.x 已发布） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/6.6.0/fabric.min.js"></script>

⚠️ 注意：v5+ 中 freeDrawingBrush 默认启用触摸支持，但需确保 canvas 容器禁用默认触控行为（防页面滚动）：

<div class="canvas-container" 
     style="width: 500px; height: 500px; position: relative; user-select: none; touch-action: none;">
  <canvas id="c" width="500" height="500" style="border: 1px solid #aaa;"></canvas>
</div>

touch-action: none 是关键 CSS 声明，它阻止浏览器将触摸事件解释为滚动/缩放操作，从而将所有触摸交由 FabricJS 处理。

2. 若必须使用 v4.x —— 使用定制构建

访问 FabricJS Build Tool，勾选以下模块后生成 JS：

阿里云AI平台

阿里云AI平台

下载

• ✅ Event.js（含 Interaction 子模块）
• ✅ Canvas
• ✅ Object
• ✅ Path（自由绘图依赖）
• ✅ FreeDrawingBrush

然后替换 <script> 标签引用你生成的 fabric.custom.min.js。

3. 补充健壮性配置（v4/v5 均适用）

const canvas = new fabric.Canvas('c', {
  // 显式启用触摸支持（v5+ 可选，v4 必须）
  enableRetinaScaling: true,
  // 确保触摸坐标映射准确
  lowerCanvasEl: document.getElementById('c')
});

// 设置画笔
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#000';
canvas.isDrawingMode = true;

// 【重要】禁用 canvas 区域的默认滚动行为
const canvasEl = canvas.lowerCanvasEl;
canvasEl.style.touchAction = 'none'; // JavaScript 方式双重保障

? 验证是否生效

• 打开 Chrome DevTools → 切换为 iPhone/Android 设备模拟 → 检查控制台有无 TouchEvent 相关错误；
• 真机测试时，轻触画布应立即触发 fabric:mouse:down 事件（可通过 canvas.on('mouse:down', console.log) 监听）。

✅ 总结

完成上述任一方案后，自由绘图将在 iOS Safari、Chrome Android、Edge Mobile 等主流触摸浏览器中稳定工作。