Javascript 创建坐标栅格阵列

我对我的数组创建有点困惑。我有一个带有x:y坐标及其尺寸（网格大小）的项目列表。。。例如：

x: 1
y: 7
width: 2 tiles
height: 2 tiles

所以我想做的是创建一个x:y网格阵列，这些网格被“占用”。但是循环这些数据，这样占用的瓷砖就会出现：

x: 1
y: 7
//
x: 2
y: 7
//
x: 1
y: 8
//
x: 2
y: 8

因为在上面的例子中，项目是2乘2瓷砖（正方形）

我的对象的结构如下（显示在console.log（sdata）；）

---

因此，是的，我正在尝试创建一个数组来存储这种网格引用。希望我解释了我试图得到的结果，但我无法确定如何构造一个循环来创建数组。

生成的

outputArray

数组是

{x:value，y:value}

形式的对象集合

var inputArray = [ [1,7,2,2], ... ];
var outputArray = [];
for(var i = 0; i < inputArray.length; i++) {
    var item = {
      x: inputArray[i][0],
      y: inputArray[i][1],
      width: inputArray[i][2],
      height: inputArray[i][3]
    };
    for(var xx = 0; xx < item.width; xx++) {
        for(var yy = 0; yy < item.height; yy++) {        
            outputArray.push({
                x: item.x + xx,
                y: item.y + yy
            });
        }
    }
}

var输入阵列=[[1,7,2,2]，…]；
变量输出阵列=[]；
for（变量i=0；i

​我添加了

x

、

y

、

width

和

height

属性，使其更易于理解

function range(a, b) {
    /*
        range(5) -> [0,1,2,3,4]
        range(1,4) -> [1,2,3]
    */
    if (b===undefined)
        var start=0, stop=a;
    else
        var start=a, stop=b;

    var R = [];
    for(var i=start; i<stop; i++)
        R.push(i);
    return R;
}

结果（通过JSON.stringify获得）：

下面是一个如何生成这种“网格”占用数据的示例

var chords = [ // instead of arrays we'll use objects.. they're nicer. 
    {
    x: 1,
    y: 7,
    h: 2, // height
    w: 2}, // width
{ // ohh look a second plot point.
    x: 4,
    y: 1,
    h: 3,
    w: 2},
];

var occupied = { // will be your cells points occupied
    x: [],
    y: []    
};
chords.forEach(function(chord) { // now lets loop the chords and produce the occupied array
    occupied.x.push( chord.x );
    occupied.x.push( chord.x + (chord.w-1) ); // expand the width of the cell - initial point
    occupied.y.push( chord.y );
    occupied.y.push( chord.y + (chord.h-1) ); // expand the height of the cell - initial point
});
console.log( occupied );
// outputs
​Object
    x: Array[4]
        0: 1
        1: 2
        2: 4
        3: 5

    y: Array[4]
        0: 7
        1: 8
        2: 1
        3: 3

---

上一个代码块中的“对象结构”没有任何意义。为什么数字是字符串？左手属性与右手值有什么关系？为什么7是一个数组？看看这个。它可能会有帮助：它是一个非常基本的对象结构，7是关键。0到3是数组位置。它是在PHP中生成的，因此自动将其假定为字符串，这并不重要，因为我可以在处理数据时将它们转换为整数。如果我想知道y:8是否被占用，我如何检查，因为我不知道它位于数组位置[1]？

range(x, x+width).map(function(x) {
    return range(y, y+height).map(function(y) {
        return {x:x, y:y}; // anything you'd like
    })
})

[
    [ {"x":1,"y":7}, {"x":1,"y":8} ],
    [ {"x":2,"y":7}, {"x":2,"y":8} ]
]

var chords = [ // instead of arrays we'll use objects.. they're nicer. 
    {
    x: 1,
    y: 7,
    h: 2, // height
    w: 2}, // width
{ // ohh look a second plot point.
    x: 4,
    y: 1,
    h: 3,
    w: 2},
];

var occupied = { // will be your cells points occupied
    x: [],
    y: []    
};
chords.forEach(function(chord) { // now lets loop the chords and produce the occupied array
    occupied.x.push( chord.x );
    occupied.x.push( chord.x + (chord.w-1) ); // expand the width of the cell - initial point
    occupied.y.push( chord.y );
    occupied.y.push( chord.y + (chord.h-1) ); // expand the height of the cell - initial point
});
console.log( occupied );
// outputs
​Object
    x: Array[4]
        0: 1
        1: 2
        2: 4
        3: 5

    y: Array[4]
        0: 7
        1: 8
        2: 1
        3: 3