如何根据 Javascript 中的动态网格大小生成我的网格坐标？

Question

我正在尝试在给定固定网格大小、单元格大小和中心位置的情况下构建一个数组对象。

让我们使用 5x5 的网格大小，0.06 的单元格大小，以 0,0 作为中心。我想构建一个包含给定框边界的单元格对象数组。

//So in this case.... Cell 0 would be 
x1:-0.18 , y1: 0.18 , x2: -0.12, y2: 0.18, x3: 0.18, y3: 0.12 ..... y4
// where x1 is top left X, y1 is top left Y, x2 is top right X, y2 is top right Y

我想做这样的事情..给定网格大小、单元格间距和中心

var grid_cells = 25;
var columns = 5;
var rows = 5;
var cell_spacing = 0.06;
var center = {x: 0, y: 0};
var gridcells = [];

for(var r= 0; r <= rows; r++){
  for (var c= 0; c <= rows; c++){

     var cell = {
        x1: top left corner X
        y1: top left corner Y
        ...
        ...
        y4: bottom right corner Y
     };
     gridcells.push(cell); 
  }
}

在给定信息的情况下，计算框中的点的公式是什么？我知道有一些方程式可以插入。我的最终结果应该是每个单元格边界的 25 个对象

帮助我 StackOverflow 你是我唯一的希望！

Answer 1

所以给定：

var columns = 5;
var rows = 5;
var cell_spacing = 0.06;
var center = {x: 0, y: 0};

网格的总宽度为：

var totalWidth = columns * cell_spacing;  // 5 * 0.06 = 0.3
var totalHeight = rows * cell_spacing;

计算最左边的边缘：

var leftEdge = center.x - (totalWidth / 2); // 0 - (0.3 / 2) = -0.15;

所以 -0.15 是您的第一个框的 x 位置，并且要计算每个框，您只需添加 cell_spacing。与高度相同。

但是请注意，您的图表是错误的。如果您从 -0.18 开始并添加 -0.6，那么您最右边的边缘将是 0.12，而不是 0.18。而且您的中心不能位于 0,0，因为 0 是框 3 的左边缘。

注意中心框周围的坐标：-0.06,-0.06 到 0.06, 0.06。在两个方向上相差 0.12。

所以你的循环可能看起来像这样：

var topEdge = center.y - (totalHeight / 2);
for(var r= 0; r <= rows; r++){
  var leftEdge = center.x - (totalWidth / 2);
  for (var c= 0; c <= columns; c++){

     var cell = {
        x1: leftEdge,
        y1: topEdge,
        x2: leftEdge + cell_spacing,
        ...
        ...
        y4: topEdge + cell_spacing
     };
     leftEdge += cell_spacing;
     gridcells.push(cell); 
  }
  topEdge += cell_spacing;
}