椭圆形进度条的制作

在阅读MBProgressHUD源码时,看到MBBarProgressView的实现,比较有趣,所以重写了MABarProgressView,顺便复习下CoreGraphics的绘图.

MABarProgressView的核心代码为

- (void)drawRect:(CGRect)rect{
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGFloat lineWidth = 2;
    
    CGPathRef path = CGPathCreateWithCylindroidPath(rect, lineWidth);
    CGContextAddPath(context, path);
    CGPathRelease(path);
    [_lineColor setStroke];
    [_progressRemainingColor setFill];
    CGContextDrawPath(context, kCGPathFillStroke);
    
    CGPathRef path1 = CGPathCreateWithCylindroidProgressPath(CGRectMake(2, 2, rect.size.width-4, rect.size.height-4), lineWidth, self.progress, self.isCylindroid);
    CGContextAddPath(context, path1);
    CGPathRelease(path1);
    [_progressColor set];
    CGContextDrawPath(context, kCGPathFill);
}

设置self.isCylindroid可以实现以下两种效果

bar-noCylindroid.gif bar-cylindroid.gif

一、实现椭圆矩形框

先实现外面的,我将其编写成一个函数CGPathCreateWithCylindroidPath

/**
 创建椭圆形
 
 @param rect 椭圆的范围
 @param lineWidth lineWidth
 @return 返回路径
 */
CG_EXTERN CGMutablePathRef CGPathCreateWithCylindroidPath(CGRect rect, CGFloat lineWidth){
    // 先将矩形减去lineWidth
    rect = CGRectInset(rect, lineWidth, lineWidth);
    // 左右圆的半径
    CGFloat radius = rect.size.height/2;
    CGFloat width = rect.size.width;
    CGFloat height = rect.size.height;
    // 路径的偏移量
    CGAffineTransform translation = CGAffineTransformMakeTranslation(rect.origin.x, rect.origin.y);
    // 创建一个可变路径
    CGMutablePathRef path = CGPathCreateMutable();
    // 起点
    CGPathMoveToPoint(path, &translation, 0, radius);
    // 画圆弧, 对应下图的1
    CGPathAddArcToPoint(path, &translation, 0, 0, radius, 0, radius);
    // 对应下图的2
    CGPathAddArcToPoint(path, &translation, width, 0, width, radius , radius);
    // 对应下图的3
    CGPathAddArcToPoint(path, &translation, width, height, width - radius, height, radius);
    // 对应下图的4
    CGPathAddArcToPoint(path, &translation, 0, height, 0, radius, radius);
    
    return path;
}

画图步骤的路径显示

二、实现进度条效果

#define MID(X,A,B) MAX(MIN(X,B),A)
/**
 创建椭圆进度条
 
 @param rect 进度条的总范围
 @param lineWidth lineWidth
 @param progress 进度 0-1
 @param isCylindroid 是否一直保持椭圆,否的话,右边为矩形
 @return 返回路径
 */
CG_EXTERN CGMutablePathRef CGPathCreateWithCylindroidProgressPath(CGRect rect, CGFloat lineWidth, CGFloat progress, BOOL isCylindroid){
    progress = MID(progress,0,1);
    progress = 0.3;
    if (isCylindroid) {
        // 如果使用椭圆进度,则通过修改宽度使用画椭圆的函数即可
        CGFloat width = rect.size.width - rect.size.height;
        rect.size.width = rect.size.height + (width * progress);
        return CGPathCreateWithCylindroidPath(rect, lineWidth);
    }else{
        // 进度的宽度
        CGFloat amount = rect.size.width * progress;
        // 先将矩形减去lineWidth
        rect = CGRectInset(rect, lineWidth, lineWidth);
        // 左右两边圆弧的半径
        CGFloat radius = rect.size.height/2;
        CGFloat width = rect.size.width;
        CGFloat height = rect.size.height;
        // 路径的偏移量
        CGAffineTransform translation = CGAffineTransformMakeTranslation(rect.origin.x, rect.origin.y);
        // 创建一个可变路径
        CGMutablePathRef path = CGPathCreateMutable();
        // 进度分为三部分
        if (amount  < radius && amount > 0) {// 1.宽度小于半径
            // 图1的x
            CGFloat x = radius - amount;
            // 图1的y,根据勾股定理计算
            CGFloat y = radius - sqrt(pow(radius, 2)-pow(x, 2));
            // 图1的topPoint
            CGPoint topPoint = CGPointMake(amount, y);
            // 使用acos计算出直角三角形的角度
            CGFloat angle = acos(x/radius);
            if (isnan(angle)) angle = 0;
            // 将路径的起始点移动到topPoint
            CGPathMoveToPoint(path, &translation, topPoint.x, topPoint.y);
            // 画圆弧,原点为(raduis,raduis),半径为raduis,startAngle和endAngle如图1,最后一个参数为是否顺序画圆弧,但实际绘图结果会是逆时针的,也就是说设置为NO,绘图时才是顺时针
            CGPathAddArc(path, &translation, radius, radius, radius, M_PI - angle, M_PI + angle, 0);
        }else if (amount >= radius && amount <= width - radius){// 2.宽度大于圆弧的半径且小于最大宽度减半径
            // 起点
            CGPathMoveToPoint(path, &translation, 0, radius);
            // 画圆弧,图2.1
            CGPathAddArcToPoint(path, &translation, 0, 0, radius, 0, radius);
            // 图2.2
            CGPathAddLineToPoint(path, &translation, amount, 0);
            // 图2.3
            CGPathAddLineToPoint(path, &translation, amount, radius);
            // 移动点的位置
            CGPathMoveToPoint(path, &translation, 0, radius);
            // 图2.4
            CGPathAddArcToPoint(path, &translation, 0, height, radius, height, radius);
            // 图2.5
            CGPathAddLineToPoint(path, &translation, amount, height);
            // 图2.6
            CGPathAddLineToPoint(path, &translation, amount, radius);
        }else{// 3.宽度大于最大宽度减半径
            CGPathMoveToPoint(path, &translation, 0, radius);
            
            CGFloat x = amount - (width - radius);
            // 图3.1
            CGPathAddArcToPoint(path, &translation, 0, 0, radius, 0, radius);
            // 图3.2
            CGPathAddLineToPoint(path, &translation, width - radius, 0);
            CGFloat angle = acos(x/radius);
            if (isnan(angle)) angle = 0;
            // 图3.3
            CGPathAddArc(path, &translation, width - radius, radius, radius, M_PI, -angle, 0);
            // 图3.4
            CGPathAddLineToPoint(path, &translation, amount, radius);

            CGPathMoveToPoint(path, &translation, 0, radius);
            // 图3.5
            CGPathAddArcToPoint(path, &translation, 0, height, radius, height, radius);
            // 图3.6
            CGPathAddLineToPoint(path, &translation, width - radius, height);
            // 图3.7
            CGPathAddArc(path, &translation, width - radius, radius, radius, -M_PI, angle, 1);
            // 图3.8
            CGPathAddLineToPoint(path, &translation, amount, radius);
        }
        return path;
    }
}

图1 (宽度小于半径时)
图2 (宽度大于圆弧的半径且小于最大宽度减半径)
图3 (宽度大于最大宽度减半径)

demo地址:MABarProgressViewDemo