Fabric.js слойный текст над изображениями на холсте

Question

Итак, я только недавно начал работать с 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]); 

Один выше в цикле, и каждое добавление помещается в массив.
И здесь, который является более простым местом:

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

надежда помогает, удачи.