Fabric.js - 绘制多个图像zindex的问题 [英] Fabric.js - problem with drawing multiple images zindex

问题描述

我正在使用这个脚本：

  var canvas = new fabric.Canvas（'game_canvas'，{selection：false }）; 
 
 fabric.Image.fromURL（'images / bg.jpg'，函数（img）{
 img.set（'left'，1024/2）.set（'top'， 600/2）.set（'zindex'，0）; 
 canvas.add（img）; 
}）; 
 
 fabric.Image.fromURL（'images / panel-2-bg-lr.png'，函数（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）; 
}）; 
  

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

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

谢谢

Peter

解决方案

这里有几个问题。

<1>您不能通过设置 zindex属性来更改图像的zindex。织物图像根本没有这样的属性，改变它不会改变画布上图像的z索引。这使得所有 .set（'zindex'，0）， .set（'zindex'，1），几乎没有操作。

2） bringToFront 按预期工作，将最后一张图片全部带入到绘图堆栈顶部的路径。但问题是，您上次加载的images / player-board-top-red.png图像不能保证是最后添加的图像。这4个请求是异步的;他们以任何顺序进入，所以回调也以任何顺序执行。例如，在我的测试中，最后一张图像排在第二位，回调执行，图像被带到前面，然后通过跟随2次回调覆盖。

如何使最后的图像呈现在上面？那么，我们可以简单地检查是否加载了所有图片，然后再尝试将最后一张图片带到最顶端：

  var img4; 
 // ... 
函数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）; 
}）; 
 //载入其他图片，确保在回调中包含`checkAllLoaded` 
 fabric.Image.fromURL（'images / 4.png'，function（img）{
 img4 = img。 set（'left'，0）.set（'top'，0）; 
 canvas.add（img）; 
 checkAllLoaded（img）; 
}）; 
  

顺便说一下，不要忘记你可以传递一个对象给设置方法如下：

  img.set（{left：...，top：。 ...}）; 
  

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

  canvas.add（img.set（{left：...，top：...}））; 
  

希望这有助于您。

I'm using this script:

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

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.

Thanks
Peter

解决方案

There are couple of issues here.

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

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

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

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

Hope this helps.

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