初始化 fabric.Canvas 需等 DOM 加载完成、canvas 元素存在且可见，传入 { selection: true, hoverCursor: 'pointer' } 并调用 setDimensions() 同步 CSS 尺寸；添加对象须用 canvas.add() 且设 selectable: true，修改属性须用 set() 或专用方法并调用 renderAll() 刷新。
直接在 HTML 中用 fabric.js 编辑画布对象，核心不是“编辑 HTML”，而是通过 JS 操作 fabric.Canvas 实例上的 fabric.Object 子类（比如 fabric.Rect、fabric.Text、fabric.Image）——所有修改都发生在 Canvas 内部对象模型上，HTML 里只有 <canvas> 标签作为容器。
怎么初始化 fabric.Canvas 并确保可交互
必须等 DOM 加载完成，且 canvas 元素存在；fabric 不会自动监听鼠标事件，得手动启用控制层（selection: true）和对象可选性（selectable: true）。
-
canvas元素不能设display: none或父元素不可见，否则 fabric 无法正确计算坐标 - 初始化时传入
{ selection: true, hoverCursor: 'pointer' }，否则点击无反应、拖拽失效 - 如果 canvas 宽高由 CSS 设置（而非
width/height属性），务必调用canvas.setDimensions()同步，否则缩放/点击位置错乱
示例：
<canvas id="c" width="800" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric@5.3.1/dist/fabric.min.js"></script>
<script>
const canvas = new fabric.Canvas('c', {
selection: true,
hoverCursor: 'pointer',
backgroundColor: '#f5f5f5'
});
</script>
怎么添加、选中、修改对象（如文字或矩形）
对象必须显式添加到 canvas（canvas.add()），且默认不可选；选中靠 canvas.setActiveObject() 或用户点击触发（前提是 selectable: true）。
- 创建对象时立即设
selectable: true，否则即使 canvas 开启 selection 也点不中 - 修改属性（如
text、fill、left）后，必须调用canvas.renderAll()才能刷新显示 - 批量修改多个对象？用
canvas.getObjects()遍历，改完统一renderAll()，别每改一个都渲染
示例（添加可编辑文字）：
const text = new fabric.Text('Hello', {
left: 100,
top: 100,
fontSize: 24,
selectable: true,
hasControls: true
});
canvas.add(text);
canvas.setActiveObject(text); // 立即选中，显示控制点
为什么改了对象属性但画布没更新
常见原因就两个：没调 renderAll()，或者改的是原始 JS 对象而非 fabric 实例的属性。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
text.text = 'New';—— 这只是改了 JS 属性，fabric 不知道要重绘 - 正确写法：
text.set('text', 'New'); canvas.renderAll();或text.setText('New'); canvas.renderAll(); - 更隐蔽的坑：用
Object.assign(text, { fill: 'red' })，这绕过了 fabric 的 setter，不会触发内部状态更新 - 如果对象是 group，需先
group.forEachObject(obj => obj.set(...))，再group.setCoords()更新包围盒，最后renderAll()
怎么响应对象被移动/缩放/编辑后的变化
不要轮询坐标，用 fabric 内置事件。关键事件名是 object:moving、object:scaling、object:modified，它们在每次交互结束时触发。
-
object:moving是实时触发的（每帧），适合做约束逻辑（如限制 x 范围） -
object:modified是最终状态，适合保存快照或同步到后端 - 绑定方式：
canvas.on('object:modified', ({ target }) => console.log(target.left, target.top)) - 注意：事件回调里的
target是 fabric 对象实例，不是原生 DOM 元素
修改对象后容易忽略的一点：fabric 默认不持久化状态。如果页面刷新，所有对象都会丢失——得自己序列化（canvas.toJSON()）并存到 localStorage 或服务端。
