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

Question

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

不完全一样，但我有背景图像设置。我需要根据文件下载画出弧线。现在我有下载数量的百分比。我怎样才能使用核心绘制？

Answer 1

上面的图片只是两个圆圈 - 一个是在另一个圆孔中切割。这与您想要完成的目标并不相近。您需要使用CGContextAddArc。

做这样的事情：向内

• 打开路径
• 移动到一个点
• 开始绘制弧CGContextAddArc
• 移动（和画线），以圆弧中心切片的所需宽度
• 绘制反向弧
• 关闭路径

Answer 2

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

Answer 3

我中有你想要的东西：

// 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值并享受结果。颜色和宽度现在被硬编码，因为它不是完成的控件，但你应该抓住这个想法。