CODEWITHSUNDEEP
jquerycssmathgeometry
asprin
asprin

Reputation: 9823

Calculating angles for a radial menu

I'm working with a copy of a demo page. I've found out that the alignment of the menu items (li) is done using the nth-child pseudo selector and the rotate property. The problems I'm facing with the demo are:

In order to overcome these problems, I decided to use jQuery to count the number of menu items, then apply the appropriate rotate value to each item.

Upon investigating the CSS, I found that in the case of 7 menu items the rotation angle values are:

In summary:

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

Now I'm struggling to figure out the math behind it. I wish to calculate these values dynamically based on the number of menu items. What formula should I use to get the appropriate angles for each child?

Upvotes: 2

Views: 626

Answers (2)

Michael Laszlo
Michael Laszlo

Reputation: 12239

We can work out the formula with a bit of algebra. Let's do it!

Linear sections

Suppose we have a quantity y that we want to divide into n sections of size x that are separated by gaps of size p*x.

If there is a gap after every section except the last one, there are n-1 gaps.

Thus, we have:

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

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

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

For example, if the quantity is 180 and we want to make 7 sections of size x separated by gaps of size 0.1*x, we get:

x  =  360 / (7 + 6*0.1)

   =  23.6842

Now let's consider the total distance from the start of each section to the next.

If a section starts at position t0, the next section starts at position t1 such that:

t1  =  t0 + x + p*x

To continue with the figures above, we get:

t1  =  t0 + 23.6842 + 0.1*23.6842

    =  t0 + 26.0526

Now we know that the section starting points are 26.0526 units apart and each section is 23.6842 units long.

Circular sections

If the quantity that we're subdividing is circular, the calculation is different because the last section and the first section are also separated by a gap. In other words, there are n gaps in the circle.

Now we have:

n*x + n*p*x  =  y

(n + n*p) * x  =  y

x  =  y / (n + n*p)

So if we're dividing 360 degrees into 7 sections of size x with gaps of size 0.1*x, we get:

x  =  360 / (7 + 0.1*7)

   =  46.7532

That's the size of a section. The distance between the starting point t0 of one section and the starting point t1 of the next section is:

t1  =  t0 + x + p*x

    =  t0 + 46.7532 + 0.1*46.7532

    =  51.4285

In summary, the distance from the start of each section to the start of the next section is 51.4285, and the length of each section is 46.7532.

Upvotes: 1

Mehrdad Pedramfar
Mehrdad Pedramfar

Reputation: 11073

calculate the number of menu items. so yo want to divide 360d between them. simply by divide you understand each menu item degree

var each_item_degree = 360 / number_of_items;

you should add from fist child to last child each_item_degree.
it will gives you what you want, but without any margins. for margins between them yo can easily reduse total margins from 360,
for example if for 7 item is 32d witch starts from -20 to 12, start next one from 15d. it gives you 3d margin.
good luck .

Upvotes: 1

Related Questions