¿Cómo dibujar arco con borde curvado en iOS?

En una de mis aplicaciones, estoy tratando de dibujar un arco de gradiente con bordes networkingondeados. Como la siguiente image.

introduzca la descripción de la imagen aquí

Esto es lo que he hecho hasta ahora con el siguiente código.

-(void)startArc { UIBezierPath *roundedArc = [self arcWithRoundedCornerAt:centerPoint startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(90) innerRadius:width-20 outerRadius:width cornerRadius:0]; CAShapeLayer *mask = [CAShapeLayer new]; [mask setPath:roundedArc.CGPath]; [mask setFrame:_outerView.bounds]; [mask setShouldRasterize:YES]; [mask setRasterizationScale:[UIScreen mainScreen].scale]; CAGradientLayer *gradient = [CAGradientLayer new]; [gradient setFrame:_outerView.bounds]; // [gradient setColors:[NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0.86 green:0.91 blue:0.96 alpha:1.0f] CGColor],(id)[[UIColor colorWithRed:0.98 green:0.99 blue:0.99 alpha:1.0f] CGColor], nil]]; [gradient setColors:[NSArray arrayWithObjects:(id)[UIColor colorWithRed:0.19 green:0.64 blue:0.89 alpha:1.0].CGColor,(id)[UIColor colorWithRed:0.14 green:0.76 blue:0.56 alpha:1.0f].CGColor, nil]]; [gradient setMask:mask]; [_outerView.layer addSublayer:gradient]; } - (UIBezierPath *)arcWithRoundedCornerAt:(CGPoint)center startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle innerRadius:(CGFloat)innerRadius outerRadius:(CGFloat)outerRadius cornerRadius:(CGFloat)cornerRadius { CGFloat innerTheta = asin(cornerRadius / 2.0 / (innerRadius + cornerRadius)) * 2.0; CGFloat outerTheta = asin(cornerRadius / 2.0 / (outerRadius - cornerRadius)) * 2.0; UIBezierPath *path = [UIBezierPath bezierPath]; [path addArcWithCenter:center radius:innerRadius + cornerRadius startAngle:endAngle - innerTheta endAngle:startAngle + innerTheta clockwise:false]; [path addArcWithCenter:center radius:outerRadius - cornerRadius startAngle:startAngle + outerTheta endAngle:endAngle - outerTheta clockwise:true]; [path closePath]; return path; } 

Con el código anterior, he logrado lo siguiente

introduzca la descripción de la imagen aquí

¿Alguien puede hacerme saber cómo lograr esos bordes networkingondeados? El que he implementado tiene bordes afilados.

El enfoque más fácil es probablemente:

  1. Cree una única ruta de arco (a lo largo del centro del arco de destino) como una ruta
  2. Establezca el ancho de línea (20 en su caso) y el límite de línea (tapas networkingondeadas)
  3. Convierta la ruta en una ruta trazada (CGContextReplacePathWithStrokedPath)
  4. Continúa con tu código existente para el gradiente

La caricia convertirá su trayectoria de arco de 90 grados, que es infinitamente estrecha, en un contorno de una línea que tiene 20 píxeles de ancho y tiene terminaciones networkingondeadas.

El código podría parecerse aproximadamente a esto:

 - (UIBezierPath *)arcWithRoundedCornerAt:(CGPoint)center startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle innerRadius:(CGFloat)innerRadius outerRadius:(CGFloat)outerRadius cornerRadius:(CGFloat)cornerRadius context:(CGContext)context { CGFloat radius = (innerRadius + outerRadius) / 2.0; CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, true); CGContextSetLineCap(context, kCGLineCapRound); CGContextSetLineWidth(context, outerRadius - innerRadius); CGContextReplacePathWithStrokedPath(context) return [UIBezierPath bezierPathWithCGPath: CGContextCopyPath(context)]; }