如何在半圆上定位可变数量的元素

Question

我看到了这个很棒的圆形菜单http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/

我的数学太糟糕了，无法修改它以仅将项目分布在圆圈的上半部分。

此外，我想摆脱它的相对 % 定位，让项目以像素为单位散布预定的距离。 因此不再需要菜单边界框。

Answer 1

dtheta = dist / rad;
num = Math.floor(PI / dtheta);
theta = (PI - num * dtheta) / 2;

for (var i = 0; i < num; i++)
{
   x = center_x + rad * cos(theta);
   y = center_y + rad * sin(theta);
   theta += dtheta;
   //drawelement(elements[i], x, y);
} 

• dist : 菜单元素之间的像素距离
• elements ：菜单元素列表
• rad : 圆的半径
• center_x, center_y : 中心坐标
• num : 可绘制元素的最大数量

注意，传递给drawelement的坐标是每个菜单元素中心的坐标，而不是左上角的坐标。