FabricJSで画像を前面に表示できません

FarbicJS要素をキャンバスの前面に表示するにはいくつかの問題があります。FabricJSで画像を前面に表示できません

いくつかのWebブラウジングの後、私はこのポストを見つけました：Control z-index in Fabric.js Howerver私のコードには全く影響がないようです。

EDIT：this topicもまたいくつかの解決策をもたらしますが、効果はありません。

私は愚かな間違いをしているかもしれませんが、私はどこにいるのか分かりません。ここに私のコードは、（少なくとも、関連する部分）である：

//first image, well displayed and functionnal 
fabric.Image.fromURL(sourceImg, function(img){ 
    //don't pay attention to following properties 
    img.left = YYY 
    img.top = XXX 
    img.width = whatever 
    img.height = whatever 
    img.rega = something 

    //big animation part 
    img.on('mouseover', function(){ 
     //blabla 
    }); 
    that.canvas.add(img); 
}); 

//second image (text), not displayed 
var myText = new fabric.Text("SI REGA2", { 
    //some properties... 
    left: YYY // Here coordonnates of the text are the same 
    top: XXX // than first image's coordonnates. 
    selectable: false, 
    hasControls: false, 
    hasBorders: false, 
    fontSize: 20 
}); 
this.canvas.add(myText); //adding text to the canvas... 
this.canvas.bringToFront(myText); //... and bringing back to the front in order to place it over the first image

あり、コンソールにはエラーはありませんので、私はすべてがうまくいっていると思いますが、テキストは表示されません。または少なくとも最初の画像の下に。

どうすればよいですか？

出典

2016-06-13 Cheitan

ウェブブラウザからF12を使用していますか？ – lordkain

うん、素晴らしいツール。ここでは表示されませんが、私は 'console.log（myText）'を試してみました。オブジェクトはOKのようです。それがテキストがキャンバスに追加されていると思うが、画像には腹を立てると思う。 – Cheitan

うーん...私はあなたに幸運を望むことができます！あなたのエラーを分離して小さな作業サンプルを提供してください – lordkain

理由はわかりませんが、canvas.sendToBack(img);を実行すると、画像の前にテキストが置かれます。しかしcanvas.sendToFront(myText);はそうしません。だから、下にあるコードでは、画像の前にテキストを配置します：

var canvas = new fabric.Canvas('fabric'); 
canvas.backgroundColor = '#ffffff'; 
canvas.renderAll(); 

fabric.Image.fromURL("https://placehold.it/200x200", function(img){ 
    img.left = 0; 
    img.top = 0; 
    img.width = 200; 
    img.height = 200; 

    canvas.add(img); 
    //Where the magic happens 
    canvas.sendToBack(img); 
}); 

var myText = new fabric.Text("SI REGA2", { 
    left: 0, 
    top: 0, 
    selectable: false, 
    hasControls: false, 
    hasBorders: false, 
    fontSize: 20 
}); 
canvas.add(myText);

JSFiddle

出典

2016-06-14 00:07:12 leroydev

うわー、それは印象的です！ありがとう！ – Cheitan