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

3rd image draw is working properly and showing one on top of the other. But if I add 4th one it's hiding behind 3rd. If I specify zindex of the image it's still under 3rd only.

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

What is wrong with this? Am I doing something wrong here? Please help.

谢谢
彼得

推荐答案

这里有几个问题.

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

1) You can't change zindex of images by setting their zindex property. Fabric images simply don't have such property and changing it doesn't change z index of images on canvas. This makes all those .set('zindex', 0), .set('zindex', 1), etc. pretty much a no-op.

2) bringToFront 在这里按预期工作，将最后一张图像一直带到绘图堆栈的顶部.但问题是您最后加载的images/player-board-top-red.png"图像不能保证是最后添加的.这 4 个请求是异步的；它们以任意顺序出现，因此回调也以任意顺序执行.例如，在我的测试中，最后一张图片排在第二位，回调执行，图片被带到前面，但随后被 2 个回调覆盖".

2) bringToFront works as expected here, bringing last image all the way to the top of the drawing stack. But the problem is that "images/player-board-top-red.png" image which you're loading last is not guaranteed to be the last one added. Those 4 requests are asynchronous; they are coming in any order, and so callbacks are executed in any order as well. In my test, for example, the last image comes second, callback executes, image is brought to the front, but is then "overwritten" by following 2 callbacks.

如何使最后一个图像呈现在顶部?好吧，我们可以简单地检查所有图片是否已加载，然后再尝试将最后一张图片置于顶部:

How to make last image render on top? Well, we can simply check that all images are loaded before attempting to bring last one to the top:

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 方法:

By the way, don't forget that you can pass an object to set method like so:

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

并且由于 set 是可链接的并返回对实例的引用，您甚至可以将其传递给 add，如下所示:

And since set is chainable and returns reference to an instance, you can even pass it to add like so:

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

希望这会有所帮助.

这篇关于Fabric.js - 绘制多个图像 zindex 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！