如何知道所选单元格是否是CSS网格中的矩形

Question

我有一个div，它显示一个网格，如下所示：

render() {
return (
<div style={{display: "grid", gridTemplateColumns: "10px 10px 10px 10px", gridTemplateRows: "10px 10px 10px 10px"}}>
{this.renderCells()}
</div>
);
}

在我的renderCells((函数中，我有：

renderCells = () => {
let render = [];
for(let i = 0; i < 16; i++)
render.push(<div className="cell" key={i} onClick={() => this.clickElement(i)}>{i}</div>);
return render;
}

它成功地生成了包含0..15个数字的4x4网格系统。在我的clickElement((函数中，我有：

const clickElement = (index) => {
this.array.push(index);
}

我想创建一个函数来检查这个数组是否有可以创建矩形或正方形的索引号。

示例：

Grid System
[0, 1, 2, 3]
[4, 5, 6, 7]
[8,9,10,11]
[12,13,14,15]

如果用户分别单击4、5、8和9，并且在我们运行isRectanglerSquare((函数后，它应该返回true，例如，对于5、6、9，它应该会返回false。

如何编写isRectanglerSquare((函数？

Answer 1

这个答案意味着您有一个javascript变量(在本例中称为"matrix"(来表示您的css网格。

您可以找到已选择元素的坐标，并将它们放在列表中(例如4、5、8、9(：

[
[1 (vertical), 0 (horizontal)]
[1, 1]
[2, 0]
[2, 9]
]

然后得到左上角和右下角的坐标。

在这一点上，循环浏览您的原始矩阵，并查看是否每个元素都在您的选定元素列表中。

以下是源代码示例：

let matrix = [
[0, 1, 2, 3],
[4, 5, 6, 7],
[8, 9, 10,11],
[12,13,14,15]
];
let selected = [4,5,8,9];
function isRectangle(selected) {
let coords = [];
// get the coords (could be optimised)
for (let val of selected) {
for (let row = 0; row < matrix.length; row++) {
let idx = matrix[row].findIndex((x) => x == val);
if (idx > -1) {
coords.push([row, idx]);
}
}
}
// get the corners
let mtop = Math.min(...coords.map((c) => c[0]));
let mbottom = Math.max(...coords.map((c) => c[0]));
let mleft = Math.min(...coords.map((c) => c[1]));
let mright = Math.max(...coords.map((c) => c[1]));
// check the values
for (let i=mtop; i<=mbottom; i++) {
for (let c=mleft; c<=mright; c++) {
if (! selected.includes(matrix[i][c])) {
return false;
}
}
}
return true;
}
isRectangle(selected);

该代码至少可以通过两种方式进行改进：

• 一旦找到值的坐标，就停止查找它们
• 在查找选定对象坐标时获取拐角位置