时间戳

首页 > 解决方案 > 如何在以下网格中找到每个单元格的中心坐标？

javascript - 如何在以下网格中找到每个单元格的中心坐标？

问题描述

我需要一种算法来找到以下网格中每个单元格的中心坐标。

网格的最中间是 0,0 坐标。宽度为 250，高度为 250。

注意：轴是倒置的y，需要这样。

这是我在网上找到的一些信息所尝试的，但并不完全如此。

        const size = 250
        const divisions = 5

        let step = size / divisions;
        let halfSize = size / 2;

        let vertices = [];
        let arr = [];
    
        for (let i = 0, z = -halfSize + step; i < divisions - 1; i++, z += step ) {
            //x axis
            vertices.push(-halfSize + (step/2), 0, z - (step/2), halfSize - (step/2), 0, z - (step/2));
            //z axis
            vertices.push(z - (step/2), 0, -halfSize + (step/2), z - (step/2), 0, halfSize - (step/2));
        }

        for (let i = 0; i < vertices.length; i += 3) {
            const position = {}
            position.x = vertices[i];
            position.y = vertices[i + 1];
            position.z = vertices[i + 2];
            arr.push(position)
        }

预期坐标（无特定顺序）。在这种情况下，我只是根据需要交换yandz值。

[
    {
        "x": -100,
        "y": 0,
        "z": -100
    },
    {
        "x": -50,
        "y": 0,
        "z": -100
    },
    {
        "x": 0,
        "y": 0,
        "z": -100
    },
    {
        "x": 50,
        "y": 0,
        "z": -100
    },
    {
        "x": 100,
        "y": 0,
        "z": -100
    },
    {
        "x": -100,
        "y": 0,
        "z": -50
    },
    {
        "x": -50,
        "y": 0,
        "z": -50
    },
    {
        "x": 0,
        "y": 0,
        "z": -50
    },
    {
        "x": 50,
        "y": 0,
        "z": -50
    },
    {
        "x": 100,
        "y": 0,
        "z": -50
    },
    {
        "x": -100,
        "y": 0,
        "z": 0
    },
    {
        "x": -50,
        "y": 0,
        "z": 0
    },
    {
        "x": 0,
        "y": 0,
        "z": 0
    },
    {
        "x": 50,
        "y": 0,
        "z": 0
    },
    {
        "x": 100,
        "y": 0,
        "z": 0
    },
    {
        "x": -100,
        "y": 0,
        "z": 50
    },
    {
        "x": -50,
        "y": 0,
        "z": 50
    },
    {
        "x": 0,
        "y": 0,
        "z": 50
    },
    {
        "x": 50,
        "y": 0,
        "z": 50
    },
    {
        "x": 100,
        "y": 0,
        "z": 50
    },
    {
        "x": -100,
        "y": 0,
        "z": 100
    },
    {
        "x": -50,
        "y": 0,
        "z": 100
    },
    {
        "x": 0,
        "y": 0,
        "z": 100
    },
    {
        "x": 50,
        "y": 0,
        "z": 100
    },
    {
        "x": 100,
        "y": 0,
        "z": 100
    }
]

在此处输入图像描述

标签： javascriptalgorithmmath

解决方案

有点不清楚你的意思是什么，因为如果你已经知道你的起始位置、单元格大小和地图大小，你可以通过在两个轴上按单元格大小递增/递减来计算所有单元格的位置。

由于没有共享代码，也没有给出更多细节，我假设这就是你想要的，所以这里是你如何设置它来获取所有单元格的中心坐标。

const cellSize = 50;
const mapWidth = 250;
const mapHeight = 250;

let rows = mapWidth / cellSize;
let cols = mapHeight / cellSize;

/* Let's define 'extents' - as in, how many squares left/right 
 or top/bottom of a 0,y or x,0 square. This will be useful in a bit*/

let yExtent = Math.floor(rows / 2); // in the example grid, this would just be 2
let xExtent = Math.floor(cols / 2);

我们根据您定义的约束以编程方式获得您的 cellSize 和其他一些数据（因此您可以根据需要进行调整）。

我假设您在 HTML5 画布中绘制此网格，因此为什么您的网格的默认位置从左上角开始，因此每个单元格的 x/y 都从单元格的左上角开始。

因此，我们使用以下函数定义单元格的中心坐标：

getCellCenter(cellX, cellY) {
return [cellX + cellSize/2, cellY + cellSize/2] // [center X, center Y]
}

其中 cellX,cellY 是网格单元的左上角（或起始绘制位置）。

现在您要做的就是在假设 0,0 位于中心的情况下遍历整个网格。在过去的 6 到 7 年里，我在很多基于 HTML5 画布网格的游戏中都这样做了，当我必须在这样的网格中渲染每个图块时，我遵循这个循环：

（注意：您可以更高效或线性地执行此操作，但由于缺少某些上下文，这可能是最容易理解的）

// Loop through rows from -2 row to +2 row
for (let y = -yExtent; y <= yExtent; y++) {
  for (let x = -xExtent; x <= xExtent; x++) {
    cellCenter = getCellCenter(x * cellSize, y * cellSize)
  }
}

这有意义吗？

因此，对于位于 -2,-2 的单元格（网格坐标中的左上角单元格），其实际像素坐标为

现在，如果您的整个地图网格专门定位在画布中的某个位置，那么您要做的是将偏移 X 和偏移 Y 应用于所有计算

例如。

cellCenter = getCellCenter(x * cellSize - offsetX, y * cellSize - offsetY)

（或者您可以添加偏移量，具体取决于您希望如何定位它）。

这应该足够通用，如果网格中间的真实像素坐标是 0,0，而不仅仅是网格坐标（这是上述算法的起始假设，以免给你一个完整的答案，而是一种方法来调整它以获得你想要的），你可以根据需要进行调整。

推荐阅读