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

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

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

感谢
彼得

Answer 1

这里有几个问题。

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

希望这有帮助。

Answer 2

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

您也可以使用以下方法获取任何对象：

canvas_object = canvas.item(index);

如果您想将该对象放在前面，请使用：

canvas_object.bringForward() 

//or

canvas_object.bringToFront()

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

2 个答案: