如何将不同半径的3个圆圈"粘在一起"？(带示例图片)

Question

我有一个图表,由三个不同大小的圆圈表示,基于结果集中给定元素的存在.第一个圆圈始终设置为100%,这是圆圈最大的圆圈,另外两个圆圈是最大圆圈的相对百分比.

问题是我正在尝试使用css来渲染它们,而我不知道如何弄清楚如何使它们全部"粘"在一起.

已知的部分将是每个圆的半径,并且最大的部分始终首先返回.

这是我想要完成的一个例子:

如何以数学方式完成此操作,以便我可以为每个圆提供一个边距顶部和边距左边,以这种方式定位它们？

我可以将最大圆圈定位在0,0,将第二大圆圈定位在2个直径之间的差异的一半,使得中心点对齐.真正的挑战是第三个最小的圆圈,根据其他两个圆圈的位置知道在哪里定位它.

Answer 1

构建边长为radius0,radius1和radius2的三角形,并计算第三个顶点坐标(最小圆心).我在计算中使用了公式(23).有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);

示例输出: