ios - 如何在iOS中绘制带有弯曲边缘的弧形？

在我的一个应用程序中，我试图绘制带有圆角的渐变弧。如下图所示。



到目前为止，这是我使用以下代码完成的工作。

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

通过以上代码，我实现了以下目标



有人可以让我知道如何实现圆角边缘吗？我实现的那个有很强的优势。

最佳答案

最简单的方法可能是:

创建一个单弧路径(沿着目标弧的中间)作为路径

设置线宽(在您的情况下为20)和线帽(圆形帽)

将路径转换为描边路径(CGContextReplacePathWithStrokedPath)

继续使用梯度

的现有代码

笔触会将无限狭窄的90度弧线路径转换为20像素宽并具有圆弧末端的线的轮廓。

该代码大致如下所示:

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