因此，我刚刚开始与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循环中，每个添加都放在一个数组中。
在这里，这是一个简单的地方：
var tbText = new fabric.Text("Sentence", {
top: 210,
left: 15,
hasControls: false,
fill: "#32CD32",
fontFamily: 'pokeText'
});
canvas.add(tbText);
这两种工作都可以，但是无论我做什么，文本都放置在所有图像的后面。那么，如何在已放置的图像上方获取此文本？感谢您的阅读，希望有人可以帮助我。如果我错过了任何事情，或者您需要其他信息，我们将很乐意提供:)
我补充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
});
希望有帮助，祝你好运。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句