fabricjs 的 `freedrawingbrush` 在桌面端正常，但在 ios/android 触摸设备上无法响应绘图操作，根本原因在于默认构建版本未启用触摸交互模块（如 `interaction` 和 `event.js`），需使用支持手势控制的定制化构建或升级至 v5.0+ 版本。
FabricJS 默认的 CDN 构建（如 4.0.0-beta.12）为精简体积，默认不包含触摸事件支持模块（Interaction、PointerEvents 和 Gesture 相关逻辑），导致 isDrawingMode = true 在移动端仅触发原生页面滚动，而非画布绘图。这不是代码错误，而是构建配置缺失。
✅ 正确解决方案
1. 升级至 FabricJS v5.0.0 或更高版本（推荐）
v5.0+ 已重构事件系统，原生增强对移动端 touch/mouse/pointer 事件的统一处理，并默认启用触摸支持：
<!-- 替换为最新稳定版 CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
并在初始化后显式启用触摸兼容性（v5+ 中已更健壮，但仍建议）：
const canvas = new fabric.Canvas('c', {
// 启用多点触控与手势支持（v5+ 默认开启，显式声明更稳妥）
enableRetinaScaling: true,
controlsAboveOverlay: true,
// 确保 touch 事件被正确捕获
preventDefault: true, // 阻止默认滚动行为
});
canvas.freeDrawingBrush.width = 5;
canvas.isDrawingMode = true;2. 若必须使用 v4.x，请使用自定义构建版本
访问 FabricJS Build Tool，勾选以下关键模块：
- ✅ Interaction（核心触摸交互）
- ✅ Event.js（事件分发器）
- ✅ PointerEvents（指针事件抽象层）
- ✅ Gesture（可选，用于缩放/旋转等高级操作）
生成后替换原有 CDN 链接，即可恢复触摸绘图功能。
3. 补充移动端适配要点
即使使用正确构建，也需确保 HTML 层级阻止误触发：
<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; display: block;"></canvas>
</div>同时在 JS 中添加防滚动：
document.getElementById('c').addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });⚠️ 注意：passive: false 是必需的，否则 preventDefault() 在现代浏览器中无效；touch-action: none CSS 规则能从根本上禁用画布区域的原生手势，是移动端 FabricJS 绘图稳定运行的前提。
总结
FabricJS 触摸绘图失效本质是构建时模块缺失，而非 API 使用问题。优先升级至 v5.3+ 并配合 touch-action: none 和 preventDefault 即可开箱即用；若受限于旧版本，则务必通过官方构建工具启用 Interaction 模块。切勿依赖未启用触摸支持的精简版 CDN。
