Question

我有一个容器圈（红色），140px半径。使用Javascript，我在此容器中添加小圆圈。此圆圈的x和y坐标是动态设置的。

在某些情况下，会在容器外部绘制蓝色圆圈。我想重新计算x和y坐标，将这些圆圈放在容器的边框上。

我有什么：

我想要的是什么：

我尝试使用css / JQuery和SVG，测试了很多数学公式和复杂的手工制作解决方案......

我尝试的一些例子：

之后，我写了很多条件，如：

var item = 5;
for(var i =0; i<items; i++){
var x = 140 + 140*Math.cos(2*Math.PI*i/items);
var y = 140 + 140*Math.sin(2*Math.PI*i/items);
}

不太实际......

在SO中，我发现这个代码在我的容器周围绘制了圆圈。

{{1}}

不是我搜索过的......

如何规范化蓝圈位置？

谢谢！

Answer 1

假设大圆圈的中心为(X,Y)，半径为R（您说的是140px），并假设小圆圈的半径为r，您希望小圆圈位于角度theta位于较大圆的边界上（在图片中看起来大约为-70度）。小圆圈中心的坐标为：

( (R-r)cos(theta)+X, (R-r)sin(theta)+Y )

Answer 2

为您提供圆圈坐标的公式（如果我们假设它的纹波位于x = 0和y = 0）是x^2 + y^2 = 140^2。

你有半径为r的蓝色圆圈，那么这些蓝色圆圈的中心将位于x^2 + y^2 = (140 - r)^2。

现在每个x都很容易找到y坐标。

y1 = sqrt((140 - r)^2 - x^2)

和

y2 = -sqrt((140 - r)^2 - x^2)

考虑偏移值（红色圆圈的中心坐标）。