ios 画圆圈进度条总结

空心圆圈，从90度，正上方开始画：

说明一下:_percent 是当前进度值，范围是0到1之间。

- (void)drawArc
{
    if (_percent == 0 || _percent > 1) {
        return;
    }
    
    if (_percent == 1) {
        float endAngle =2*M_PI*_percent - M_PI_2;
        UIColor *color = (_arcFinishColor == nil) ? [UIColor grayColor] : _arcFinishColor;
        [self drawBorderWithColor:color endAngle:endAngle];
    }else{
        float endAngle =2*M_PI*_percent - M_PI_2;
        UIColor *color = (_arcUnfinishColor == nil) ? [UIColor grayColor] : _arcUnfinishColor;
        [self drawBorderWithColor:color endAngle:endAngle];
    }
}

-(void)drawBorderWithColor:(UIColor *)color endAngle:(CGFloat)endAngle
{
    //获取颜色值
    CGFloat R=0, G=0, B=0,A=1;
    const CGFloat *cs=CGColorGetComponents(color.CGColor);
    R = cs[0];
    G = cs[1];
    B = cs[2];
    A = cs[3];
    
    //起点从正上方90度位置顺时针画圆
    self.width = self.width>0 ? self.width:kDefaultWidth;
    CGSize viewSize = self.bounds.size;
    CGFloat radius = viewSize.width / 2 - self.width/2;
    CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, R,G, B, A);
    CGContextSetLineWidth(context, self.width);
    CGContextAddArc(context, center.x, center.y, radius,-M_PI_2,endAngle, 0);
    CGContextDrawPath(context, kCGPathStroke);
}

这里要注意的是起始点是-M-PI_2，结束弧度要减去起始点的90度对应值。

实心圆圈，从90度，正上方开始画：

       //  起点从右边0度位置顺时针画圆
        float endAngle = 2*M_PI*_percent;
        CGColorRef color = (_arcUnfinishColor == nil) ? [UIColor blueColor].CGColor : _arcUnfinishColor.CGColor;
        CGContextRef contextRef = UIGraphicsGetCurrentContext();
        CGSize viewSize = self.bounds.size;
        CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
        // Draw the slices.
        CGFloat radius = viewSize.width / 2;
        CGContextBeginPath(contextRef);
        CGContextMoveToPoint(contextRef, center.x, center.y);
        CGContextAddArc(contextRef, center.x, center.y, radius,0,endAngle, 0);
        CGContextSetFillColorWithColor(contextRef, color);
        CGContextFillPath(contextRef);

实心圆的代码与空心的稍有区别，注意这里的起始角度为0，所以结束的弧度没有偏移。

实心圆圈，从0度，右边水平线开始画：

  //起点从正上方90度位置顺时针画圆
        float endAngle =2*M_PI*_percent - M_PI_2;
        CGColorRef color = (_arcUnfinishColor == nil) ? [UIColor blueColor].CGColor : _arcUnfinishColor.CGColor;
        CGContextRef contextRef = UIGraphicsGetCurrentContext();
        CGSize viewSize = self.bounds.size;
        CGPoint center = CGPointMake(viewSize.width / 2, viewSize.height / 2);
        // Draw the slices.
        CGFloat radius = viewSize.width / 2;
        CGContextBeginPath(contextRef);
        CGContextMoveToPoint(contextRef, center.x, center.y);
        CGContextAddArc(contextRef, center.x, center.y, radius,-M_PI_2,endAngle, 0);
        CGContextSetFillColorWithColor(contextRef, color);
        CGContextFillPath(contextRef);

对应的角度偏移值：

中心点右侧 弧度为  0 

中心点上方 弧度为  90度  -M_PI_2 

中心点左侧 弧度为  180度 M_PI 

中心点下方 弧度为   270度 M_PI_2