jquery - 绘制画布深度对象

Question

如何拥有不同深度的对象数组并使用canvas/jquery在iso投影中绘制它们？

Answer 1

HTML5 Canvas 不支持 z-buffering，因此您负责以正确的顺序绘制对象，从离查看器最远的一个开始，到离查看器最近的一个结束。

您可以通过简单地使用比较器函数对数组进行排序来做到这一点，该函数告诉两个对象中的哪个对象“更深”。这是一个示例，它通过简单地比较一个字段来对对象进行排序z。根据您的确切用例确定哪个比另一个更深可能不太直接。

function object_compare(obj1, obj2) {
     if (obj1.z == obj2.z) return 0;
     if (obj1.z > obj2.z) {
         return 1;
     } else {
         return -1;
     }
}
array.sort(compare_function);

以下是 gamedev.stackexchange.com 上的一些问题，您可能也会感兴趣：

• https://gamedev.stackexchange.com/questions/48710/is-it-good-to-sort-objects-list-before-every-rendering
• https://gamedev.stackexchange.com/questions/47388/best-technique-for-drawing-isometric-tiles
• https://gamedev.stackexchange.com/questions/48423/basic-isometric-projection-in-javascript