Fabric.js - problema com o desenho de várias imagens zindex
Estou usando este 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);
});
O terceiro desenho da imagem está funcionando corretamente e mostrando um em cima do outro. Mas se eu adicionar o quarto, ele ficará escondido atrás do terceiro. Se eu especificar o zindex da imagem, ele ainda ficará abaixo do 3
O que está errado com isto? Estou fazendo algo errado aqui? Por favor ajude
Obrigad
Pedr