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 链接：
⚠️ 注意：v5+ 中 freeDrawingBrush 默认启用触摸支持，但需确保 canvas 容器禁用默认触控行为（防页面滚动）：
touch-action: none 是关键 CSS 声明，它阻止浏览器将触摸事件解释为滚动/缩放操作，从而将所有触摸交由 FabricJS 处理。
2. 若必须使用 v4.x —— 使用定制构建
访问 FabricJS Build Tool，勾选以下模块后生成 JS：
- ✅ Event.js（含 Interaction 子模块）
- ✅ Canvas
- ✅ Object
- ✅ Path（自由绘图依赖）
- ✅ FreeDrawingBrush
然后替换
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 等主流触摸浏览器中稳定工作。
