如何在圆形网格内找到特定大小的所有正方形

时间:2019-01-02 15:41:32

标签: javascript algorithm html5-canvas

我正在尝试在画布的圆形区域中绘制各种不重叠的正方形。

最初,我试图在圆内的任意位置创建正方形,并检查它们是否重叠,但是一段时间之后,我意识到对于我需要的东西来说效率太低且太复杂了。

我想要一个算法,该算法使用圆的中心坐标,圆的半径和正方形网格的大小,并返回坐标数组,以获取具有所有边缘的网格上每个正方形的位置在圆内。

1 个答案:

答案 0 :(得分:1)

我假设您希望圆中有未填充的空间,而不是用局部正方形填充?如果是这样,则有效的正方形将是圆内所有四个角都位于其中的正方形,因此简单的循环将为您找到它们。下面的代码应该做到这一点,尽管您可能想进一步压缩一下,但为了清楚起见,我将其拆分了。

const size = 4; // The size of each square.
const squareCoords = []; // The top-left corners of each valid square.
const circle = [10, 10, 10]; // The circle, in the form [centerX, centerY, radius]

function DistanceSquared(x1, y1, x2, y2) {
    return (x2-x1) ** 2 + (y2-y1) ** 2;
}
function isInsideCircle(x, y, cx, cy, r) {
    return (DistanceSquared(x, y, cx, cy) <= r ** 2);
}

let topLeftInside = false, bottomRightInside = false, topRightInside = false, bottomLeftInside = false;
for (let xx = circle[0] - circle[2]; xx < circle[0] + circle[2]; xx += size) {
    for (let yy = circle[1] - circle[2]; yy < circle[1] + circle[2]; yy += size) {
        topLeftInside = isInsideCircle(xx, yy, circle[0], circle[1], circle[2]);
        bottomRightInside = isInsideCircle(xx + size, yy + size, circle[0], circle[1], circle[2]);
        bottomLeftInside = isInsideCircle(xx, yy + size, circle[0], circle[1], circle[2]);
        topRightInside = isInsideCircle(xx + size, yy, circle[0], circle[1], circle[2]);
        if (topLeftInside && bottomRightInside && bottomLeftInside && topRightInside) {
            squareCoords.push([xx, yy]);
        }
    }
}