jquery - 计算径向菜单的 Angular

Question

我正在使用 a demo page 的副本。我发现菜单项 (li) 的对齐是使用 nth-child 伪选择器和 rotate 属性完成的。我在演示中遇到的问题是:

• 菜单项的数量是固定的。在我计划使用此功能的页面上，菜单项的数量是动态的，因为它会随着一个用户的不同而变化。

• 它的方向最大为 180 度，而我希望它是完整的 360 度。

为了克服这些问题，我决定使用 jQuery 来计算菜单项的数量，然后对每个元素应用适当的 rotate 值。

在研究 CSS 后，我发现在有 7 个菜单项的情况下，旋转 Angular 值为:

• 第一个 child -20度
• 第二个 child 12 度
• 第三个 child 为 44 度
• 第四个 child 为 76 度，依此类推。

总结:

-20 degrees for the first child and keep adding 32 degrees for the next 6 children

现在我正在努力找出其背后的数学原理。我希望根据菜单项的数量动态计算这些值。我应该使用什么公式来为每个 child 找到合适的 Angular ？

Answer 1

我们可以用一些代数来算出这个公式。让我们开始吧!

线性部分

假设我们有一个数量 y，我们希望将其分成 n 个大小为 x 的部分，这些部分之间由大小为 的间隙分隔>p*x.

如果除最后一个部分之外的每个部分之后都有间隙，则存在 n-1 个间隙。

因此，我们有:

n*x + (n-1)*p*x  =  y

(n + (n-1)*p) * x  =  y

x  =  y / (n + (n-1)*p)

例如，如果数量为 180，我们想要制作 7 个大小为 x 的部分，并用大小为 0.1*x 的间隙分隔，我们得到:

x  =  360 / (7 + 6*0.1)

   =  23.6842

现在让我们考虑从每个部分的开头到下一个部分的总距离。

如果一个部分从位置 t0 开始，则下一部分从位置 t1 开始，这样:

t1  =  t0 + x + p*x

继续上面的数字，我们得到:

t1  =  t0 + 23.6842 + 0.1*23.6842

    =  t0 + 26.0526

现在我们知道，各部分的起点相距 26.0526 个单位，每个部分的长度为 23.6842 个单位。

圆形截面

如果我们分割的数量是圆形的，则计算会有所不同，因为最后一部分和第一部分也被间隙分开。换句话说，圆中有 n 个间隙。

现在我们有:

n*x + n*p*x  =  y

(n + n*p) * x  =  y

x  =  y / (n + n*p)

因此，如果我们将 360 度分为 7 个大小为 x 的部分，间隙大小为 0.1*x，我们会得到:

x  =  360 / (7 + 0.1*7)

   =  46.7532

这是一个部分的大小。一段起始点t0与下一段起始点t1之间的距离为:

t1  =  t0 + x + p*x

    =  t0 + 46.7532 + 0.1*46.7532

    =  51.4285

综上所述，每个节的起始点到下一个节的起始点的距离为 51.4285，每个节的长度为 46.7532。