Fabric.js將文字分層放置在畫布上的圖像

所以，我剛剛開始使用HTML5和canvases，我目前正在使用fabric.js。但是，我遇到了一個問題，花了最後12小時嘗試不同的事情後，我決定來這裏尋求幫助，所以在這裏它是：Fabric.js將文字分層放置在畫布上的圖像

使用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循環中，並且每個添加都放入一個數組中。
這裏，這是一個簡單的地方：

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

而且這兩個工作，但文本放在後面所有的圖像，無論我做了什麼。那麼，如何在已放置的圖像上方顯示此文本？感謝閱讀，希望有人能幫助我。如果我錯過了什麼，或者你需要額外的信息，我會很樂意提供它:)

來源

2015-12-25 Professor X

我加入canvas.sendToBack(y); & canvas.sendToBack(textBox);到函數體，在其中添加面板png格式&文本框PNG，和它的作品。 i-text對象'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 
});

希望有所幫助，祝你好運。

來源

2015-12-25 10:08:41

Fabric.js將文字分層放置在畫布上的圖像

回答

相關問題