无法在 FabricJS 中将图像置于最前面

Question

我有一些麻烦将 FarbicJS 元素带到画布的前面。

经过几次网页浏览后，我发现了这篇文章：在 Fabric.js 中控制 z-index 但是它似乎对我的代码完全没有影响。

编辑：这个话题也带来了一些其他的解决方案，但也没有效果。

我可能犯了一个愚蠢的错误，但我不知道在哪里。这是我的代码（至少是相关部分）：

//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

控制台没有错误，所以我认为一切顺利，但没有显示文本。或者至少在第一张图片下。

我该怎么办 ？

Answer 1

我不知道为什么，但是执行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