ios - 如何使用核心绘制绘制弧线

Question

我想使用核心绘制绘制如下图所示的弧线。

不完全相同，但我设置了背景图像。我需要根据文件下载绘制弧线。现在我有下载数量的百分比。如何使用核心绘制来做到这一点？

Answer 1

上图只是两个圆圈——一个在另一个圆圈上切了一个洞。这与您想要完成的目标并不接近。

你需要使用CGContextAddArc.

做这样的事情：

• 开路
• 移动到一个点
• 开始绘制弧线CGContextAddArc
• 向内移动（并画一条线）到弧中心所需的切片宽度
• 画一条向后的弧线
• 关闭路径

Answer 2

我有你想要的：

// CircularProgress.h

#import <UIKit/UIKit.h>

@interface CircularProgress : UIView

@property (nonatomic, assign) CGFloat percent;

@end

// CircularProgress.m

#import "CircularProgress.h"

@implementation CircularProgress

- (void)setPercent:(CGFloat)percent
{
    _percent = percent;
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGRect bounds = [self bounds];
    CGPoint center = CGPointMake(bounds.size.width / 2.0, bounds.size.height / 2.0);

    CGFloat lineWidth = 8.0;
    CGFloat innerRadius = (bounds.size.width / 2.0) - lineWidth;
    CGFloat outerRadius = innerRadius + lineWidth;
    CGFloat startAngle = -((float)M_PI / 2.0);
    CGFloat endAngle = ((self.percent / 100.0) * 2 * (float)M_PI) + startAngle;

    UIBezierPath *processBackgroundPath = [UIBezierPath bezierPath];
    processBackgroundPath.lineWidth = lineWidth;
    CGFloat radius = (self.bounds.size.width - lineWidth) / 2.0;
    CGFloat fullAngle = (2.0 * (float)M_PI) + startAngle;
    [processBackgroundPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:fullAngle clockwise:YES];
    [[UIColor whiteColor] set];
    [processBackgroundPath stroke];

    CGMutablePathRef progressPath = CGPathCreateMutable();
    CGPathMoveToPoint(progressPath, NULL, center.x, center.y - innerRadius);
    CGPathAddArc(progressPath, NULL, center.x, center.y, innerRadius, startAngle, endAngle, YES);
    CGPathAddArc(progressPath, NULL, center.x, center.y, outerRadius, endAngle, startAngle, NO);
    CGPathCloseSubpath(progressPath);

    UIColor *aColor = [UIColor colorWithRed:0.941 green:0.776 blue:0.216 alpha:1.0];
    [aColor setFill];
    CGContextAddPath(context, progressPath);
    CGContextFillPath(context);

    CGPathRelease(progressPath);
}

@end

您只需要创建一个CircularProgress所需大小的类对象（它应该是方形的）并将其作为子视图添加到您的主视图中。然后只需更改percent值并享受结果。颜色和宽度现在是硬编码的，因为它不是完成的控件，但你应该明白这个想法。

Answer 3

使用中点算法，如果你想画圆，让同心圆提供你圆的半径差异