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：
- ✅ 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) 监听）。
✅ 总结
| 问题根源 | 解决方式 |
|---|---|
| v4.x 默认无触摸模块 | 升级至 v5+/v6，或使用 Fabric Build Tool 定制含 Event.js 的构建 |
| 缺少 touch-action: none | 在 canvas 容器或 canvas 元素上强制设置 touch-action: none |
| 未禁用页面滚动干扰 | 确保父容器无 overflow: scroll、无 position: fixed 冲突布局 |
完成上述任一方案后，自由绘图将在 iOS Safari、Chrome Android、Edge Mobile 等主流触摸浏览器中稳定工作。
