如何按z索引对这些画布元素进行排序

how to sort these canvas elements by their z-index?

本文关键字：元素 排序 布元素 何按 索引      更新时间：2023-09-26

我想把这些画布合并成一个顶部有最大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索引排序的简单方法吗？

编辑-我按照建议尝试了排序功能，但似乎不起作用。

这是我的控制台输出：

$("#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>​
  ]

我做错了什么？

再次编辑——哦，没关系。我需要附上一份"退货"声明。啊！

假设所有画布元素都有一个指定的样式值来设置它们的z索引，那么你可以得到一个按z索引排序的所有画布元素的数组，如下所示：

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

然后，您可以对每个调用drawImage()的数组进行迭代。为了进行正确的z顺序渲染，您将希望首先绘制背面图像（最低的z索引项），根据上面的排序，这意味着您将从数组的开始绘制到结束。

相关文章：