Jak mogę symulować indeks Z na płótnie?

Question

Zadałem pytanie przed: How can I control z-index of canvas objects? i doszliśmy do rozwiązania, które może nie być dobre dla skomplikowanych sytuacji.

Zauważyłem, że płótno nie ma systemu z-index, ale proste uporządkowane rysunek. Pojawiło się nowe pytanie: jak mogę symulować system z-index, aby rozwiązać ten problem w skomplikowanych sytuacjach?

Dobra odpowiedź może rozwiązać duży problem.

Answer 1

Nie jest tak, że płótno nie ma indeksu Z, ponieważ płótno nie powoduje, że obiekty są rysowane w przeciwieństwie do strony HTML. Po prostu rysuje na matrycy pikseli.

Istnieją dwa typy modeli rysunek:

• nich obiektów (zwykle): obiekty wektorowe są przechowywane i zarządzane przez silnik. Zwykle można je usunąć lub zmienić. Mają z-index
• bitmapy: nie ma żadnych obiektów. Po prostu zmieniasz matrycę pikselową

Model Canvas to mapa bitowa. Aby obiekty były rysowane nad innymi, musisz narysować je po po. Oznacza to, że musisz zarządzać tym, co narysujesz.

Model canvas jest bardzo szybki, ale jeśli chcesz, aby system rysunkowy zarządzał Twoimi obiektami, może potrzebujesz zamiast tego SVG.

---

Jeśli chcesz użyć płótna, najlepiej zachować to, co rysujesz jako obiekty. Oto przykład Zrobiłem: Trzymam kwadratowy listę i każdą sekundę I losowo ich zindex i przerysować je:

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

Chodzi o to, że kwadrat tablica jest odpowiednio klasyfikowane do zindex . Można to łatwo rozszerzyć na inne typy obiektów.

Answer 2

Jak powiedział dystroy, indeks Z jest najprostszym po prostu indeksem, który mówi Ci, w jakiej kolejności rysować elementy na płótnie, aby zachodziły poprawnie.

Jeśli chcesz zrobić więcej, niż powiedzenie, że chcesz powielić istniejące funkcjonowanie przeglądarki, musisz wykonać więcej pracy. Kolejność, w jakiej obiekty są rysowane w przeglądarce jest skomplikowane obliczenie, który jest napędzany przez:

1. drzewie DOM
2. Elements' position atrybuty
3. Elements' z-index atrybuty

kanonicznej Źródłem tego jest Elaborate description of Stacking Contexts, część specyfikacji CSS.