Question

几天来我一直在努力解决这个问题，但我无法理解其背后的逻辑。我有一个10x10的网格，在x = 5 y = 5的位置上有一个正方形，就像image ...

我知道如何像image这样在范围为2的正方形周围绘制。

代码示例：

const pos = {x: 5, y: 5};
const range = 2; // Range can vary
const square = [...] // Square is an array of positions like [{x: 0, y: 0}, {x: 1, y: 0} ...]

for ... {
    if (pos.x - range <= square[i].x && pos.x + range >= square[i].x &&
        pos.y - range <= square[i].y && pos.y + range >= square[i].y) {
        fill("red");
        square(square[i].x * 10,
           square[i].y * 10,
           10);
    }
}

我想要达到is this one的理想效果，但是我不知道如何实现...

Answer 1

此解决方案是解决问题的超级简单方法。它涉及使用以10 X 10的数字网格排列的数组。网格上的0代表我们要绘制白色正方形的所有位置。网格上的1代表我们要绘制红色正方形的所有位置。网格上的2代表我们要绘制蓝色正方形的所有位置。无需知道x和y点的相对值或范围值。您需要做的就是更改网格上0、1、2的位置，该函数将绘制您想要的图案。

代码如下所示：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
/* 
 * The grid is a 10 by 10 array of numbers. 
 * The 0s represent all the spots where you want a white square. 
 * The 1s represent all the spots where you want a red square.
 * The 2s represent all the spots where you want a blue square(the middle spot in this case)
 */  
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,0,1,1,1,0,0,0],
    [0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
function drawSquares(grid)
{ 
    grid.forEach((row,rowIndex) => 
    {
        row.forEach((square,squareIndex) => 
        {   
            switch(square)
            {
                case 1: //if the grid value is a 1, draw a red square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "red";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";  
                    ctx.stroke();
                    break;
                case 2: //if the grid value is a 2, draw a blue square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "blue";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break;
                case 0: //if the grid value is a 0, draw a white square
                    ctx.beginPath();
                    ctx.rect(50*squareIndex,50* rowIndex, 50, 50);
                    ctx.fillStyle = "white";
                    ctx.fill(); 
                    ctx.lineWidth   = "1";
                    ctx.strokeStyle = "black";
                    ctx.stroke();
                    break; 
            } 
        }); 
    });   
}
drawSquares(grid);
</script>  
</body>
</html>

以上代码的输出如下：

用法示例：

//Example 1: 
//To achieve your second result,the grid is changed as follows:
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,2,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
drawSquares(grid);//after the function call, the result is as shown below

//Example 2: 
//To achieve your first result,the grid is changed as follows:
var grid = 
[ 
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,2,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0] 
];
drawSquares(grid);//after the function call, the result is as shown below

Answer 2

文件到pos的距离必须小于range。创建到嵌套循环并遍历每个字段。计算x和y方向上的距离（dx，dy）。使用abs计算绝对距离。评估dx和dy的总和是否小于或等于range：

for (let i = 0; i < 10; ++ i) {
    for (let j = 0; j < 10; ++ j) {
        let dx = abs(pos.x - i);
        let dy = abs(pos.y - j);

        if (dx + dy <= range) {
            fill(dx + dy == 0 ? "blue" : "red");
            rect(gx*i, gy*j, gx, gy);
        }
    }
}

查看示例：

function setup() {
    createCanvas(400, 400);
}

const pos = {x: 5, y: 5};
const range = 2;

function draw() {
   
    let gx = width / 10;
    let gy = height / 10;

    background((255, 255, 255));

    noStroke();
    for (let i = 0; i < 10; ++ i) {
        for (let j = 0; j < 10; ++ j) {
            let dx = abs(pos.x - i);
            let dy = abs(pos.y - j);
            
            if (dx + dy <= range) {
                fill(dx + dy == 0 ? "blue" : "red");
                rect(gx*i, gy*j, gx, gy);
            }
        }
    }

    noFill();
    stroke("black");
    for (let i = 1; i < 10; ++ i) {
        line(gx*i, 0, gx*i, height);
        line(0, gy*i, width, gy*i);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

如何在点周围的网格中绘制“菱形”形状

2 个答案: