Fabric.js 中直接修改 circle.radius 或位置属性后未重绘，主因是对象缓存（objectCaching）未禁用，导致 Fabric 跳过脏检测与重绘流程；正确做法是显式设置 objectCaching: false 并调用 setCoords() + requestRenderAll()。
fabric.js 中直接修改 `circle.radius` 或位置属性后未重绘，主因是对象缓存（`objectcaching`）未禁用，导致 fabric 跳过脏检测与重绘流程；正确做法是显式设置 `objectcaching: false` 并调用 `setcoords()` + `requestrenderall()`。
在 Fabric.js 中，fabric.Circle 是一个高度封装的图形对象，其渲染行为严格依赖于内部状态管理和缓存策略。你提供的代码中，圆形对象在自定义控制点（如 br、tr）拖拽时确实修改了 radius、left、top 等属性，但画面未实时更新——这并非事件或坐标计算逻辑错误，而是 Fabric 的默认性能优化机制在“默默拦截”你的变更。
核心原因在于：Fabric 默认启用 objectCaching（对象缓存），即对每个对象生成并复用一个离屏 Canvas 缓存图像。当对象属性变化时，Fabric 仅在检测到“受信变更”（例如通过 .set() 方法、.scaleX/scaleY 变化、或内置交互触发）时才标记为“脏对象”并触发重绘。而你代码中直接赋值：
circleObject["radius"] = newRadius; circleObject["height"] = 2 * newRadius; circleObject["width"] = 2 * newRadius;
属于绕过 Fabric 属性响应式系统的“裸操作”，Fabric 不会自动感知这些变更，缓存图像也不会更新，因此 requestRenderAll() 实际重绘的是旧缓存图。
✅ 正确修复方式有两步：
-
创建时禁用对象缓存（关键！）
在初始化fabric.Circle时，必须显式设置objectCaching: false：var circle = new fabric.Circle({ radius: 100, fill: "#f55", top: 100, left: 100, objectCaching: false, // ← 必须添加！否则所有手动属性变更均无效 borderColor: "red", cornerColor: "green", cornerSize: 12, cornerStyle: "circle", transparentCorners: false }); -
变更后同步坐标并强制刷新
即使禁用了缓存，仍需调用setCoords()更新对象的边界框（aCoords/oCoords），再调用canvas.requestRenderAll()触发全量重绘：function scaleObject(eventData, transform, x, y) { var circleObject = transform.target; // ...（你的坐标计算逻辑保持不变）... circleObject.set('radius', newRadius); // ✅ 推荐：使用 .set() 而非直接赋值 circleObject.set('width', 2 * newRadius); circleObject.set('height', 2 * newRadius); circleObject.set('top', newTop); // 如需调整位置，同样用 .set() circleObject.set('left', newLeft); circleObject.setCoords(); // 更新内部坐标系（必调） canvas.requestRenderAll(); // 强制重绘整个画布（必调） }
⚠️ 注意事项：
-
objectCaching: false适用于频繁手动更新属性的场景（如自定义缩放控件），但会略微降低大量静态对象的渲染性能；若对象稳定，可保留默认true并改用.set()+setCoords()。 - 避免
obj["prop"] = value这类直接属性赋值，始终优先使用obj.set('prop', value)—— 它会触发内部变更通知、样式重计算及缓存标记。 -
setCoords()不仅影响选中框显示，更关系到命中检测（isTargetTransparent）、事件坐标映射等核心功能，缺失将导致交互异常。
总结：Fabric.js 的“对象思维”要求开发者尊重其数据流闭环——属性变更 → 状态同步（setCoords）→ 渲染调度（requestRenderAll）。objectCaching: false 是打破缓存屏障的第一把钥匙，而规范的 .set() 调用则是确保变更被系统识别的通行证。掌握这两点，即可稳定驾驭包括圆形在内的所有 Fabric 对象的动态更新。
