Fabric.js - vấn đề với vẽ nhiều hình ảnh ZIndex

Question

Tôi đang sử dụng kịch bản này:

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

hình ảnh 3 hòa được hoạt động bình thường và hiển thị chồng lên người kia. Nhưng nếu tôi thêm thứ 4 thì nó ẩn đằng sau 3rd. Nếu tôi chỉ định zindex của hình ảnh thì nó vẫn chỉ dưới 3.

Điều gì là sai với điều này? Tôi có làm gì sai ở đây không? Hãy giúp tôi.

Cảm ơn
Peter

Answer 1

Có vài vấn đề ở đây.

1) Bạn không thể thay đổi zindex hình ảnh bằng cách đặt thuộc tính zindex. Vải hình ảnh chỉ đơn giản là không có tài sản như vậy và thay đổi nó không thay đổi z chỉ số của hình ảnh trên vải. Điều này làm cho tất cả những người này .set('zindex', 0), .set('zindex', 1), v.v ... khá nhiều không có.

2) bringToFront hoạt động như mong đợi ở đây, đưa hình ảnh cuối cùng lên trên cùng của ngăn xếp bản vẽ. Nhưng vấn đề là hình ảnh "images/player-board-top-red.png" mà bạn đang tải lần cuối là không được đảm bảo là ảnh cuối cùng được thêm. 4 yêu cầu đó là không đồng bộ; chúng được sắp xếp theo bất kỳ thứ tự nào, và do đó, các cuộc gọi lại được thực hiện theo bất kỳ thứ tự nào. Trong thử nghiệm của tôi, ví dụ, hình ảnh cuối cùng đến thứ hai, gọi lại thực hiện, hình ảnh được đưa đến phía trước, nhưng sau đó "ghi đè" bằng cách làm theo 2 callbacks.

Làm cách nào để hiển thị hình ảnh cuối cùng ở trên cùng? Vâng, chúng ta có thể chỉ đơn giản là kiểm tra tất cả hình ảnh được nạp trước khi cố gắng mang lại người cuối cùng lên trên cùng:

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

Bằng cách này, đừng quên rằng bạn có thể vượt qua một đối tượng để set phương pháp như sau:

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

và kể từ set là thể kết nối và trả về tham chiếu đến một thể hiện, bạn thậm chí có thể vượt qua nó để add như vậy:

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

Hy vọng điều này sẽ hữu ích.

Answer 2

Bạn có thể sử dụng canvas.insertAt(object,index); thay vì canvas.add(object) để đặt zIndex của đối tượng theo lựa chọn của bạn.

Ngoài ra bạn có thể nhận được bất kỳ đối tượng bằng cách sử dụng:

canvas_object = canvas.item(index); 

Nếu bạn muốn mang lại cho rằng đối tượng ở phía trước, sử dụng:

canvas_object.bringForward() 

//or 

canvas_object.bringToFront()