javascript - 如何计算任意两个圆SVG的边缘的最小距离

Question

我知道您通常会使用毕达哥拉斯定理来计算点之间的距离，但圆没有 x1 和 x2。这是一个例子。如果没有这些值，我如何计算距离？

circle {
  fill: orange;
}

<svg transform="translate(0, 22)">
  <circle class="point" cx="121.78235294117647" cy="13.200000000000001" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.047]"></circle>
  <circle class="point" cx="125.2764705882353" cy="30.28235294117647" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.042]"></circle>
  <circle class="point" cx="112.8529411764706" cy="30.67058823529412" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.037]"></circle>
  <circle class="point" cx="103.53529411764706" cy="32.22352941176471" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.047]">
</svg>

Answer 1

两个圆之间的距离等于圆心距离减去半径之和。

function distanceOfPoints(p0, p1) {
    let dx = p0.x - p1.x;
    let dy = p0.y - p1.y;
    return Math.sqrt(dx*dx + dy*dy);
}

function distanceOfCircles(cen0, rad0, cen1, rad1) {
    // if the circles intersect, our distance might be negative
    return Math.max(0, distanceOfPoints(cen0, cen1) - rad0 - rad1);
}

在 SVG 中，cx 和 cy 是圆心(cen0, cen1)和r 是它们的半径(rad0, rad1)。

要获得所有圆圈之间的最小距离，您可以遍历所有圆圈对，并在找到更小的圆圈时更新结果距离。