我将如何基于位置控制数组中的图形对象？

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?