当前位置：首页 > JavaScript

js实现圆交集

2026-02-03 02:03:44JavaScript

实现圆交集的方法

在JavaScript中，可以通过计算两个圆的圆心距离和半径关系来判断它们是否相交。以下是具体的实现步骤。

判断两圆是否相交

两圆相交的条件是圆心距离小于两圆半径之和且大于两圆半径之差。具体公式如下：

[ d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2} ]

[ |r_1 - r_2| \leq d \leq r_1 + r_2 ]

function circlesIntersect(x1, y1, r1, x2, y2, r2) {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return Math.abs(r1 - r2) <= distance && distance <= r1 + r2;
}

计算两圆的交点

如果两圆相交，可以通过几何公式计算交点坐标。以下是计算步骤：

计算圆心距离 ( d ) 和向量 ( (dx, dy) )。
检查是否满足相交条件。
计算交点坐标。

function getCircleIntersection(x1, y1, r1, x2, y2, r2) {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const d = Math.sqrt(dx * dx + dy * dy);

    if (d > r1 + r2 || d < Math.abs(r1 - r2)) {
        return null; // 无交点
    }

    const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
    const h = Math.sqrt(r1 * r1 - a * a);

    const xMid = x1 + (a * dx) / d;
    const yMid = y1 + (a * dy) / d;

    const x3 = xMid - (h * dy) / d;
    const y3 = yMid + (h * dx) / d;
    const x4 = xMid + (h * dy) / d;
    const y4 = yMid - (h * dx) / d;

    return [
        { x: x3, y: y3 },
        { x: x4, y: y4 }
    ];
}

示例用法

const circle1 = { x: 0, y: 0, r: 5 };
const circle2 = { x: 6, y: 0, r: 3 };

const intersects = circlesIntersect(
    circle1.x, circle1.y, circle1.r,
    circle2.x, circle2.y, circle2.r
);
console.log('是否相交:', intersects);

const intersectionPoints = getCircleIntersection(
    circle1.x, circle1.y, circle1.r,
    circle2.x, circle2.y, circle2.r
);
console.log('交点坐标:', intersectionPoints);

可视化圆交集

如果需要可视化圆交集，可以使用Canvas或SVG绘制圆和交点：

js实现圆交集

function drawCirclesAndIntersections(ctx, circle1, circle2) {
    // 绘制圆1
    ctx.beginPath();
    ctx.arc(circle1.x, circle1.y, circle1.r, 0, Math.PI * 2);
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    // 绘制圆2
    ctx.beginPath();
    ctx.arc(circle2.x, circle2.y, circle2.r, 0, Math.PI * 2);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    // 绘制交点
    const points = getCircleIntersection(
        circle1.x, circle1.y, circle1.r,
        circle2.x, circle2.y, circle2.r
    );
    if (points) {
        ctx.fillStyle = 'green';
        points.forEach(point => {
            ctx.beginPath();
            ctx.arc(point.x, point.y, 3, 0, Math.PI * 2);
            ctx.fill();
        });
    }
}