相关疑难解决方法(0)

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);          
});
Run Code Online (Sandbox Code Playgroud)

第三张图像绘制工作正常,并显示一个在另一个之上.但是,如果我添加第4个,它就会隐藏在第3个之后.如果我指定图像的zindex,它仍然只在第3个.

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

谢谢
彼得

html5 drawimage html5-canvas fabricjs

5
推荐指数
1
解决办法
9793
查看次数

标签 统计

drawimage ×1

fabricjs ×1

html5 ×1

html5-canvas ×1