如何用JavaScript实现带数字标记的矩形/正方形区域生成？

这个需求完全可行，以下是具体实现方案：

步骤说明 #

1. 解析坐标参数：从传入的四个顶点坐标中提取矩形的边界（最小/最大x、y值），确定网格的行列范围。
2. 生成网格内容：遍历每一行每一列，根据当前位置与左上角顶点的偏移计算标记数字，超出指定范围则显示占位符x。
3. 格式化输出：按照示例格式拼接坐标说明和网格内容。

代码实现 #

function generateSquare(XYone, XYtwo, XYthree, XYfour) {
    // 提取所有坐标点的x、y值
    const allPoints = [XYone, XYtwo, XYthree, XYfour];
    const xCoords = allPoints.map(p => p.x);
    const yCoords = allPoints.map(p => p.y);
    
    // 确定矩形的边界
    const minX = Math.min(...xCoords);
    const maxX = Math.max(...xCoords);
    const minY = Math.min(...yCoords);
    const maxY = Math.max(...yCoords);
    
    // 计算网格的行列数
    const colCount = maxX - minX + 1;
    const rowCount = maxY - minY + 1;
    
    // 生成坐标说明行
    const topLeftLine = `x: ${minX}                    x: ${maxX}`;
    const topRightLine = `y: ${minY}                    y: ${minY}`;
    const bottomLeftLine = `x: ${minX}                   x: ${maxX}`;
    const bottomRightLine = `y: ${maxY}                   y: ${maxY}`;
    
    // 生成网格行
    const gridLines = [];
    for (let y = minY; y <= maxY; y++) {
        const row = [];
        for (let x = minX; x <= maxX; x++) {
            // 计算当前位置与左上角的偏移量，生成标记数字
            const offsetX = x - minX;
            const offsetY = y - minY;
            const num = offsetX + offsetY + 1;
            // 根据示例，数字<=3时显示，否则显示x
            row.push(num <= 3 ? num.toString() : 'x');
        }
        // 格式化每一行的输出
        gridLines.push(`    | ${row.join(' ')} |`);
    }
    
    // 拼接所有内容并输出
    const output = [
        topLeftLine,
        topRightLine,
        ...gridLines,
        bottomLeftLine,
        bottomRightLine
    ].join('\n');
    
    console.log(output);
    return output;
}

// 调用示例：传入矩形的四个顶点坐标
generateSquare(
    {x:1, y:1},
    {x:10, y:1},
    {x:10, y:10},
    {x:1, y:10}
);

输出效果 #

运行上述代码后，控制台将输出与示例一致的内容：

x: 1                    x: 10
y: 1                    y: 1
    | 1 2 3 x x x x x x |
    | 2 3 x x x x x x x |
    | 3 x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
    | x x x x x x x x x |
x: 1                   x: 10
y: 10                   y: 10

自定义调整 #

如果需要修改数字显示的范围（比如显示到5而非3），只需修改代码中num <= 3的判断条件即可。

内容的提问来源于stack exchange，提问作者bombkiml