Fabric.js - 绘制多个图像zindex的问题

我正在使用这个脚本:

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

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

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

谢谢
彼得

这里有几个问题.

1)您无法通过设置zindex属性来更改图像的zindex.Fabric图像根本就没有这样的属性,并且更改它不会改变画布上图像的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: ... }));

希望这可以帮助.