0

I want to basically make a dashed circle matching values from 0-100. I don't want to get 10 different images representing a different 10 point increment. How can I do it?

enter image description here

Something like this

1
  • Tried UIBezierPath?
    – Undo
    Jun 14, 2013 at 2:27

3 Answers 3

4

While I'm not at home in iOS or Objective-C, the concept is universal.

The position of any point on a circle can be described as sin(angle)*radius,cos(angle)*radius. Therefore you can draw a circle like this yourself by following this concept (in pseudocode):

drawCircle(radius, borderWidth, dashDensity)
{
    int numberOfDashes = radius / dashDensity);
    float radsPerDash = pi * 2 / numberOfDashes;
    float innerRadius = radius - (borderWidth / 2);
    float outerRadius = radius + (borderWidth / 2);

    for(float angle = 0; angle < pi * 2; angle += radsPerDash)
        DrawLine(sin(angle)*innerRadius, cos(angle)*innerRadius,
                 sin(angle)*outerRadius, cos(angle)*outerRadius);
}

You should be able to get it to look like you want from here. You can of course also calculate dashDensity automatically from the radius using a magical constant, and use line width as you see fit for thicker dashes.

For a semi-circle (for example 85% filled), change the end condition of the loop:

for(float angle = 0; angle < (pi * 2 * 0.85); angle += radsPerDash)
1
  • Very helpful. However I ended up doing a custom bezier path. Then i set the color, line pattern (dash) and the fill accordingly to achieve this effect Jun 14, 2013 at 11:13
1

Make a custom subclass of UIView.

Override drawRect.

In it, you will use these functions:

  • UIGraphicsGetCurrentContext
  • CGContextBeginPath
  • some line drawing functions
  • CGContextClosePath
  • CGContextDrawPath

If you look up the documentation of those functions, you'll quickly find cross-references to the functions you need.

1

Sorry to say rtm here, but do it. Create the circle with CGPathCreateMutable and CGPathAddArc, then use CGPathCreateCopyByDashingPath. Done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.