javascript - FabricJS:无法克隆对象或图像，因为它们未定义

Question

我是 FabricJS 的新手，并且一直在使用它。我正在尝试构建一个开源图像编辑器。目前，此代码允许我克隆形状等对象，但我不能一次克隆对象组，也不能克隆图像或图像组。我从克隆一组对象或任何图像得到的错误是:

未捕获的类型错误:无法读取未定义的属性“长度”

或者在这种情况下克隆图像的错误是: 未捕获的类型错误:无法读取未定义的属性“集合”

这是我克隆对象的代码:

function clone() {
var object = null;
   if (canvas.getActiveGroup()) {
     var objects = canvas.getActiveGroup().objects;

     canvas.deactivateAll();

     var cloned = [];
     for (var i = 0; i < objects.length; i++) {
        object = objects[i].clone();

        object.set("top", object.top + 20);
        object.set("left", object.left + 20);
        canvas.add(object);
        cloned.push(object);
     }

     selectAll(cloned);
   } else if (canvas.getActiveObject()) {
     object = canvas.getActiveObject().clone();
     object.set("top", object.top + 20);
     object.set("left", object.left + 20);
     canvas.add(object);

     canvas.deactivateAll();
     canvas.setActiveObject(object);
    }

    canvas.renderAll();

    canvas.trigger("object:statechange");
}

下面是我用来导入图片的代码:

document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
  reader.onload = function (event){
  var imgObj = new Image();
  imgObj.src = event.target.result;
  imgObj.onload = function () {
    var image = new fabric.Image(imgObj);
    image.set({
          angle: 0,
          padding: 10,
          cornersize:10,
          height:110,
          width:110,
    });
    canvas.centerObject(image);
    canvas.add(image);
    canvas.renderAll();
  };
};
  reader.readAsDataURL(e.target.files[0]);
};

谢谢你的帮助

Answer 1

请阅读这里:

http://fabricjs.com/docs/fabric.Object.html

克隆是一个异步函数。 它不返回任何内容。

function clone() {
var object = canvas.getActiveGroup();
   if (object) {
     object.clone(function(clone) {
       clone.set("top", object.top + 20);
       clone.set("left", object.left + 20);
       canvas.deactivateAll();
       clone.getObjects().forEach(function(obj){
         canvas.add(obj);
       });
       clone.canvas = canvas;
       canvas.setActiveGroup(clone);
     });    
   }
var object = canvas.getActiveObject();
 if (object) {
       object = object.clone(function(cloned){
         cloned.set("top", object.top + 20);
         cloned.set("left", object.left + 20);
         canvas.add(cloned);
         canvas.deactivateAll();
         canvas.setActiveObject(object);
       });
     }
     canvas.renderAll();
     canvas.trigger("object:statechange");
    }