繪製一個圓圈，用不同的顏色填充不同的部分

我是一個新手ios程序員。在我的一個項目中，我需要繪製一個圓圈，其中不同部分的圓圈會填充不同的顏色。我可以繪製但我無法確定圓圈的不同部分，並用不同的顏色填充它們。下面是一幅截圖，用於說明我想繪製的內容。 circle with different color 繪製一個圓圈，用不同的顏色填充不同的部分

將不勝感激。

來源

2013-06-24 sujat

看起來像一個餅圖。爲什麼不使用[Core plot]（http://www.raywenderlich.com/13269/how-to-draw-graphs-with-core-plot-part-1）呢？ – Amar

爲了讓大家給出適合您的實現的答案，您可能想讓我們知道，如果您在自己的「drawRect」中使用CoreGraphics函數（以'CGContext'開頭的那些函數），或者使用'UIBezierPath' 'stroke'方法，或者使用'CAShapeLayer'。 – Rob

@Rob其實我正在使用像CGContext這樣的核心圖形功能。 – sujat

您可以使用UIBezierPath其中有一個方法addArcWithCenter:radius:startAngle:endAngle:clockwise:您可以在其中指定半徑，中心和角度。代碼可能看起來像這樣繪製一個圓的四分之一綠色：

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];

當然，你也可以考慮使用一個庫像CorePlot。

來源

2013-06-24 07:11:37 Karl

它可以完美地完成一個部分。但是我怎樣才能繼續與其他部分？我做了其他部分改變開始角度和結束角度的相同過程，但不是理想的工作 – sujat

只需玩角度和顏色。中心和半徑應該始終相同。你將不得不計算每個部分的角度，然後循環遍歷所有增加開始和結束的部分。 – Karl

我也這麼認爲。但是我的角度有些問題。你可以告訴我另一部分角度計算。我嘗試了下一部分[startAngle：M_PI_2 endAngle：M_PI] – sujat

這是一個簡單的三角學問題。找出餅圖部分需要的角度（餅片百分比時間360度），然後移動到中心。以適當的角度與圓弧邊緣成直線，圓弧到餅形切片的下一側，形成所需的弧形角度，然後返回到中心。

或者，您可以使用CorePlot爲您製作餅圖。

來源

2013-06-24 07:05:06 kamprath

我們有6類

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

來源

2015-10-23 07:27:22

繪製一個圓圈，用不同的顏色填充不同的部分

回答

相關問題