使用javascript检查重叠圆形元素的函数？

Question

我写了这个函数来检查两个重叠的元素
（矩形），
如下面第一张图所示。

问题是，我想使用圆形电子元件， 如下面第二张图所示。

所以我想我需要添加一些Math.PI和半径计算， 非常感谢任何帮助...

       var checkOverlap = function (a, b) {
            if (
                ((a.left < b.left && a.left + a.width > b.left) ||
                (a.left > b.left && a.left + a.width < b.left + b.width) ||
                (a.left > b.left && a.left + a.width > b.left + b.width)) &&
                ((a.top < b.top && a.top + a.height > b.top) ||
                (a.top > b.top && a.top + a.height > b.top) ||
                (a.top > b.top && a.top < b.top + b.height)) &&
                (a.left < b.left + b.width) &&
                (a.top < b.top + b.height)
            ) {
                return true;
            }
        };

Answer 1

当且仅当它们的中心之间的距离不超过它们的半径之和时，两个圆盘相交。

如果平面上两点的坐标为(x1, y1)和(x2, y2)，则它们之间的距离为(x1 - x2)^2 + (y1 - y2)^2的平方根。

你应该可以从这里拿起它。

Answer 2

检查圆圈是否重叠比使用矩形进行类似检查更容易。

假设你没有处理省略号，你只需要计算它们的中心之间的距离（Pythagoras theorem）是否小于它们的半径之和：

// long argument names to be more descriptive

function checkIfCirclesOverlap(circle1CenterX, circle1CenterY, circle1Radius, circle2CenterX, circle2CenterY, circle2Radius) {
    const xDistance = circle1CenterX - circle2CenterX;
    const yDistance = circle1CenterY - circle2CenterY;
    const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
    return distance < circle1Radius + circle2Radius;
}