如何在iOS中使用弯曲边缘绘制圆弧？ [英] How to draw Arc with curved edge in 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.

推荐答案

最简单的方法可能是：

1. 创建一条弧形路径（沿着目标弧的中间）作为路径


2. 设置线宽（在你的情况下为20） ）和线帽（圆顶帽）


3. 将路径转换为描边路径（CGContextReplacePathWithStrokedPath）


4. 继续使用现有的渐变代码

1. Create a single arc path (along the middle of your target arc) as a path
2. Set the line width (20 in your case) and the line cap (rounded caps)
3. Convert the path into a stroked path (CGContextReplacePathWithStrokedPath)
4. Continue with your existing code for the gradient

描边会将90度弧线路径（无限窄）转换为线条轮廓这是20像素宽，具有圆形的行尾。

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.

代码大致如下所示：

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

这篇关于如何在iOS中使用弯曲边缘绘制圆弧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！