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

Question

在我的一个应用程序中，我试图绘制一个带有圆边的渐变弧。就像下图一样。

到目前为止，这是我使用以下代码所做的。

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

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

有人可以告诉我如何实现圆角边缘吗？我实现的那个有锋利的边缘。

Answer 1

最简单的方法可能是:

1. 创建一条弧线路径(沿着目标弧线的中间)作为路径
2. 设置线宽(在您的情况下为 20)和线帽(圆形帽)
3. 将路径转换为描边路径(CGContextReplacePathWithStrokedPath)
4. 继续使用现有的渐变代码

描边 会将无限窄的 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)];
}