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

时间:2014-05-07 10:18:50

标签: fabricjs

我有以下问题。我一直在使用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/

非常感谢任何建议。

1 个答案:

答案 0 :(得分:2)

我更新了你的小提琴

小提琴链接: - 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);
      });