как отсортировать эти элементы холста по их z-индексу? - PullRequest
Новая
       28

как отсортировать эти элементы холста по их z-индексу?

3 голосов
/ 11 января 2012

Я хочу объединить эти холсты в один с самым большим z-индексом сверху. 

<div id="sketchpad_container">
  <canvas id="sketchypad_layer_0" style="z-index: 20; " width="800" height="600">Your browser does not support canvas</canvas>
  <canvas id="sketchypad_layer_1" style="z-index: 10; " width="800" height="600">Your browser does not support canvas</canvas>
  <canvas id="sketchypad_layer_2" style="z-index: 30; " width="800" height="600">Your browser does not support canvas</canvas>
</div>

Учитывая произвольное количество таких слоев холста, я хочу отсортировать по z-индексу, а затем использовать drawImage, чтобы объединить их в одно изображение для его экспорта. Есть ли простой способ сортировки по z-index?

РЕДАКТИРОВАТЬ - я попробовал функцию сортировки, как предложено, но, похоже, не работает.

Вот мой вывод консоли: 

$("#sketchpad_container canvas"); //see what's in the collection
//console output gives back (you'll notice z-indices are 40, 20, 10, 30)
[
  <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​, 
  <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​,
  <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​,
  <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​,
  <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​
]

 //next try to sort the collection
 $("#sketchpad_container canvas").toArray().sort(function(a,b){a.style.zIndex - b.style.zIndex});
 //but array is still the same order of z-index 40, 20, 10, 30.
 //  I was expecting 40,30,20,10
 [
   <canvas id=​"sketchypad_interactive_layer" class=​"sketchypad_sketch_layer" style=​"z-index:​40" width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​,
   <canvas id=​"sketchypad_layer_0" class=​"sketchypad_sketch_layer" style=​"z-index:​ 20;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​,
   <canvas class=​"sketchypad_sketch_layer" width=​"800" height=​"600">​,
   <canvas id=​"sketchypad_layer_1" class=​"sketchypad_sketch_layer" style=​"z-index:​ 10;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​,
   <canvas id=​"sketchypad_layer_2" class=​"sketchypad_sketch_layer" style=​"z-index:​ 30;​ " width=​"800" height=​"600">​Your browser does not support canvas​</canvas>​
  ]

Что я делаю не так?

ВНОВЬ РЕДАКТИРОВАТЬ - о, не важно. Мне нужно включить выражение «возврат». г!

1 Ответ

8 голосов
/ 11 января 2012

Предполагая, что все ваши элементы canvas имеют назначенное значение стиля, которое устанавливает их z-index, вы можете получить массив всех элементов canvas, отсортированных по z-index, следующим образом: 

var items = $("#sketchpad_container canvas").toArray();
items.sort(function(a, b) {
    return(Number(a.style.zIndex) - Number(b.style.zIndex));
});

Затем вы можете, вероятно, перебирать этот массив, вызывая drawImage() для каждого. Для правильного рендеринга по z-порядку вам нужно сначала нарисовать задние изображения (элементы с самым низким z-индексом), что в соответствии с сортировкой выше будет означать, что вы рисуете от начала массива до конца.

...