Fabric.js在畫布上的圖像上分層文本

Question

所以，我最近剛剛開始一起工作HTML5和canvases ，我目前正在工作fabric.js 。 但是，我遇到了一個問題，在花了最后12個小時嘗試各種不同的事情之后，我決定來這里尋求幫助，所以這里是：

使用fabric.js，

我已經對一堆圖像進行了分層，使其符合我的要求，但是現在我希望能夠使用fabric.js覆蓋這些圖像。 我只能把它全部寫在寫位置上，但是z位置錯誤（單詞最終都在圖像下方，我也認為背景圖像-單詞快速閃爍然后消失）在回調中，所有六個文本對象都在完全相同的位置結束。 那么，我該怎么做呢？ 我嘗試了bringToFront(), sendToBack(), moveTo() ，並且有一個函數將其插入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循環中，每個添加都放在一個數組中。
在這里，這是一個更簡單的地方：

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

這兩種工作都可以，但是無論我做什么，文本都放置在所有圖像的后面。 那么，如何在已放置的圖像上方獲取此文本？ 感謝您的閱讀，希望有人可以幫助我。 如果我錯過了任何事情，或者您需要其他信息，我們將很樂意提供:)

Answer 1

我添加了canvas.sendToBack(y); ＆ canvas.sendToBack(textBox); 到函數主體中，在其中添加面板png和文本框png，即可使用。 i文本對象“ ChiefKeef ”位於窗格圖像上方。

我用示例圖像制作了一個jsfiddle，因為我無法復制您的圖像，但是您可以看到結果（按猴子:)）。 http://jsfiddle.net/5KKQ2/495/

片段：

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
});

希望有幫助，祝你好運。