使用 FabricJS 克隆组的问题（复制和粘贴）

Question

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

当复制的项目是一个对象时，我可以让它完美地工作。但是当项目是一个组时它会搞砸。

我把这个 fiddle 放在一起（我知道这是一团糟）但它是一个更大、更有条理的脚本的几个不同部分（刚好足以重现问题）。

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

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

既然你有两个，select 两个都尝试同样的事情。 deselect后原圈消失，克隆圈消失或移动???

这里是粘贴功能：

var _paste = function() {

  var activeObject = _canvas.getActiveObject(),
    activeGroup = _canvas.getActiveGroup();

  if (_clipboard.objects) {

    var group = new fabric.Group();

    for (var i in _clipboard.objects) {

      var object = fabric.util.object.clone(_clipboard.objects[i]);

      group.addWithUpdate(object);

    }

    group
      .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
      .setCoords();

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

  } else {

    var object = fabric.util.object.clone(_clipboard);

    object
      .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
      .setCoords();

    _canvas
      .add(object)
      .setActiveObject(object)
      .renderAll();
  }
}

Answer 1

clone() 函数的行为最近发生了一些变化，以下代码适用于我，使用 Fabric.js 1.7.0（我注意到您在 fiddle):

  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);
    }
  });


}

编辑：我又试了一次，现在似乎工作正常，似乎最好是克隆组，然后在回调中去通过并将每个对象添加到canvas，并将其设置为活动状态，如下所示

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 克隆组的问题（复制和粘贴）

Issue cloning a group using FabricJS (Copy and Paste)

javascript

html5-canvas

fabricjs