请问几个圆围绕一个圆为中心这种图形的画法，Canvas或者SVG都可以

Question

我想画一个光缆的横截面图，类似于下面这样，外层圆的数量不等，围绕一个中心圆，中心圆的大小根据外层圆的数量可以变，请问这种解构应该怎么计算各个圆的半径和坐标呢？谢谢！

Answer 1

首先设内芯半径为ri，外芯半径为ro，外芯数量为count，并假设内芯和外芯紧贴，可列出公式：
(ri + ro) * Math.sin(Math.PI * 2 / (2 * count)) = ro
即
(ri + ro) * Math.sin(Math.PI / count) = ro

第n个外芯的圆心坐标为
ro(n).x = ri.x + (ri + ro) * Math.sin(Math.PI * 2 * (n / count))
ro(n).y = ri.y + (ri + ro) * Math.cos(Math.PI * 2 * (n / count))

接下来就是控制变量了，计算未知量了
比如ri固定，count固定:
ro = ri * Math.sin(Math.PI / count) / (1 - Math.sin(Math.PI / count))

PS:
如果 内芯和内芯 以及 内芯和外芯 保持固定间距space，则公式变为：
(ri + ro + space) * Math.sin(Math.PI / count) = ro + space / 2
令 sinA = Math.sin(Math.PI / count)
ro = (ri * sinA + space * (sinA - 0.5)) / (1 - sinA)