javascript - Circle : get max (x, y) 边界坐标

Question

我有一个容器圆(红色)，半径为 140 像素。 使用 Javascript，我在这个容器中添加了小圆圈。该圆的 x 和 y 坐标是动态设置的。

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

我有什么:

我想要什么:

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

我尝试过的一些例子:

1. 将我的容器“切割”成几个区域，每个区域都有一个 x 或 y 最大值。

之后，我写了很多条件，例如:

if (y >= 70 && y <= 210 && x >= 280) {
x = 250;
}

不太实用...

在SO中，我发现这段代码在我的容器周围画了圆圈。

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);
}

这并不是我搜索的内容...

如何标准化蓝色圆圈位置？

谢谢!

Answer 1

假设大圆的圆心(X,Y)和半径R(你说的是140px)，假设小圆的半径r 并且您希望小圆位于大圆边界上的 Angular theta 处(在您的图片中，它看起来约为 -70 度)。小圆中心的坐标为:

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