Làm cách nào để mô phỏng z-index trong canvas

Question

Tôi đã đặt câu hỏi trước: How can I control z-index of canvas objects? và chúng tôi đã đạt đến giải pháp có thể không phải là giải pháp tốt cho các tình huống phức tạp.

Tôi thấy rằng canvas không có hệ thống chỉ mục z, mà là một bản vẽ được đặt hàng đơn giản. Bây giờ có một câu hỏi mới: làm thế nào tôi có thể mô phỏng hệ thống z-index để làm cho vấn đề này được cố định trong các tình huống phức tạp?

Câu trả lời hay có thể giải quyết được một vấn đề lớn.

Answer 1

Không phải là canvas không có chỉ mục z, đó là canvas không giữ đối tượng được vẽ trái với trang HTML. Nó chỉ vẽ trên ma trận pixel.

Về cơ bản có hai loại mô hình vẽ:

• những đối tượng (thường là vector): đối tượng được lưu giữ và bởi các công cụ quản lý. Chúng thường có thể được gỡ bỏ hoặc thay đổi. Chúng có các chỉ số z-index
• bitmap: không có đối tượng. Bạn chỉ cần thay đổi ma trận pixel

Mô hình Canvas là một bitmap. Để có đối tượng được vẽ trên các đối tượng khác, bạn phải vẽ chúng sau. Điều này có nghĩa là bạn phải quản lý những gì bạn vẽ.

Mô hình canvas rất nhanh, nhưng nếu bạn muốn hệ thống bản vẽ quản lý đối tượng của mình, có thể bạn cần SVG để thay thế.

---

Nếu bạn muốn sử dụng canvas, tốt nhất là giữ những gì bạn vẽ làm đối tượng. Dưới đây là một ví dụ tôi chỉ cần thực hiện: Tôi giữ một danh sách vuông và mỗi thứ hai tôi ngẫu nhiên ZIndex của họ và vẽ lại họ:

var c = document.getElementById('c').getContext('2d'); 
function Square(x, y, s, color) { 
    this.x = x; this.y = y; this.s = s; this.color = color; 
    this.zindex=0; 
} 
Square.prototype.draw = function(c) { 
    c.fillStyle = this.color; 
    c.fillRect(this.x, this.y, this.s, this.s); 
} 
var squares = [ 
    new Square(10, 10, 50, 'blue'), new Square(40, 10, 40, 'red'), new Square(30, 50, 30, 'green'), 
    new Square(60, 30, 40, '#111'), new Square(0, 30, 20, '#444'), new Square(70, 00, 40, '#999') 
]; 

function draw() { 
    c.fillStyle = "white"; 
    c.fillRect(0, 0, 1000, 500); 
    for (var i=0; i<squares.length; i++) squares[i].draw(c); 
} 
setInterval(function(){ 
    // give all squares a random z-index 
    squares.forEach(function(v){v.zindex=Math.random()}); 
    // sort the list accordingly to zindex 
    squares.sort(function(a,b){return a.zindex-b.zindex}); 
    draw(); 
}, 1000); 

Demonstration

Ý tưởng là các mảng vuông được sắp xếp phù hợp để ZIndex . Điều này có thể dễ dàng mở rộng đến các loại đối tượng khác.

Answer 2

Như dystroy đã nói, z-index là, đơn giản nhất của nó, chỉ là một chỉ số để cho bạn biết thứ tự vẽ trên canvas, để chúng chồng lên nhau.

Nếu bạn muốn làm nhiều hơn điều này, hãy nói để nhân rộng các hoạt động hiện tại của trình duyệt, thì bạn sẽ có nhiều việc phải làm. Thứ tự mà các đối tượng được rút ra trong một trình duyệt là một tính toán phức tạp mà được thúc đẩy bởi:

1. Cây DOM
2. Elements' position thuộc tính
3. Elements' z-index thuộc tính

các kinh điển nguồn tới đây là Elaborate description of Stacking Contexts, một phần của đặc tả CSS.