JS：如何通过算法突出显示 x/y 坐标的菱形选择？

Question

如果给定一个创建 nxn 瓷砖贴图的数组数组，是否有一种方法可以循环遍历算法来突出显示形成菱形形状的瓷砖？ （关键问题不是对其进行硬编码，因此它可以适用于任何尺寸的地图）

例如：如果地图是 5x5 的图块，如下所示：

XXXXX  
XXXXX  
XXXXX  
XXXXX  
XXXXX  

算法如何突出显示菱形形状，如下所示：

XXOXX  
XOOOX  
OOOOO  
XOOOX  
XXOXX  

Answer 1

我知道这是一个老话题，但我想我刚刚找到了最好的方法。

如果 cX,cY 是钻石的中心，r 是“半径”（不是直径），则在循环中使用此条件：

if (Math.abs(x-cX)+Math.abs(y-cY)<r)
    arr[x][y] = 1;      

因此 cX=2, cY=2, r=3 将绘制

0,0,1,0,0
0,1,1,1,0
1,1,1,1,1
0,1,1,1,0
0,0,1,0,0

现在您可以设置 cX 和 cY到您的鼠标位置并使用 r 增加/减少菱形大小。

Answer 2

[工作示例]

function diamond(arr) {
  var len = arr.length;
  var mid = Math.floor(len / 2);
  for (var i = 0; i < len; i++) {
    var d = Math.abs(i - mid);
    for (var j = d; j < len - d; j++) {
      arr[i][j] = arr[i][j] = 1;
    }
  }
  return arr;
}

请注意，您尚未定义预期的偶数的行为

Answer 3

function diamond(arr) {

var m = Math.floor(arr.length / 2); // mid
var i = 0;
for (; i < arr.length / 2; i ++) {
  for (var j = 0; j <= i; j ++) {
    for (var k = 0; k <= j; k ++) {
      arr[i][m + k] = arr[i][m - k] = 1;
    }
  }
}

for (; i < arr.length; i ++) {
  for (var j = arr.length - 1 - i; j >= 0; j --) {
    for (var k = 0; k <= j; k ++) {
      arr[i][m + k] = arr[i][m - k] = 1;
    }
  }
}

return arr;

}

>>>示例：(9x9 数组)

diamond((function(n) { var a = []; for (var i = 0; i < n; i ++) { a[i] = []; for (var j = 0; j < n; j ++) { a[i][j] = 0; } }; return a;})(9)).join('\n');

=>输出：

0,0,0,0,1,0,0,0,0
0,0,0,1,1,1,0,0,0
0,0,1,1,1,1,1,0,0
0,1,1,1,1,1,1,1,0
1,1,1,1,1,1,1,1,1
0,1,1,1,1,1,1,1,0
0,0,1,1,1,1,1,0,0
0,0,0,1,1,1,0,0,0
0,0,0,0,1,0,0,0,0