围绕一个点的点同心排列

【问题标题】：Concentric arrangement of points around a point围绕一个点的点同心排列
【发布时间】：2021-05-24 10:44:39
【问题描述】：

我正在尝试围绕给定半径将给定数量的元素排列成一个圆形，彼此等距。该函数将返回一个 {x,y} 数组，如下所示：

/*
initialPoint is the x,y point (default 0,0 pixels)
radius (default 400 pixels)
count (default 4, number of elements, here it should give a N, E, S, W final points)
*/    
function getConcentricRingPoints(initialPoint, radius, count) {
   var results = []; //populated with x and y coordonnates for each point
   ...
    
   return results[];
}

谢谢，问候，

【问题讨论】：

标签： javascript math geometry

【解决方案1】：

将圆 (2π) 分成 N 个相等的角，并计算每个点的位置为

x = centerX + cos(angle * n) * radius
y = centerY + sin(angle * n) * radius

代码：

function radialPoints(center, radius, number) {
    let angle = Math.PI * 2 / number;
    let res = []
    
    for (let n = 0; n < number; n++)
        res.push([
            center[0] + Math.cos(angle * n) * radius,
            center[1] + Math.sin(angle * n) * radius,
        ])

    return res    
}


for (let [x, y] of radialPoints([200, 90], 80, 20)) {
    let div = document.createElement('div')
    div.style.left = x + 'px'
    div.style.top = y + 'px'
    document.body.appendChild(div)
}

div {
  position: fixed;
  background: red;
  width: 5px;
  height: 5px;
}

【讨论】：