css - 如何将 3 个不同半径 "stick"的圆放在一起？ (带有示例图像)

Question

根据结果集中给定元素的存在，我有一个由三个不同大小的圆圈表示的图表。第一个圆圈始终设置为 100%，因为这是最大的圆圈，其他两个是相对于最大圆圈的百分比。

问题是我正在尝试使用 css 来渲染它们，但我不知道弄清楚如何使它们沿着它们的边“粘”在一起所必需的数学。

已知的部分将是每个圆的半径，并且总是首先返回最大的。

这是我要完成的示例:

我怎样才能在数学上实现这一点，以便我可以为每个圆圈提供一个 margin-top 和 margin-left 来以这种方式定位它们？

我可以将最大的圆定位在 0,0 处，将第二大的圆定位在两个直径之差的一半处，使中心点对齐。真正的挑战是第三小的圆圈，根据其他两个圆圈的位置知道将其放置在何处。

Answer 1

用边radius0、radius1和radius2构建三 Angular 形并计算第三个顶点坐标(最小圆心)。我用过 formula (23) from here在我的计算中。有Delphi代码，但希望原理清晰。

var
  r0, r1, r2: Integer;
  x0, x1, x2, y0, y1, y2: Integer;
  a, b, c, ca: Double;
begin
  //some intialization
  Canvas.FillRect(ClientRect);
  Randomize;
  r0 := 200;
  r1 := Round(r0 * (0.25 + 0.75 * Random));
  r2 := Round(r1 * (0.25 + 0.75 * Random));

  //circle centers' coordinates
  //biggest
  x0 := r0;
  y0 := r0;

  //second
  x1 := x0 + r0 + r1;
  y1 := y0;

  //triangle sides
  c := r0 + r1;
  b := r0 + r2;
  a := r1 + r2;

  //x-shift
  ca := (c * c + b * b - a * a) / (2.0 * c);
  x2 := x0 + Round(ca);

  //y-shift is the height of triangle
  //Pythagor's rule
  y2 := y0 + Round(Sqrt(b * b - ca * ca));

  //draw calculated circles
  Canvas.Ellipse(x0 - r0, y0 - r0, x0 + r0 + 1, y0 + r0 + 1);
  Canvas.Ellipse(x1 - r1, y1 - r1, x1 + r1 + 1, y1 + r1 + 1);
  Canvas.Ellipse(x2 - r2, y2 - r2, x2 + r2 + 1, y2 + r2 + 1);

示例输出: