无法在FabricJS中显示图像
无法在FabricJS中显示图像
提问于 2016-06-13 14:26:32
我有一些麻烦，把一个FarbicJS元素带到前面的画布。
在浏览了几次后，我发现了这篇文章：在Fabric.js中控制z-索引，但是它似乎对我的代码没有任何影响。
编辑：本题也带来了一些其他的解决方案，但也没有效果。
我可能犯了一个愚蠢的错误，但我不知道在哪里。这是我的代码(至少相关部分)：
//first image, well displayed and functionnal
fabric.Image.fromURL(sourceImg, function(img){
//don't pay attention to following properties
img.left = YYY
img.top = XXX
img.width = whatever
img.height = whatever
img.rega = something
//big animation part
img.on('mouseover', function(){
//blabla
});
that.canvas.add(img);
});
//second image (text), not displayed
var myText = new fabric.Text("SI REGA2", {
//some properties...
left: YYY // Here coordonnates of the text are the same
top: XXX // than first image's coordonnates.
selectable: false,
hasControls: false,
hasBorders: false,
fontSize: 20
});
this.canvas.add(myText); //adding text to the canvas...
this.canvas.bringToFront(myText); //... and bringing back to the front in order to place it over the first image控制台中没有错误，所以我认为一切都进行得很好，但是文本没有显示。或者至少在第一张图片下面。
我该怎么办？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-14 00:07:12
我不知道为什么，但是执行canvas.sendToBack(img);会将文本放在图像的前面。不过canvas.sendToFront(myText);不会的。下面的代码会将文本放在图像的前面：
var canvas = new fabric.Canvas('fabric');
canvas.backgroundColor = '#ffffff';
canvas.renderAll();
fabric.Image.fromURL("https://placehold.it/200x200", function(img){
img.left = 0;
img.top = 0;
img.width = 200;
img.height = 200;
canvas.add(img);
//Where the magic happens
canvas.sendToBack(img);
});
var myText = new fabric.Text("SI REGA2", {
left: 0,
top: 0,
selectable: false,
hasControls: false,
hasBorders: false,
fontSize: 20
});
canvas.add(myText);Stack Overflow用户
发布于 2017-01-24 17:31:18
这个问题已经得到了很长时间的回答，但我想我可以添加更多的信息，因为我刚刚开始修改FabricJS。
这里看到的行为是由于asynchronously (回调函数提示这一点) fabric.Image.fromURL()工作的事实。因此，首先将myText对象添加到画布中，然后再添加图像对象。
FabricJS通过添加到画布上的顺序来确定z索引，因此图像与文本重叠是有意义的。
请查看这个小屁孩中的控制台，以确保在图像之前添加文本，并且myText对象在fabric.Image.fromURL回调中可用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37792315
复制相关文章
相似问题
腾讯云开发者
