Fabric.js跨画布克隆对象控件错乱、属性失效如何解决

你使用的fabric.util.object.clone是通用浅拷贝方法，仅能复制对象第一层的基础属性，无法处理Fabric对象内部绑定的画布引用、原型链方法、控件配置、状态缓存等深层关联内容。用这个方法得到的克隆对象会残留源画布的关联引用，添加到新画布后就会出现操作控件渲染错乱、自定义配置（比如你设置的transparentCorners: false）失效的问题。
另外你当前的克隆逻辑里，先把源画布所有对象包成了ActiveSelection选中组，克隆的是选中组实例而非矩形本身，会进一步加剧引用错乱的问题。

Fabric.js本身为所有实例提供了专门的clone()方法，会递归遍历对象全量属性、断开原有画布的关联引用，生成完全独立的新实例，是跨画布克隆对象的官方标准实现，不要用通用浅拷贝方法处理Fabric实例。

修正后的代码 #

把原代码里的cloneRect函数替换为如下实现即可：

async function cloneRect() {
  // 直接获取源画布上的矩形对象，无需创建选中组
  const sourceRect = canvas1.getObjects()[0];
  if (!sourceRect) return;
  // 调用官方克隆方法，异步返回独立的新实例
  const clonedRect = await sourceRect.clone();
  // 可按需偏移克隆对象的位置，避免和其他对象位置重合
  clonedRect.set({
    left: clonedRect.left + 30,
    top: clonedRect.top + 30
  })
  canvas2.add(clonedRect);
  canvas2.requestRenderAll();
}

修复后表现 #

• 克隆得到的对象和源对象、源画布完全独立，无残留引用
• 原对象配置的transparentCorners、描边、填充、尺寸等所有属性都会完整保留
• 目标画布上的对象拖拽、缩放、旋转等操作控件渲染正常，无错位、失效问题
• 如果需要克隆多对象组合，直接对ActiveSelection实例调用clone()方法，同样可以得到正确的独立实例。

内容的提问来源于stack exchange，提问作者AmPhIbIaN26