如何在Javascript中基于动态网格大小生成我的网格坐标？

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

让我们使用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); 
  }
}

var网格单元=25；
var列=5；
var行=5；
可变单元间距=0.06；
变量中心={x:0，y:0}；
var gridcells=[]；
对于（var r=0；r

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位置，要计算每个框，只需添加
单元格间距
。高度相同

但是请注意，您的图表是错误的。如果您以-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;
}

var topEdge=center.y-（总高度/2）；
对于（var r=0；r这部分是存在的，但是我如何使用topEdge公式来考虑我们在行/列循环中的位置？@user176855:不确定你在问什么。我更新了我的答案，因为我遗漏了每次移动到新行时显然需要重置
leftEdge
。topEdge
只会它在每一行的末尾都进行了更新。我成功了！非常感谢，请注意，在您的版本中，gridcell[0][0]位于左下角。谢谢！！！！！@Matt Burland