克隆Fabric.js中的对象

Question

我使用一个简单的函数克隆Fabric.js中画布上的选定对象.

function duplicateObj() {
  var obj = canvas.getActiveObject();
  var clone = fabric.util.object.clone(obj);
  clone.set({left: 100,top: 100});
  canvas.add(clone); 
}

这非常好.现在,如果我使用该对象并且不再需要克隆并且我选择并删除它,则删除对象,克隆和原始对象.删除功能是:

function deleteObj() {
  var obj = canvas.getActiveObject();
  canvas.fxRemove(obj);
}

对象是一样的.是否有方法克隆对象并使克隆独立于原始对象？我试过这个:

function duplicateObj() {
  var obj = canvas.getActiveObject();
  var clone = fabric.util.object.clone(obj);
  clone.initialize();
  $.extend(clone, obj);
  fabric.util.object.extend(clone, obj);
  clone.set({left: 100,top: 100});
  canvas.add(clone); 
}

它工作,但是对象再次相同,如果我只使用初始化,我最终得到一个现在已设置属性的对象.

Answer 1

这是解决方案

 var object = fabric.util.object.clone(canvas.getActiveObject());
    object.set("top", object.top+5);
    object.set("left", object.left+5);
     canvas.add(object);

Answer 2

这对我来说非常有效，并且克隆的对象与原始对象完全没有链接：

var object = canvas.getActiveObject();

object.clone(function(clone) {
    canvas.add(clone.set({
        left: object.left + 10, 
        top: object.top + 10
    }));
});

您可以克隆所有选定的对象：

var activeObjects = canvas.getActiveObjects();

if (activeObjects) {
    activeObjects.forEach(function(object) {

        object.clone(function(clone) {
            canvas.add(clone.set({
                left: object.left + 10, 
                top: object.top + 10
            }));
        })

    });
}

我希望它可以帮助你！