Fabric.js图片编辑器撤销时，如何取消画布上的激活对象

这问题我之前做Fabric图片编辑器时也踩过坑！关键就在于：你只隐藏了对象，但Fabric画布仍然保留着对这个对象的激活选中状态，所以控件才会顽固地留在画布上。解决方法很直接，就是在隐藏对象的同时主动取消激活状态。

核心解决方案：主动取消激活对象 #

在你设置对象visible: false之后，调用Fabric画布的discardActiveObject()方法，这个方法会清除当前的激活对象引用，同时自动隐藏对应的控件。最后别忘重新渲染画布让变化生效：

// 假设currentObject是你要隐藏的当前激活对象
currentObject.set('visible', false);
// 取消画布的激活选中状态
canvas.discardActiveObject();
// 重新渲染画布，确保控件消失
canvas.renderAll();

进阶：历史切换后的兜底处理 #

如果你的撤销/重做逻辑涉及到历史状态的切换，可能会出现切换后激活对象是之前隐藏的对象的情况。这时候可以在历史切换完成后，检查当前激活对象是否已隐藏，再做处理：

// 切换历史状态的逻辑执行完成后
const activeObj = canvas.getActiveObject();
if (activeObj && !activeObj.visible) {
  canvas.discardActiveObject();
  canvas.renderAll();
}

可选：监听选中事件做兜底 #

如果担心某些边缘场景（比如用户手动选中了隐藏对象），可以给画布绑定selection:created事件，一旦选中隐藏对象就自动取消选中：

canvas.on('selection:created', function(e) {
  const selectedObj = e.target;
  if (!selectedObj.visible) {
    canvas.discardActiveObject();
    canvas.renderAll();
  }
});

总的来说，只要确保隐藏对象时同步取消其激活状态，就能彻底解决控件残留的问题啦！

内容的提问来源于stack exchange，提问作者Hugh.Wang