ios - primary - ionic text colors

Dibujando un círculo, llenando diferentes partes con diferentes colores

Question

Soy un programador ios de novatos. En uno de mis proyectos, necesito dibujar un círculo en el que diferentes porciones del círculo se llenen con diferentes colores. Puedo dibujar el círculo. Pero no puedo determinar la porción diferente. del círculo y llenarlos con diferentes colores. Aquí hay una captura de pantalla para aclarar lo que quiero dibujar.

Una ayuda sería apreciada.

Answer 1

Es una simple cuestión de trigonometría. Calcule el ángulo que necesita para la porción de tarta (porcentaje de tarta de 360 ​​grados), luego muévase al centro. Alinee con el borde del círculo en un ángulo apropiado, haga un arco al siguiente lado de la rebanada de tarta para obtener el ángulo de arco que necesita y luego vuelva al centro.

Alternativamente, podría usar CorePlot para hacer gráficos circulares para usted.

Answer 2

Puede usar UIBezierPath que tiene un método addArcWithCenter:radius:startAngle:endAngle:clockwise: donde puede especificar radio, centro y ángulos. El código podría verse así, que dibuja un cuarto de círculo en verde:

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

Por supuesto, también puede considerar usar una biblioteca como CorePlot .

Answer 3

tenemos 6 clase

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