shabbirv
shabbirv

Reputation: 9098

drawRect Circle inside of circle used to show progress

I'm trying to show progress by having a circle fill up with another circle inside of it. Can someone help me achieve this? I may be going about this the wrong way. Here is my code:

- (void)drawRect:(CGRect)rect
{
    rect = CGRectMake(0, 400, 500, 500);
    [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 500, 500) cornerRadius:50.0] addClip];


    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(contextRef, 2.0);
    CGContextSetRGBFillColor(contextRef, 111/255.0f, 116/255.0f, 128/255.0f, 1.0);
    CGRect circlePoint = (CGRectMake(0, 0, rect.size.width, rect.size.height));
    CGContextFillEllipseInRect(contextRef, circlePoint);

    CGContextBeginPath(contextRef);

    float c = 20; //Number that should cause the green progress to increase and decrease
    CGContextAddArc(contextRef, 250, 250, 250, 0, M_PI, 0);
    CGContextClosePath(contextRef); // could be omitted
    UIColor *color = [UIColor greenColor];
    CGContextSetFillColorWithColor(contextRef, color.CGColor);
    CGContextFillPath(contextRef);
}

And here is a screenshot of how it looks right now. I basically want to be able to control the progress of the green inside using my float c; variable.

I've tried playing around with CGContextAddArc, but I can't get grow to the size of the circle as "c" increases and same when I decrease the value of "c"

c

Upvotes: 0

Views: 422

Answers (1)

Daij-Djan
Daij-Djan

Reputation: 50099

use your c to say from where to where

// draw the pie part
CGContextMoveToPoint(_viewContext, centerX, centerY);
CGContextAddArc(_viewContext, centerX, centerY, pieRadius, radians(startDegrees), radians(endDegrees), 0);
CGContextClosePath(_viewContext);
CGContextFillPath(_viewContext);
  • startDegrees = 0
  • endDegress = c
  • _viewContext = contextRef
  • centerX/CenterY = center of bounds
  • PieRadius = radius you want :D in pixels IIRC

to convert deg to rad

#define pi 3.14159265
double radians(double percentage)
{
    return (percentage/100)*360 * (pi/180);
}

Upvotes: 1

Related Questions