FabricJS：オブジェクトまたはイメージが定義されていないためクローンできません

Question

私はFabricJSを初めて使用しています。私は、オープンソースのイメージエディタに構築しようとしています。現在、このコードを使用すると、図形などのオブジェクトを複製できますが、一度にオブジェクトのグループを複製することはできません。また、画像や画像のグループを複製することもできません。私は、オブジェクトまたは任意の画像群のクローニングから得るエラーは次のとおりです。

キャッチされない例外TypeError：この場合には画像をクローニングするため、未定義

またはエラーのプロパティ「長さ」を読み込めません次のようになります。 キャッチされない例外TypeError：ここでは、未定義の

の「設定」プロパティを読み取ることができないオブジェクトをクローニングするための私のコードです：

：

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