Drawing a circle ,filled different parts with different color

Question

I am a novice ios programmer.In one of my project i need to draw a circle in which different portion of the circle would be filled up with different colors.I can draw the circle.But i am not being able to determine the different portion of the circle and fill them with different color.Here is an screenshot to clarify what i want to draw.

A help would be appreciated.

Answer 1

You can use UIBezierPath which has a method addArcWithCenter:radius:startAngle:endAngle:clockwise: where you can specify radius, center and angles. The code could look like this which draws a quarter of a circle in green:

CGPoint center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f, CGRectGetHeight(self.bounds) / 2.f);
CGFloat radius = center.x - 10.f;

UIBezierPath *portionPath = [UIBezierPath bezierPath];
[portionPath moveToPoint:center];
[portionPath addArcWithCenter:center radius:radius startAngle:0.f endAngle:M_PI_2 clockwise:YES];
[portionPath closePath];

[[UIColor greenColor] setFill];
[portionPath fill];

UIBezierPath *portionPath1 = [UIBezierPath bezierPath];
[portionPath1 moveToPoint:center];
[portionPath1 addArcWithCenter:center radius:radius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
[portionPath1 closePath];

[[UIColor blueColor] setFill];
[portionPath1 fill];

Of course you can also consider to use a library like CorePlot.

Answer 2

we have 6 class

CircleViewController.h, CircleViewController.m, GraphView.h, GraphView.h, CirclePart.h, CirclePart.m

CirclePart.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface CirclePart : NSObject

@property (nonatomic) CGFloat startDegree;
@property (nonatomic) CGFloat endDegree;
@property (nonatomic) UIColor *partColor;

-(id)initWithStartDegree:(CGFloat)startDegree endDegree:(CGFloat)endDegree partColor:(UIColor*)partColor;

@end

CirclePart.m

#import "CirclePart.h"

@implementation CirclePart

-(id)initWithStartDegree:(CGFloat)startDegree endDegree:(CGFloat)endDegree partColor:(UIColor*)partColor
{
    self = [super init];
    if (self) {
        self.startDegree = startDegree;
        self.endDegree = endDegree;
        self.partColor = partColor;
    }
    return self;
}

@end

GraphView.h

#import <UIKit/UIKit.h>
#import "CirclePart.h"

@interface GraphView : UIView

@property (nonatomic) CGPoint centrePoint;
@property (nonatomic) CGFloat radius;
@property (nonatomic) CGFloat lineWidth;
@property (nonatomic, strong) NSArray *circleParts;

-(id)initWithFrame:(CGRect)frame CentrePoint:(CGPoint)centrePoint radius:(CGFloat)radius lineWidth:(CGFloat)lineWidth circleParts:(NSArray*)circleParts;

@end

GraphView.m

#import "GraphView.h"

@implementation GraphView

-(id)initWithFrame:(CGRect)frame CentrePoint:(CGPoint)centrePoint radius:(CGFloat)radius lineWidth:(CGFloat)lineWidth circleParts:(NSArray*)circleParts
{
    self = [super initWithFrame:frame];
    if (self) {
        self.centrePoint = centrePoint;
        self.radius = radius;
        self.lineWidth = lineWidth;
        self.circleParts = circleParts;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    [self drawCircle];
}

- (void)drawCircle {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, _lineWidth);

    for(CirclePart *circlePart in _circleParts)
    {
        CGContextMoveToPoint(context, _centrePoint.x, _centrePoint.y);

        CGContextAddArc(context, _centrePoint.x , _centrePoint.y, _radius, [self radians:circlePart.startDegree], [self radians:circlePart.endDegree], 0);
        CGContextSetFillColorWithColor(context, circlePart.partColor.CGColor);
        CGContextFillPath(context);
    }
}

-(float) radians:(double) degrees {
    return degrees * M_PI / 180;
}


@end

CircleViewController.h

#import <UIKit/UIKit.h>

@interface CircleViewController : UIViewController

@end

CircleViewController.m

#import "CircleViewController.h"
#import "GraphView.h"
#import "CirclePart.h"

@interface CircleViewController ()

@end

@implementation CircleViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    CirclePart *part1 = [[CirclePart alloc] initWithStartDegree:0 endDegree:120 partColor:[UIColor redColor]];
    CirclePart *part2 = [[CirclePart alloc] initWithStartDegree:120 endDegree:250 partColor:[UIColor blueColor]];
    CirclePart *part3 = [[CirclePart alloc] initWithStartDegree:250 endDegree:360 partColor:[UIColor grayColor]];

    NSArray *circleParts = [[NSArray alloc] initWithObjects:part1, part2, part3, nil];

    CGRect rect = CGRectMake(100, 100, 200, 200);
    CGPoint circleCenter = CGPointMake(rect.size.width / 2, rect.size.height / 2);

    GraphView *graphView = [[GraphView alloc] initWithFrame:rect CentrePoint:circleCenter radius:80 lineWidth:2 circleParts:circleParts];
    graphView.backgroundColor = [UIColor whiteColor];
    graphView.layer.borderColor = [UIColor redColor].CGColor;
    graphView.layer.borderWidth = 1.0f;

    [self.view addSubview:graphView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Answer 3

It's a simple question of trigonometry. Figure out the angle you need for the pie portion (pie slice percent time 360 degrees), then you move to the center. Line to the circle edge at an appropriate angle, arc to the next side of the pie slice for the arc angle that you need, then line back to the center.

Alternatively, you could use CorePlot to make pie charts for you .