5

我正在使用这个脚本：

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 位。

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

谢谢
彼得

4

2 回答 2

11

这里有几个问题。

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

希望这可以帮助。

于 2011-08-07T06:14:01.120 回答
4

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

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

canvas_object = canvas.item(index);

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

canvas_object.bringForward() 

//or

canvas_object.bringToFront()
于 2013-08-09T10:05:59.923 回答