fabricjs 的 `freedrawingbrush` 在桌面端正常，但在移动设备上无法响应触摸事件，根本原因在于默认构建版本未启用触摸交互模块（如 `event.js` 和 `interaction`），需手动启用手势支持或升级至 v5+ 并配置正确构建。
FabricJS 默认的 CDN 构建（如 v4.0.0-beta.12）为减小体积，移除了移动端必需的触摸事件处理模块（Interaction + Event.js），导致 isDrawingMode = true 在 iOS/Android 上完全无响应——此时触摸 canvas 仅触发浏览器默认行为（如页面滚动），而非画笔事件。
✅ 正确解决方案（三步走）
1. 升级至 FabricJS v5.0.0 或更高版本（推荐）
v5+ 已重构触摸事件系统，原生增强对 Pointer Events 和多点触控的支持，并修复了大量移动端兼容性问题（如 #6980）。使用官方 CDN：
⚠️ 注意：v5+ 中 freeDrawingBrush 默认启用 enablePointerEvents: true，但仍需确保 canvas 容器阻止默认触摸行为。
2. 主动禁用页面滚动干扰
在 canvas 容器上添加 CSS 并监听 touchstart 阻止冒泡：
并在 JS 初始化后添加：
const canvas = new fabric.Canvas('c', {
// v5+ 关键配置：显式启用指针事件
enablePointerEvents: true,
// 可选：提升触摸响应灵敏度
perPixelTargetFind: true,
targetFindTolerance: 4
});
canvas.freeDrawingBrush.width = 5;
canvas.isDrawingMode = true;
// 防止触摸 canvas 时页面滚动（iOS/Android 通杀）
document.getElementById('c').addEventListener('touchstart', (e) => {
e.preventDefault();
}, { passive: false });
// 清空按钮逻辑保持不变
document.getElementById('clear').addEventListener('click', () => canvas.clear());3. （可选）定制构建（适用于 v4 且无法升级场景）
若必须使用 v4.x，请前往 FabricJS Build Tool，勾选 Interaction、Event、Gesture 模块，生成自定义 fabric.min.js 替换 CDN 链接。
? 验证要点
- ✅ touch-action: none 必须作用于 canvas 或其父容器；
- ✅ passive: false + e.preventDefault() 是阻止滚动的关键；
- ✅ 使用 fabric.Canvas 构造函数传参配置 enablePointerEvents: true（v5+）；
- ❌ 避免使用已废弃的 canvas.calcOffset() 手动修正坐标（v5+ 已自动处理）。
升级至 v5.3.1 并按上述配置后，自由绘图将在 iPhone、iPad、主流 Android 设备上稳定工作，支持单指绘制、双指缩放（若启用）及压感笔（部分设备）。建议始终以 FabricJS 官方移动端示例 为基准校验环境。
