FabricJS: Impossible de cloner des objets ou des images car ils ne sont pas définis

Question

Je suis nouveau sur FabricJS et j'ai beaucoup joué avec lui. J'essaie de construire sur un éditeur d'image open source. Actuellement, ce code me permet de cloner des objets tels que des formes, mais je ne peux pas cloner des groupes d'objets à la fois et je ne peux pas non plus cloner des images ou des groupes d'images. L'erreur que je reçois de clonage d'un groupe d'objets ou des images est:

Uncaught TypeError: Impossible de lire la propriété « longueur » undefined

Ou l'erreur pour le clonage d'images dans ce cas serait: Uncaught TypeError: Impossible de lire la propriété « set » undefined

Voici mon code pour les objets de clonage:

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

Et voici le code que j'utilise pour importer des images:

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

Merci pour votre aide

Answer 1

S'il vous plaît lire ici:

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

Clone est une fonction async. Il ne retourne rien.

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