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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With