围绕一个点同心排列点

Question

我正在尝试围绕给定半径将给定数量的元素排列成一个圆，彼此等距。该函数将 return {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[];
}

谢谢，此致，

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

围绕一个点同心排列点

Concentric arrangement of points around a point

javascript

math

geometry