文本始终显示在 Fabric.js 中的图像下方

Question

我有以下问题。我一直在为一个项目使用 Fabric.js，发现它很容易使用。但是我有以下问题，我似乎无法解决。我可能错过了显而易见的事情，但是是时候寻求帮助了。

我无法在加载的图像上显示文本层。这是代码：

<canvas id="c" height=600 width=800></canvas>

var canvas = new fabric.StaticCanvas('c'); 

fabric.Image.fromURL('http://mozorg.cdn.mozilla.net/media/img/products/badge-   firefoxos.jpg?2013-06', function(img) {
    var imgX = img.set({
      top: 0,
      left: 0,
    });

    canvas.add(imgX);
  });

var text   = new fabric.Text("This text always gets burried", {
    top        : 0,
    left       : 0,
    fontSize   : 50,
    fontFamily : 'Delicious_500'
  });
  canvas.add(text);

canvas.BringToFront(text);
 canvas.renderAll();

我还创建了一个小提琴：http://jsfiddle.net/NkqWL/9/

非常感谢任何建议。

Answer 1

我已经更新了你的小提琴

小提琴链接：- Click Here

使用canvas.sendToBack(imgX);将您的图像发送到后面

fabric.Image.fromURL('http://mozorg.cdn.mozilla.net/media/img/products/badge-firefoxos.jpg?2013-06', function(img) {
        var imgX = img.set({
          top: 0,
          left: 0,
        });

        canvas.add(imgX);
           canvas.sendToBack(imgX);
      });