如何计算CSS的圆的x和y

Question

我不是数学家.我只是一个CSS人.我正在尝试使用javascript计算对象的位置.想想一个无序的列表.

<ul>
  <li>
   <a href="#">Parent 1</a>
   <ul>
      <li>Service 1</li>
      <li>Service 2</li>
      <li>Service 3</li>
      <li>Service 4</li>
      <li>Service 5</li>
      ...
   </ul>
  </li>
</ul>

我希望像父母那样拥有围绕父母的所有服务.我需要能够计算每项服务的位置.我打算让父母的位置"相对",服务"绝对".我想使用javascript计算服务和使用pi或sin或者数学家使用的任何位置.我在数学上是零.

到目前为止我得到的是 http://codepen.io/anon/pen/oaidr,它不是可重复使用的功能.

Answer 1

如果你想让"服务1"出现在顶部,然后其余部分顺时针(即就像时钟上的指针一样),那么你需要的基本数学是这样的:

首先 - 弄清楚有多少元素:

var count = $('#myList > li').length;

然后,每个元件i从0 .. count - 1将需要被定位在θ角:

var theta = 2 * Math.PI * (i / count);  2*pi radians split into "count" sections

给坐标:

var left = horizontalCenter + radius * Math.sin(theta);
var top  = verticalCenter   - radius * Math.cos(theta);

请记住,这只是设置元素的左上角 - 可能需要进一步调整以计算元素中心的位置.

注意:这与相对于正X轴逆时针计算的角度的标准笛卡尔惯例是不同的,因此为什么sin和cos交换项并且top有一个减法而不是加法来解释Y坐标从零开始的方式在页面顶部.

见http://jsfiddle.net/alnitak/ah1k1mo3/