javascript - 选定组的 Fabric.js 复制粘贴

Question

假设我在 Fabric.js Canvas 上选择了多个对象，并且可以使用 getActiveGroup 获取这组对象。任何人都可以提供如何将组复制并粘贴到新组中的示例，其中:

(a) 复制组中的每个对象都保留其与其他复制对象的相对位置

(b) 复制的组作为一个整体位于某个指定的 x,y 位置

(c) 复制的组对象在粘贴后被选择为一个组，但如果清除选择，它们将被视为 Canvas 上的单独对象

我尝试通过克隆和添加克隆组进行粘贴，如下所示:

canvas.getActiveGroup().clone(function(clone) {
    clone.left = 100;
    clone.top = 100;
    canvas.add(clone);
    canvas.deactivateAll();
    canvas.setActiveGroup(clone).renderAll();
});

现在，运行此代码后，克隆的组对象似乎已添加、定位和选择，但一旦我单击 Canvas 以清除选择，克隆的组对象就会跳转到 Canvas 上的不同位置。此外，克隆的对象不可单独选择，并且选择位置与新对象位置不同步。无论如何，我确信我错过了一些东西，但我不确定是什么。如有任何帮助，我们将不胜感激。

Answer 1

您应该尝试 canvas.getActiveGroup().forEachObject(function(o) 获取组类型对象，然后克隆它们。

我给你做了一个jsFiddle克隆一个组。