如何在一个点周围的网格中绘制 "rhombus'ish" 形状

Question

几天来我一直在为这个问题苦苦挣扎，我无法理解它背后的逻辑。我有一个 10x10 的网格，在 x = 5 y = 5 的位置有一个正方形，就像 image...

我知道如何围绕范围 = 2 的正方形绘制，就像这个 image。

代码示例：

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代表我们要画红色方块的所有位置。网格上的2s代表我们要画蓝色方块的所有位置。无需知道 x 和 y 点的相对值或范围值。你只需要改变0s,1s,2s在网格上的位置，函数就会画出你想要的图案。

代码如下图：

<!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>

如何在一个点周围的网格中绘制 "rhombus'ish" 形状

How can I draw a "rhombus'ish" shape in a grid around a point

javascript

processing

2d

p5.js