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

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 坐标的树木。这样，屏幕下方的树木将呈现在顶部。

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

线性搜索数组，直到找到正确的索引
执行二进制搜索以找到正确的索引

您不想每次都在数组末尾插入新树，而是希望找到正确的 "sorted" 位置。网上有很多关于这些技术的信息。我可以将您推荐给另一个 post，您可能会发现一个很好的答案：

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

How would I Control Drawing objects in an Array based on Position?

javascript

arrays

object

drawimage