Drawing even sized tabs around a circle

Question

I need to draw some evenly sized and spaced tabs around a circle:

I'm in objective c. Can create an oval like so

UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(84, 22, 75, 75)];
[UIColor.grayColor setFill];
[ovalPath fill];

Trying to figure out how to get these tabs around it though. Could anyone give me some pointers to how I might solve this? Need to draw from 1 - 20 tabs around the circle. Wondering if there is some kind of algorithm.

Answer 1

This will require you to do some math. I'm not going to do the math for you, but I can give you an idea of what you need to do.

With six evenly-spaced tabs, the center points of each tab on the circle are 60 degrees apart. If we assume that 0 degrees is straight up, then you want tabs centered at 0, 60, 120, 180, 240, and 300 degrees. And since it doesn't look the edges of the tabs meet, I'll assume that each tab covers 50 degrees of arc.

It looks like the tops of the tabs aren't flat, but rather segments of a larger circle. If we call the radius of the circle in the picture r, then the radius of that larger circle is r + h, where h is the height of the tabs.

If the center of the first tab is at 0 degrees, the left edge of the first tab is at -25 degrees (or 335 degrees), and the right edge of the first tab is at 25 degrees.

So, to draw the first tab:

• Find the point on the inner circle that is at 335 degrees. Then find the point on the outer circle that is at 335 degrees. Draw a line between those two points. That is the left edge of the tab.
• Find the point on the inner circle that is at 25 degrees. Then find the corresponding point on the outer circle and draw a line between them. That is the right edge of the tab.
• Draw a 50 degree arc with radius r + h between the two outer circle points.
• Your tab is drawn.

Then do the same thing for the arc that is centered at 60 degrees. Your lines would be at 25 and 85 degrees. Repeat that process for the other tabs.

To find a point on a circle at a given angle, see Calculating point on a circle's circumference from angle in C#?.

To draw an arc, see http://www.raywenderlich.com/33193/core-graphics-tutorial-arcs-and-paths.

If the tabs cover more or less than 50 degrees of arc, adjust the numbers above accordingly. That is, if the tab covers 40 degrees of arc, then the left edge of the first tab would be at -20 (340) degrees, rather than -25 (335) degrees.

Note that you'll probably need to convert all of your degrees measurements to radians.