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

Posted 2023-02-23

【中文标题】如何在 iOS 中绘制带有弯曲边缘的弧？

【英文标题】：How to draw Arc with curved edge in iOS?

【发布时间】：2015-08-10 06:29:24

【问题描述】：

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

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

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

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

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

【问题讨论】：

签出lineCap 属性为CAShapeLayer。

【参考方案1】：

最简单的方法可能是：

创建单个圆弧路径（沿着目标圆弧的中间）作为路径 设置线宽（在您的情况下为 20）和线帽（圆形大写） 将路径转换为描边路径 (CGContextReplacePathWithStrokedPath) 继续使用现有的渐变代码

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

【讨论】：

我不明白你。所以，你的意思是我需要使用drawRect CGContext 和所有？

我无法做到这一点。你能给我一个样本吗？我在*** 的所有地方都试过了，但我找不到。