如何根据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;
}