JS：如何在算法上突出显示 x/y 坐标的菱形选择？答案

【问题标题】：JS: how to algorithmically highlight a diamond-shaped selection of x/y coordinates?JS：如何在算法上突出显示 x/y 坐标的菱形选择？
【发布时间】：2010-10-17 05:22:08
【问题描述】：

如果给定一个数组数组来创建一个 n x n 的瓦片图，有没有办法循环通过一种算法来突出显示形成菱形形状的瓦片？（关键问题不是硬编码，所以它适用于任何大小的地图）

例如：如果地图是这样的 5x5 瓦片：

XXXXX  
XXXXX  
XXXXX  
XXXXX  
XXXXX

算法怎么能像这样突出菱形：

XXOXX  
XOOOX  
OOOOO  
XOOOX  
XXOXX

【问题讨论】：

您是否需要一种算法来简单地生成 nxn 菱形数组、标记，或者您是否正在为“突出显示”步骤而苦苦挣扎，但您没有给出真实的描述？

标签： javascript map tiles

【解决方案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 增大/减小菱形大小。

【讨论】：

这正是我想要的，有没有办法在钻石中间切一个洞？比如添加偏移参数？
由于我没有得到回应，我已经弄清楚并将代码放入 JSFiddle 中。随意在这里玩jsfiddle.net/truefreestyle/Suww8

【解决方案2】：

[Working example]

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;
}

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

【讨论】：

【解决方案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

【讨论】：