如何根据位置控制数组中的绘图对象？

Question

解决方案：每次生成新树时，都会根据 Y 位置对树进行排序

trees.sort(function(a, b) {
 return parseFloat(a.Y) - parseFloat(b.Y);
});

---

假设我有这个空数组：

trees[];

我有一个计时器，可以生成这些随机位置的树。

function generateTrees() {
if(tick % 50 === 0) {
  trees.push({
   X: randomNumber,
   Y: randomNumber,
   H: 60,
   W: 30,
   image: treeImage
});
 }
}

所以它正在生成树，这很好。但有时树木在绘制它们时会重叠，我对此很好。 但问题是，在 Y 轴上其他树之上生成的树有时会在下面的树之上绘制， Here's an example. 我正在尝试模拟鸟瞰 3D 视图，因此我想在 Y 轴上将这些对象绘制在其下方的对象后面。

我有这个绘图代码，我已经尝试过 if 语句，但我不确定如何处理数组和单个数字“i”：

function draw() {
 for(i = 0; i < trees.length; i++) {
  ctx.drawImage(trees[i].X,trees[i].Y,trees[i].W,trees[i].H);
 }
}

谁能指出我如何实施此解决方案的正确方向？ 请提前谢谢您。

Answer 1

本质上，您希望按照 y 坐标的顺序渲染树木。听起来您的 y 轴指向上方，因此您需要先渲染具有最高 y 坐标的树。这样，屏幕下方的树木将呈现在顶部。

一种简单的方法是对你的树数组进行排序。您可以每帧都执行此操作（如果您的树很少，则可以接受），或者随着时间的推移维护一个排序数组。在后一种情况下，有多种插入新树的技术：

1. 线性搜索数组，直到找到正确的索引
2. 执行二分搜索以找到正确的索引

您希望找到正确的“排序”位置，而不是每次都在数组末尾插入新树。网上有很多关于这些技术的信息。我可以向您推荐另一篇文章，并给出一个很好的答案，您可能会觉得有趣：

How can I push an element into array at a sorted index position?