Question

我正在尝试使用FabricJS将对象复制并粘贴到画布上：

当复制的项目是对象时，我可以完美地工作。但当项目成为一个群体时，它就会混乱。

我把这个小提琴放在一起（我知道这是一个混乱），但它是一个更大，更有组织的脚本的一些不同部分（只是足以复制问题）。

https://jsfiddle.net/chrissp26/xxd6h80t/

选中的圆圈点击粘贴按钮，它将复制并粘贴具有5px偏移量的对象的克隆。完美。

现在您有两个，选择它们并尝试相同的事情。原来的圈子消失了，克隆的圈子在取消选择后消失或移动了

以下是粘贴功能：

numba

Answer 1

clone（）函数的行为最近经历了一些变化，以下代码适用于我，使用Fabric.js 1.7.0（我注意到你在你的小提琴中使用1.5.0）：

  if (_clipboard.objects) {

    var group = new fabric.Group();

    for (var i in _clipboard.objects) {
        _clipboard.objects[i].clone(function (clonedObj) {
        group.addWithUpdate(clonedObj);
        if (group.size() == _clipboard.objects.length) {
            group
       .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
       .setCoords();

    _canvas
       .setActiveGroup(group)
       .add(group);
    }
  });


}

编辑：我已经再次开始了，它似乎现在正常运行，似乎群组最好克隆群组，然后在回调中浏览并将每个对象添加到画布，并将其设置为活动，如下所示

Fiddle

    _clipboard.clone(function (clonedObj) {
        _canvas.discardActiveGroup();
        clonedObj.set({
            left: clonedObj.left+10,
            top: clonedObj.top+10,
            evented: true
        });

        clonedObj.forEachObject(function(obj){
            obj.set('active', true);
            _canvas.add(obj);
        });

        _canvas.setActiveGroup(clonedObj).renderAll();
    });

使用FabricJS（复制和粘贴）发布克隆组

1 个答案: