JavaScript判断两个图形是否相交的方法详解

在开发中，有时候我们需要判断两个图形是否相交，这在游戏开发、碰撞检测等领域尤为重要。在JavaScript中，实现这一功能需要考虑图形的几何特性和算法。以下是一些常见图形的相交判断方法。

一、矩形相交检测

原理

矩形相交检测通常使用边界框（Bounding Box）的方法，只需要比较两个矩形的边界框即可。如果两个矩形的最小边界框之间有重叠部分，则认为它们相交。

代码示例

function checkRectangleIntersection(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

// 矩形对象
let rect1 = { x: 10, y: 10, width: 100, height: 100 };
let rect2 = { x: 60, y: 60, width: 100, height: 100 };

// 检测相交
let result = checkRectangleIntersection(rect1, rect2);
console.log(result); // 输出：true 或 false

二、圆形相交检测

原理

圆形相交检测可以通过计算两个圆心之间的距离与两个圆的半径之和比较来判断。如果两圆心距离小于半径之和，则认为它们相交。

代码示例

function checkCircleIntersection(circle1, circle2) {
    const dx = circle1.x - circle2.x;
    const dy = circle1.y - circle2.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance < circle1.radius + circle2.radius;
}

// 圆形对象
let circle1 = { x: 50, y: 50, radius: 30 };
let circle2 = { x: 90, y: 90, radius: 20 };

// 检测相交
let result = checkCircleIntersection(circle1, circle2);
console.log(result); // 输出：true 或 false

三、椭圆相交检测

原理

椭圆相交检测与圆形类似，通过计算两圆心之间的距离和两个椭圆的轴长度来判断。如果两圆心距离小于椭圆轴之和，则认为它们相交。

代码示例

function checkEllipseIntersection(ellipse1, ellipse2) {
    const dx = ellipse1.x - ellipse2.x;
    const dy = ellipse1.y - ellipse2.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance < ellipse1.ax + ellipse2.ax;
}

// 椭圆对象
let ellipse1 = { x: 50, y: 50, ax: 30, ay: 20 };
let ellipse2 = { x: 90, y: 90, ax: 20, ay: 30 };

// 检测相交
let result = checkEllipseIntersection(ellipse1, ellipse2);
console.log(result); // 输出：true 或 false

四、多边形相交检测

原理

多边形相交检测较为复杂，可以采用射线法（Ray Casting Algorithm）进行判断。具体步骤如下：

1. 将多边形的所有边表示为射线。
2. 对每个射线，检查它与另一多边形的每条边是否有交点。
3. 如果射线与另一多边形的所有边都无交点，则两多边形不相交。

代码示例

function checkPolygonIntersection(poly1, poly2) {
    for (let i = 0; i < poly1.length; i++) {
        let ray = { x1: poly1[i].x, y1: poly1[i].y, x2: poly1[(i + 1) % poly1.length].x, y2: poly1[(i + 1) % poly1.length].y };
        let isIntersecting = false;
        for (let j = 0; j < poly2.length; j++) {
            if (rayCast(ray, poly2[j])) {
                isIntersecting = true;
                break;
            }
        }
        if (!isIntersecting) {
            return false;
        }
    }
    return true;
}

function rayCast(ray, point) {
    if ((ray.x1 < point.x && point.x <= ray.x2) || (ray.x2 < point.x && point.x <= ray.x1)) {
        const y = (ray.x1 - point.x) * (ray.y2 - ray.y1) / (ray.x2 - ray.x1) + ray.y1;
        if (y >= Math.min(ray.y1, ray.y2) && y <= Math.max(ray.y1, ray.y2)) {
            return true;
        }
    }
    return false;
}

// 多边形对象
let poly1 = [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }, { x: 0, y: 100 }];
let poly2 = [{ x: 50, y: 50 }, { x: 150, y: 50 }, { x: 150, y: 150 }, { x: 50, y: 150 }];

// 检测相交
let result = checkPolygonIntersection(poly1, poly2);
console.log(result); // 输出：true 或 false

通过以上几种方法，可以在JavaScript中实现对不同图形相交的检测。这些方法在实际应用中可根据需要灵活调整和优化。