Dibuja segmentos de arco usando UIBezierPath

Sé que hay muchos ejemplos relacionados con UIBezierPath , pero estoy muy confundido sobre los angularjs a utilizar para dibujar arco, mi requisito es como la image de abajo para dibujar arcos. La longitud y el ángulo deben calcularse según el número total.

introduzca la descripción de la imagen aquí

En este momento he creado una function que dibuja los arcos, ver abajo.

 -(void)createCircleWithStartAngle:(int)startAngle endAngle:(int)endAngle name:(NSString *)name{ UIView *subView=_viewContainer; // Set up the shape of the circle int radius = 125; CAShapeLayer *circle = [CAShapeLayer layer]; // Make a circular shape UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius) radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; circle.path = [path CGPath]; // Center the shape in self.view circle.position = CGPointMake(CGRectGetMidX(subView.bounds)-radius, CGRectGetMidY(subView.bounds)-radius); circle.fillColor = [UIColor clearColor].CGColor; //making line end cap round circle.lineCap=kCALineCapRound; UIColor *strokeColor; if([name isEqualToString:@"A"]) strokeColor=[UIColor darkGrayColor]; else if([name isEqualToString:@"B"]) strokeColor=[UIColor colorWithRed:40.0/255.0 green:180.0/255.0 blue:213.0/255.0 alpha:1.0]; else if([name isEqualToString:@"C"]) strokeColor=[UIColor colorWithRed:240/255.0 green:240/255.0 blue:240/255.0 alpha:1.0]; circle.strokeColor = strokeColor.CGColor; circle.lineWidth = 10; // Add to parent layer [subView.layer addSublayer:circle]; // Configure animation CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; drawAnimation.duration = 1.0; drawAnimation.repeatCount = 1.0; drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; drawAnimation.toValue = [NSNumber numberWithFloat:1.0f]; drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; // Add the animation to the circle [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; } 

Estoy llamando a la function anterior 3 veces, por lo que crea 3 segmentos de arco como a continuación

  float angleToStart=DEGREES_TO_RADIANS(120); float angleToEnd=DEGREES_TO_RADIANS(270); //investment [self createCircleWithStartAngle:angleToStart endAngle:angleToEnd name:@"A"]; float factor=total/bvalue; angleToStart=angleToEnd; angleToEnd=180/factor; angleToEnd=DEGREES_TO_RADIANS(angleToEnd); [self createCircleWithStartAngle:angleToStart endAngle:angleToEnd name:@"B"]; angleToStart=DEGREES_TO_RADIANS(angleToEnd); angleToEnd=DEGREES_TO_RADIANS(60); [self createCircleWithStartAngle:angleToStart endAngle:angleToEnd name:@"C"]; 

como resultado estoy obteniendo resultados como los que se muestran a continuación

introduzca la descripción de la imagen aquí

que es de alguna manera correcta, pero no 100%, escenarios como los siguientes

  1. El punto de inicio en gris oscuro no es el mismo que el punto final en blanco
  2. La parte gris oscuro debe estar siempre en un medio círculo, y el azul debe seguirlo con factor.
  3. El corte blanco apagado para llenar la parte restante hasta el final.

¿Alguien puede ayudarme a get los valores correctos? Para que dibuje

Gracias.


Actualización (agregando la solución completa para dibujar un arco similar)

La function a continuación responsable de dibujar el arco para los angularjs suministrados

 -(void)createCircleWithStartAngle:(float)startAngle endAngle:(float)endAngle chartSection:(ChartSection)section lineCap:(NSString *const)lineCap{ UIView *subView=_circleView; // Set up the shape of the circle float radius = _circleView.bounds.size.width/2.0;//125.0; CAShapeLayer *circle = [CAShapeLayer layer]; // Make a circular shape UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius) radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; circle.path = [path CGPath]; // Center the shape in self.view circle.position = CGPointMake(CGRectGetMidX(subView.bounds)-radius, CGRectGetMidY(subView.bounds)-radius); // Configure the apperence of the circle circle.fillColor = [UIColor clearColor].CGColor; UIColor *strokeColor; circle.lineCap=lineCap; switch (section) { case ChartSectionA: strokeColor=[UIColor darkGrayColor]; break; case ChartSectionB: strokeColor=[UIColor colorWithRed:40.0/255.0 green:180.0/255.0 blue:213.0/255.0 alpha:1.0]; break; case ChartSectionC: strokeColor=[UIColor colorWithRed:240/255.0 green:240/255.0 blue:240/255.0 alpha:1.0]; break; default: strokeColor=[UIColor colorWithRed:40.0/255.0 green:180.0/255.0 blue:213.0/255.0 alpha:1.0]; break; } circle.strokeColor = strokeColor.CGColor; circle.lineWidth = 10; //keep the arrangement intact with the indexes.. [subView.layer insertSublayer:circle atIndex:section]; // Configure animation CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; drawAnimation.duration = 1.0; drawAnimation.repeatCount = 1.0; // Animate from no part of the stroke being drawn to the entire stroke being drawn drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; drawAnimation.toValue = [NSNumber numberWithFloat:1.0f]; // Experiment with timing to get the appearence to look the way you want drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; // Add the animation to the circle [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; } 

La function a continuación calcula el ángulo según los valores y los suministros de la function anterior.

 -(void)createArcWithValueOfSectionA:(float)amountA sectionB:(float)amountB sectionC:(float)amountC{ if(amountA<0.0) amountA=0.0; if(amountB<0.0) amountB=0.0; if(amountC<0.0) amountC=0.0; float baseStartAngle=120.0;//base start angle float baseEndAngle=60.0;//base end angle float totalAngle=300.0;//total angle to be calculated float sectionAPercent = amountA/(amountA+amountB+amountC); float sectionBPercent = amountB/(amountA+amountB+amountC); float angleToStart=DEGREES_TO_RADIANS(baseStartAngle); float angleToEnd=0.0; if(sectionAPercent<0) sectionAPercent=0.0; if(sectionBPercent<0) sectionBPercent=0.0; //calculate sectionA end angle with the value inputted angleToEnd=baseStartAngle + sectionAPercent * totalAngle; //we need to determine cap style as per data NSString *lineCap=kCALineCapRound; //Section A [self createCircleWithStartAngle:angleToStart endAngle:DEGREES_TO_RADIANS(angleToEnd) chartSection:ChartSectionA lineCap:lineCap]; //next drawing for bidding should start from investment end angle angleToStart=angleToEnd; angleToEnd=sectionBPercent * totalAngle; angleToEnd=angleToStart+angleToEnd; lineCap=kCALineCapSquare; //Section B [self createCircleWithStartAngle:DEGREES_TO_RADIANS(angleToStart) endAngle:DEGREES_TO_RADIANS(angleToEnd) chartSection:ChartSectionB lineCap:lineCap]; //next drawing for sectionC should start from sectionB end angle angleToStart=angleToEnd; lineCap=kCALineCapRound; //draw Section C amount till end angleToEnd=DEGREES_TO_RADIANS(baseEndAngle); [self createCircleWithStartAngle:DEGREES_TO_RADIANS(angleToStart) endAngle:angleToEnd chartSection:ChartSectionC lineCap:lineCap]; } 

Espero que ayude a alguien.

El problema es que está utilizando integers para sus angularjs, pero está tratando con radianes:

 - (void)createCircleWithStartAngle:(int)startAngle endAngle:(int)endAngle name:(NSString *)name; 

Use el punto flotante (por ejemplo, CGFloat ) para sus angularjs.