2013-06-24 16 views
6

Ich bin ein Anfänger ios Programmierer.In einem meiner Projekte muss ich einen Kreis zeichnen, in dem verschiedene Teil des Kreises mit verschiedenen Farben gefüllt werden würde. Ich kann die zeichnen circle.Aber ich bin nicht in der Lage, den unterschiedlichen Teil des Kreises zu bestimmen und sie mit unterschiedlicher Farbe zu füllen. Hier ist ein Screenshot, um zu klären, was ich zeichnen möchte. circle with different colorZeichnen eines Kreises, füllte verschiedene Teile mit unterschiedlicher Farbe

Eine Hilfe wäre willkommen.

+0

Sieht aus wie ein Kreisdiagramm. Warum nicht [Core plot] (http://www.raywenderlich.com/13269/how-to-draw-graphs-with-core-plot-part-1) dafür verwenden? – Amar

+0

Damit Sie die richtigen Antworten für Ihre Implementierung erhalten, sollten Sie uns wissen lassen, ob Sie die CoreGraphics-Funktionen (die Funktionen, die mit 'CGContext' beginnen) in Ihrem eigenen' drawRect' verwenden oder den 'UIBezierPath' verwenden "Schlag" -Methode oder mit 'CAShapeLayer'. – Rob

+0

@Rob ich benutze eigentlich Core-Grafikfunktionen wie CGContext. – sujat

Antwort

11

Sie können UIBezierPath verwenden, das über eine Methode addArcWithCenter:radius:startAngle:endAngle:clockwise: verfügt, in der Sie Radius, Mittelpunkt und Winkel angeben können. Der Code könnte so aussehen, die ein Viertel eines Kreises in grün zieht:

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

Natürlich können Sie auch eine Bibliothek wie CorePlot zu verwenden, in Betracht ziehen.

+0

es funktioniert perfekt für eine Portion.aber Wie kann ich es mit anderen Portionen fortsetzen? Ich habe den gleichen Prozess für andere Teile Startwinkel und & Endwinkel ändern. Aber funktioniert nicht wünschenswert – sujat

+0

Spielen Sie einfach mit den Winkeln und Farben. Mittelpunkt und Radius sollten immer gleich sein. Sie müssten den Winkel jeder Portion berechnen und dann alle Portionen durchlaufen, um den Start- und Endwinkel zu erhöhen. – Karl

+0

Ich dachte das auch. Aber etwas falsch über meine angle.could Sie zeigen mir einfach eine andere Portionswinkel Berechnung.Ich versuchte so für die nächste Portion [startAngle: M_PI_2 endAngle: M_PI] – sujat

0

Es ist eine einfache Frage der Trigonometrie. Ermitteln Sie den Winkel, den Sie für den Kreisabschnitt benötigen (Kreissegment prozentuale Zeit 360 Grad), und bewegen Sie sich dann in die Mitte. Linie an die Kreiskante in einem geeigneten Winkel, Bogen auf die nächste Seite der Kreisscheibe für den Bogen Winkel, den Sie brauchen, dann Linie zurück in die Mitte.

Alternativ können Sie CorePlot verwenden, um Kreisdiagramme für Sie zu erstellen.

2

haben wir 6 Klasse

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