如何使用核心繪製繪製弧線

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值並享受結果。顏色和寬度現在被硬編碼，因爲它不是完成的控件，但你應該抓住這個想法。