複数のウォーターマーク/オーバーレイ画像をamcharts.comチャートに追加

Question

複数のウォーターマーク/オーバーレイ画像をamcharts.comチャートの異なる場所に追加したいとします。

amcharts.comの例（ここではhttp://codepen.io/team/amcharts/pen/dc7015c33872771cf6e45e7752eaffe3）を出発点として、画像の位置を変えるために、異なる上/左座標を使ってsetOverlayImage関数を複数回（各画像につき1回）呼び出すことを試みました。例えば：（URLによって設定された）同じ画像がここで使用されているが、私は最終的に柔軟性が異なる画像を使用することを

canvas.setOverlayImage(url, canvas.renderAll.bind(canvas), { 
    scaleX: 1, 
    scaleY: 1, 
    top: 3, 
    left: 3, 
    originX: 'left', 
    originY: 'top' 
}); 
canvas.setOverlayImage(url, canvas.renderAll.bind(canvas), { 
    scaleX: 1, 
    scaleY: 1, 
    top: 3, 
    left: 1470, 
    originX: 'left', 
    originY: 'top' 
}); 

注意（異なるURLで設定）。ただし、setOverlayImageの最後の呼び出しで定義された位置に画像が表示されているように見えます（上の例では、上：3と左：1470）。

setOverlayImageを使用して複数の画像を追加することはできますか？そうでない場合は、誰かがamchartsと互換性のある代替案を提案することができますか？

Answer 1

同じキャンバス上の異なる画像にはsetOverlayImageを使用できないようですが、Fabric APIのドキュメントにはこれに関する制限は明示的には言及されていませんが。私は、キャンバスオブジェクトのaddメソッドを使用してコールバックによる結果の画像オブジェクトをfabric.Image.fromURLを使用して追加することで、この作品を作るために管理：http://codepen.io/team/amcharts/pen/aae3c1ed6cda9da3d9914aadddd436fd?editors=0010

ファブリックのマニュアルを：私はcodepenをフォークし、ここで上記の変更を行っ

fabric.Image.fromURL(url, function(img) { 
    img.set({ 
    top: 150, 
    left: 500 
    }); 
    canvas.add(img); 
}); 

fabric.Image.fromURL(url, function(img) { 
    img.set({ 
    top: 250, 
    left: 700 
    }); 
    canvas.add(img); 
}); 

Image objectには、必要に応じて画像を操作するために setメソッドで設定できるすべてのプロパティがリストされています。