Fabric.js粘贴对象后缩放/旋转画布时复制对象消失的问题

嘿，这个问题我之前做Fabric.js项目时也踩过坑，咱们一步步来捋清楚原因和解决办法～

首先得先排查你代码里的核心问题：从你贴的片段来看，你的paste方法里只克隆了对象并设置了位置，但没把克隆后的对象真正添加到画布的对象集合里！而且位置计算也没考虑画布当前的缩放/平移状态，这两个点就是导致对象“消失”的关键。

为什么会消失？ #

• 如果你只是克隆了对象但没调用canvas.add()，这个对象只存在于内存里，画布渲染的时候根本不会把它算进去。平时可能因为临时渲染缓存能看到，但一旦缩放/旋转画布触发重新渲染，这个不在集合里的对象就直接“没了”。
• 就算你加了add，如果还是用clonedObj.left + 10这种基于原始对象的位置，当画布已经有缩放、平移变换时，这个新位置大概率会跑到可视区域外面，看起来就像消失了。

修正后的完整代码示例 #

我给你调整一下copy和paste方法，解决这两个问题：

clipboard: fabric.Object;

@HostListener('window:keydown.control.c', ['$event'])
@HostListener('window:keydown.meta.c', ['$event'])
copy(): void {
  const activeObj = this.drawService.canvas.getActiveObject();
  if (!activeObj) return;

  // 克隆时确保深度复制对象的所有属性，包括变换
  activeObj.clone((cloned: fabric.Object) => {
    // 重置克隆对象的选中状态，避免粘贴后带选中标记
    cloned.set({ active: false });
    this.clipboard = cloned;
  }, true); // 第二个参数true表示深度克隆，处理嵌套对象/组
}

@HostListener('window:keydown.control.v', ['$event'])
@HostListener('window:keydown.meta.v', ['$event'])
paste(): void {
  if (!this.clipboard) return;

  const canvas = this.drawService.canvas;
  this.clipboard.clone((clonedObj: fabric.Object) => {
    canvas.discardActiveObject();

    // 获取当前画布的中心位置，把粘贴的对象放到这里（也可以改成鼠标位置）
    const canvasCenter = canvas.getCenter();
    // 若想基于鼠标位置，可用canvas.getPointer(event)获取坐标
    // const pointer = canvas.getPointer(event);

    clonedObj.set({
      left: canvasCenter.left,
      top: canvasCenter.top,
      // 确保对象的变换属性独立，不受原对象或画布变换的影响
      scaleX: clonedObj.scaleX,
      scaleY: clonedObj.scaleY,
      angle: clonedObj.angle,
      selectable: true
    });

    // 核心步骤：把克隆对象添加到画布
    canvas.add(clonedObj);
    // 可选：设置刚粘贴的对象为选中状态
    canvas.setActiveObject(clonedObj);
    // 强制画布重新渲染，确保对象立刻显示
    canvas.renderAll();
  }, true);
}

额外注意事项 #

• 如果你的画布经常有缩放、旋转操作，粘贴时最好基于当前画布的视图变换来计算位置，比如用canvas.viewportTransform转换坐标，避免对象跑到可视区域外。
• 如果你复制的是组对象（fabric.Group），一定要用深度克隆（clone的第二个参数传true），不然组里的子对象可能克隆不完整。
• 粘贴后记得调用canvas.renderAll()，有些情况下Fabric.js不会自动触发渲染，手动调用能确保对象及时显示。

备注：内容来源于stack exchange，提问作者Victoria Erdődy