javascript - 如何为 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>

我希望所有的服务都像一个泡沫一样围绕在 parent 身边。我需要能够计算每个服务的位置。我计划将父级定位为“相对”和“绝对”服务。我想使用 javascript 来计算服务数量和位置，使用 pi 或 sin 或数学人员使用的任何东西。我的数学成绩为零。

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

Answer 1

如果您希望“服务 1”出现在顶部，然后其余的顺时针显示(即就像时钟上的指针)，那么您需要的基本数学是这样的:

首先 - 找出有多少个元素:

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

然后 0 .. count - 1 中的每个元素 i 需要以 Angular theta 定位:

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 轴逆时针计算 Angular 标准笛卡尔惯例不同，因此交换了 sin 和 cos 项并且 top 有一个减法而不是加法，以说明 Y 坐标在页面顶部从零开始的方式。

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