Fabric.js 在画布上的图像上分层文本答案

【问题标题】：Fabric.js layering text over Images on a CanvasFabric.js 在画布上的图像上分层文本
【发布时间】：2016-03-31 09:47:35
【问题描述】：

所以，我最近才开始使用 HTML5 和 canvases，我目前正在使用 fabric.js。但是，我遇到了一个问题，在过去 12 个小时尝试了不同的事情之后，我决定来这里寻求帮助，所以这里是：

使用fabric.js，

我已经将一堆图像分层以使其成为我想要的样子，但现在我希望能够使用 fabric.js 覆盖这些图像。我只能让它把它们都写在写点上，但是错误的 z 位置（单词最终都在图像下方，我认为背景图像也是 - 单词快速闪烁然后消失），通过把它在回调中，所有六个文本对象都在完全相同的位置结束。那么，我该怎么做呢？我试过bringToFront(),sendToBack(), moveTo()，并且有一个函数可以将它直接插入到现场，但我忘记了。但是，我很有可能最终错误地使用了它们，因为我对 fabric.js 很陌生。

这是基本代码的链接：http://pastebin.com/TxNCKAkD

但是，我想我认为问题出在的主要地方是：

text[i] = new fabric.Text("ChiefKeef", {
       top: (5+(65*topShift)),
       left: leftShift+15,
      hasControls: false,
       fill: "orange",
      fontFamily: 'pokeText'
        });
canvas.add(text[i]);

上面的一个在for循环中，每个add都放在一个数组中。
而这里，是一个更简单的地方：

var tbText = new fabric.Text("Sentence", {
    top: 210,
    left: 15,
    hasControls: false,
    fill: "#32CD32",
    fontFamily: 'pokeText'
});
 canvas.add(tbText);

这两种方法都有效，但无论我做什么，文字都放在所有图像的后面。那么，如何在我已经放置的图像上方获取此文本？感谢阅读，希望有人可以帮助我。如果我遗漏了什么，或者您需要额外的信息，我很乐意提供:)

【问题讨论】：

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

我在函数体中添加了canvas.sendToBack(y);和canvas.sendToBack(textBox);，在其中添加了面板png和文本框png，它就可以工作了。 i-text 对象“ChiefKeef”位于窗格图像上方。

我用示例图像制作了一个 jsfiddle，因为我无法重现你的，但你可以看到结果（通过按下猴子 :)）。 http://jsfiddle.net/5KKQ2/495/

sn-ps：

x[i] = new
fabric.Image.fromURL("https://t2.ftcdn.net/jpg/00/97/16/03/500_F_97160389_tVczY4dIrtaRFkSMhV9elnU0NBMVJ1Y3.jpg", function(y){
    //just add canvas.sendToBack(y);
    canvas.add(y);canvas.sendToBack(y);
}, {
    top: (5+(65*topShift)),
    left: leftShift,
        height:65,
        width:195,
    borderColor: "blue",
    hasControls: true,
    lockMovementX: true,
    lockMovementY: true
});
var textBox = new fabric.Image.fromURL("https://t2.ftcdn.net/jpg/00/90/00/97/500_F_90009771_mWttXqopbyZZMVcyuXd5y2iQeeDK9NJm.jpg", function(textBox){
    //just add canvas.sendToBack(textBox);
    canvas.add(textBox);canvas.sendToBack(textBox);
}, {
    top: 200,
    left: 5,
        height:50,
        width:300,
    borderColor: "blue",
    hasControls: false,
    lockMovementX: true,
    lockMovementY: true
});

希望有帮助，祝你好运。

【讨论】：