Question

我必须绘制具有相同半径的圆的概念图，一旦点击它就应该显示其子项，并且这些子项不应相互重叠。我可以用Math.PI*2/required_length_of_children划分整个圆形位置。

采取立场

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

现在我的问题是如何找出具有可用空间的角度并绘制它们。基本上寻找双曲树的方式安排圈子。在此先感谢您的帮助。

Answer 1

考虑一下，当一个圆的中心位于另一个圆的边缘时，两个中心和一个交点之间的三角形的所有边都已知：R，R和r（其中R是半径较大，而r较小）。为此，我们可以使用一些数学运算来找到大圆心的角度：

https://www.mathsisfun.com/algebra/trig-solving-sss-triangles.html

然后我们可以将其加倍，以便角度占边缘上小圆圈的整个宽度，并且公式最终看起来像这样：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;
  }
}

https://jsfiddle.net/snydergd/rh6jcf30/7/

以圆形方式放置画布圆圈而不重叠

1 个答案: