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

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：可绘制元素的最大数量

N.B。传递给drawelement的坐标是每个菜单元素的 center 的坐标，而不是左上角的坐标。