Fabric.js - 与绘制多张图片问题Z-索引

Question

我使用这个脚本：

var canvas = new fabric.Canvas('game_canvas', { selection: false }); 

fabric.Image.fromURL('images/bg.jpg', function(img) { 
    img.set('left', 1024/2).set('top', 600/2).set('zindex', 0); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) { 
    img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/player-board.png', function(img) { 
    img.set('left', 254/2).set('top', (122/2)).set('zindex', 2); 
    canvas.add(img);   
}); 

fabric.Image.fromURL('images/player-board-top-red.png', function(img) { 
    img.set('left', 203/2).set('top', (109/2)).set('zindex', 3); 
    canvas.add(img).bringToFront(img);   
}); 

3图像绘制工作正常，并显示一个在另一个之上。但是如果我添加第四名，它会隐藏在第三名之后。如果我指定图像的zindex，它仍然只在第三个。

这有什么问题？我在这里做错了什么？请帮忙。

感谢
彼得

Answer 1

有几个在这里的问题。

1）您无法通过设置自己的zIndex属性改变图像的Z-索引。织物图像根本没有这样的属性，改变它不会改变画布上图像的z索引。这使得所有那些.set('zindex', 0)，.set('zindex', 1)等几乎都是没有操作的。

2）bringToFront按预期工作，将最后一张图像带到绘图堆栈顶部。但问题是，您正在加载的“images/player-board-top-red.png”图像最后是不能保证是最后添加的那个。这4个请求是异步的;他们以任何顺序进入，所以回调也以任何顺序执行。例如，在我的测试中，最后一张图片排在第二位，回调执行，图片被置于前面，但后来被2个回调“覆盖”。

如何让最后一张图像呈现在上面？那么，我们可以简单地认为所有图像都试图把最后一个顶端之前加载检查：

var img4; 
// ... 
function checkAllLoaded() { 
    if (canvas.getObjects().length === 4) { 
    canvas.bringToFront(img4); 
    } 
} 
// ... 
fabric.Image.fromURL('images/1.png', function(img) { 
    img.set('left', 0).set('top', 0); 
    canvas.add(img); 
    checkAllLoaded(img); 
}); 
// load other images, making sure to include `checkAllLoaded` in callback 
fabric.Image.fromURL('images/4.png', function(img) { 
    img4 = img.set('left', 0).set('top', 0); 
    canvas.add(img); 
    checkAllLoaded(img); 
}); 

顺便说一句，不要忘记，你可以传递一个对象来set方法如下所示：

img.set({ left: ..., top: ... }); 

而且由于set是可链接并返回参考实例，你甚至可以把它传递给add像这样：

canvas.add(img.set({ left: ..., top: ... })); 

希望这会有所帮助。

Answer 2

您可以使用canvas.insertAt(object,index);而不是canvas.add(object)来根据您的选择设置对象的zIndex。

您也可以通过使用得到任何对象：

canvas_object = canvas.item(index); 

如果你想要把面前这个对象，用途：

canvas_object.bringForward() 

//or 

canvas_object.bringToFront()