Javascript 以不重叠的圆形方式放置画布圆

我必须绘制具有相同半径的圆的概念图，一旦单击它，它应该显示它的子对象，这些子对象不应该相互重叠。我可以用

Math.PI*2/所需的\u子项长度\u来划分整个圆形位置。并与

 var new_left=Math.round(origin.x+radius*Math.cos(angle));
 var new_top=Math.round(origin.y+radius*Math.sin(angle));

现在我的问题是如何找出有可用空间的角度并画出它们。基本上寻找双曲线树的方式排列的圆圈。
提前感谢您的帮助。
如果您仔细想想，当一个圆的中心位于另一个圆的边上时，两个中心和一个交点之间的三角形的所有边都是已知的：R、R和R（其中R是大半径，R是小半径）。我们可以使用一些数学方法来计算大圆中心的角度：


然后我们可以将其加倍，使角度占到边上小圆的整个宽度，公式最终如下：
2*Math.acos（1-（r**2）/（2*r**2））

现在，为了确保这个数学是正确的，我们可以在画布上绘制，以确保以该角度放置的圆不会重叠：

function testShape(middleX, middleY, R, r, n) {
  var i, angle = 0;
  var inc = 2*Math.acos(1 - (r**2)/(2*R**2));

  circle(middleX, middleY, "blue", R);

  for (i = 0; i < n; i++) {
    circle(middleX+Math.cos(angle)*R, middleY+Math.sin(angle)*R, "red", r);
    angle += inc;
  }
}

函数testShape（middleX，middleY，R，R，n）{
变量i，角度=0；
var inc=2*Math.acos（1-（r**2）/（2*r**2））；
圆圈（中间，中间，“蓝色”，R）；
对于（i=0；i

听起来更像是一道数学题。我已经找到了答案。我们可以从根部做一个角度的解剖。如果root有三个子元素，我们必须先除以3，每个子元素得到120度。计算子线的角度，使用120度来放置子线。当我们分给每个孩子的学位时，我们增加了线的长度，然后放置它。@ SURESH如果你有一个工作答案，请考虑添加一个问题的答案。也许其他人也面临类似的问题谢谢你的精彩回答。我只是认为你没有正确地将度转换为弧度，因此如果有人将起始角度更改为90度，它将无法准确定位第一个圆。因此，这是最新版本，适用于需要它的人：