fabricjsを使用してキャンバスに複数の画像を追加する方法

Question

このトピックに関するいくつかの質問/回答を読みましたが、解決策が見つからないようです。あなたがこの質問が重複しているのを見つけたら、すみません。

ここは私の状況です。 私はユーザーがそれをクリックするためのメニューを持っていて、キャンバスにその選択されたアイテムのイメージを表示し、ユーザーはそのイメージを希望通りにサイズ変更/ドラッグ/ドロップできます。今、私はそれがこのコードで一つだけの時間を働くことができます

addAction(selectedAction: any) { 
    var canvas = new fabric.Canvas('c'); 
    var imgObj = new Image(); 
    imgObj.src = selectedAction.image; 
    imgObj.onload = function() { 
    var imgInstance = new fabric.Image(imgObj, { 
     left: 200, 
     top: 200, 
     }); 
    canvas.add(imgInstance); 
    } 

ユーザーがメニューに別の項目をクリックすると、問題は、キャンバス上にあった前のアイテムはキャンバスに、代わりに現在の項目の表示を消えています。しかし、その画像をクリックすると消えて、前の画像がキャンバスに表示されます。

私は彼らの両方が同時にキャンバスにとどまりたがっています。ご意見をお聞かせください。

Answer 1

リアルクイックアンサー：http://jsfiddle.net/8yf15nqp/1/

var canvas = ...// setup canvas 

function addImage (url) { 
    fabric.Image.fromURL(url, function (img) { 
     // deal with image 
     canvas.add(img); 
    }); 
} 

追加を処理し、新しい画像を追加するときに呼び出す関数を設定します。私はあなたが関数にURLを渡して他のものをやりたいと思うだろうと思うだろうが、これはかなり除外された例である。