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

Question

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

网格的最中间是 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)
        }

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

[
    {
        "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
    }
]

Answer 1

我没有得到 z 和 y 的交换，但这里有一种方法可以得到你想要的数组。请记住，我不知道您的网格是如何创建的，因此我使用了 ES6 类并捕获了每个单元格的中心点。然后我只是在交换 y 和 z 时将它们推到一个数组中。

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 250;
canvas.height = 250;
let cellSize = 50;
let grid = [];
let centerPoints = [];

class Cell {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.z = 0;
    this.width = cellSize;
    this.height = cellSize;
    this.c = "black";
    this.center = { x: this.x + this.width / 2 - canvas.width/2, y: this.y + this.height / 2 - canvas.height/2};
  }
  draw() {
    ctx.strokeStyle = this.c;
    ctx.strokeRect(this.x, this.y, this.width, this.height);
  }
  createArray() {
    centerPoints.push({'x': this.center.x, 'y': this.z, 'z': this.center.y})
  }
}

function createGrid() {
  for (let y = 0; y < canvas.height; y += cellSize) {
    for (let x = 0; x < canvas.width; x += cellSize) {
      grid.push(new Cell(x, y));
    }
  }
}
createGrid();

function drawGrid() {
  for (let i = 0; i < grid.length; i++) {
    grid[i].draw();
    grid[i].createArray();
  }
}
drawGrid();

console.log(centerPoints)

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<canvas id="canvas"></canvas>

没有画布

gridWidth = 250;
gridHeight = 250;
let cellSize = 50;
let grid = [];
let centerPoints = [];

class Cell {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.z = 0;
    this.width = cellSize;
    this.height = cellSize;
    this.c = "black";
    this.center = { x: this.x + this.width / 2 - gridWidth/2, y: this.y + this.height / 2 - gridHeight/2};
  }
  createArray() {
    centerPoints.push({'x': this.center.x, 'y': this.z, 'z': this.center.y})
  }
}

function createGrid() {
  for (let y = 0; y < gridHeight; y += cellSize) {
    for (let x = 0; x < gridWidth; x += cellSize) {
      grid.push(new Cell(x, y));
    }
  }
}
createGrid();

function drawGrid() {
  for (let i = 0; i < grid.length; i++) {
    grid[i].createArray();
  }
}
drawGrid();

console.log(centerPoints)

Answer 2

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

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

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，而不仅仅是网格坐标（这是上述算法的起始假设，以免给你一个完整的答案而是一种调整它以获得你想要的东西的方法），你可以根据需要进行调整。