oc 画一个圆弧_如何在iOS中使用弯曲边缘绘制圆弧？

In one of my application, I am trying to draw a gradient arc with rounded edges. Like the following image.

This is what I have done so far using the following code.

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

}

With the above code, I have achieved the following

Can someone let me know on how to achieve that rounded edges ? The one which I have implemented have sharp edges.

解决方案

The easiest approach is probably:

Create a single arc path (along the middle of your target arc) as a path

Set the line width (20 in your case) and the line cap (rounded caps)

Convert the path into a stroked path (CGContextReplacePathWithStrokedPath)

Continue with your existing code for the gradient

The stroking will convert your 90 degree arc path, which is infinitely narrow, into an outline of a line that is 20 pixel wide and has rounded line endings.

The code could approximately look like this:

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

}