ios 画圆圈进度条总结

来源：互联网发布：淘宝王者荣耀cdkey 编辑：程序博客网时间：2024/04/28 20:09

空心圆圈，从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

0 0