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

【问题标题】：Fabric.js - problem with drawing multiple images zindexFabric.js - 绘制多个图像 zindex 的问题
【发布时间】：2011-10-19 20:48:16
【问题描述】：

我正在使用这个脚本：

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，它仍然低于 3rd。

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

谢谢
彼得

【问题讨论】：

标签： html html5-canvas drawimage fabricjs

【解决方案1】：

这里有几个问题。

1) 您不能通过设置图像的 zindex 属性来更改图像的 zindex。织物图像根本没有这样的属性，改变它不会改变画布上图像的 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: ... }));

希望这会有所帮助。

【讨论】：

是的，您的回答为我提供了在画布上渲染图像的基础知识。谢谢 :) 现在我已经在画布上渲染之前预加载了所有图像。
没办法加kangax评论，所以...会在canvas上画很多图，会是什么异步问题，当draw(canvas.add(oImg))一个元素我会sum++，我用fromUrl加载图片，回调实现jsfiddle

【解决方案2】：

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

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

canvas_object = canvas.item(index);

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

canvas_object.bringForward() 

//or

canvas_object.bringToFront()

【讨论】：