CGContextRef绘图－iOS球形波浪加载进度控件－HcdProcessView详解

《iOS球形波浪加载进度控件－HcdProcessView》这篇文章已经展示了我在项目中编写的一个球形进度加载控件HcdProcessView，这篇文章我要简单介绍一下我的制作过程。

思路

首先我放弃了使用通过改变图片的位置来实现上面的动画效果，虽然这样也可以实现如上的效果，但是从性能和资源消耗上来说都不是最好的选择。这里我采用了通过上下文（也就是CGContextRef）来绘制这样的效果，大家对它应该并不陌生，它既可以绘制直线、曲线、多边形圆形以及各种各样的几何图形。

具体步骤

我们可以将上面的复杂图形拆分成如下几步：

绘制最外面的一圈刻度尺
绘制表示进度的刻度尺
绘制中间的球形加载界面

绘制刻度尺

如果你先要在控件中绘制自己想要的图形，你需要重写UIView的drawRect方法：

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawScale:context];
}

在drawRect方法中，我们先画出了刻度尺的图形，刻度尺是由一圈短线在一个圆内围成的一个圆。

/**
 *  画比例尺
 *
 *  @param context 全局context
 */
- (void)drawScale:(CGContextRef)context {
    
    CGContextSetLineWidth(context, _scaleDivisionsWidth);//线的宽度
    
    //先将参照点移到控件中心
    CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);
    
    //设置线的颜色
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.655 green:0.710 blue:0.859 alpha:1.00].CGColor);//线框颜色
    //绘制一些图形
    for (int i = 0; i < _scaleCount; i++) {
        CGContextMoveToPoint(context, scaleRect.size.width/2 - _scaleDivisionsLength, 0);
        CGContextAddLineToPoint(context, scaleRect.size.width/2, 0);
        //    CGContextScaleCTM(ctx, 0.5, 0.5);
        //渲染
        CGContextStrokePath(context);
        CGContextRotateCTM(context, 2 * M_PI / _scaleCount);
    }
    
    //绘制刻度尺外的一个圈
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.694 green:0.745 blue:0.867 alpha:1.00].CGColor);//线框颜色
    CGContextSetLineWidth(context, 0.5);
    CGContextAddArc (context, 0, 0, scaleRect.size.width/2 - _scaleDivisionsLength - 3, 0, M_PI* 2 , 0);
    CGContextStrokePath(context);
    
    //复原参照点
    CGContextTranslateCTM(context, -fullRect.size.width / 2, -fullRect.size.width / 2);
}

这里需要用到两个东西一个是CGContextAddArc，一个是CGContextAddLineToPoint。创建圆弧的方法有两种一种是CGContextAddArc，一种是CGContextAddArcToPoint，这里画的圆比较简单所以用的是CGContextAddArc,CGContextAddArcToPoint在后面也会用到（我会在用到的地方详解）。

CGContextAddArc

 void CGContextAddArc (
    CGContextRef c,    
    CGFloat x,             //圆心的x坐标
    CGFloat y,   //圆心的x坐标
    CGFloat radius,   //圆的半径 
    CGFloat startAngle,    //开始弧度
    CGFloat endAngle,   //结束弧度
    int clockwise          //0表示顺时针，1表示逆时针
 );

这里需要创建一个完整的圆，那么开始弧度就是0 结束弧度是 2PI，因为圆周长是 2PIradius。函数执行完后，current point就被重置为(x,y)。CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);已经将current point移动到了(fullRect.size.width / 2, fullRect.size.width / 2)。

CGContextAddLineToPoint

 void CGContextAddLineToPoint (
    CGContextRef c,
    CGFloat x,
    CGFloat y
 );

创建一条直线，从current point到 (x,y)
然后current point会变成(x,y)。
由于短线不连续，所以通过for循环来不断画短线，_scaleCount代表的是刻度尺的个数，每次循环先将current point移动到(scaleRect.size.width/2 - _scaleDivisionsLength, 0)点，_scaleDivisionsLength代表短线的长度。绘制完短线后将前面绘制完成的图形旋转一个刻度尺的角度CGContextRotateCTM(context, 2 * M_PI / _scaleCount);，将最终的绘制渲染后就得到了如下的刻度尺：

刻度尺上的进度绘制

首先在drawRect中添加drawProcessScale方法。

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawScale:context];
    [self drawProcessScale:context];
}

然后在drawProcessScale方法中实现左右两部分的刻度尺进度绘制。

/**
 *  比例尺进度
 *
 *  @param context 全局context
 */
- (void)drawProcessScale:(CGContextRef)context {
    
    CGContextSetLineWidth(context, _scaleDivisionsWidth);//线的宽度
    CGContextTranslateCTM(context, fullRect.size.width / 2, fullRect.size.width / 2);
    
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.969 green:0.937 blue:0.227 alpha:1.00].CGColor);//线框颜色
    
    int count = (_scaleCount / 2 + 1) * currentPercent;
    CGFloat scaleAngle = 2 * M_PI / _scaleCount;
    
    //绘制左边刻度进度
    for (int i = 0; i < count; i++) {
        CGContextMoveToPoint(context, 0, scaleRect.size.width/2 - _scaleDivisionsLength);
        CGContextAddLineToPoint(context, 0, scaleRect.size.width/2);
        //    CGContextScaleCTM(ctx, 0.5, 0.5);
        // 渲染
        CGContextStrokePath(context);
        CGContextRotateCTM(context, scaleAngle);
    }
    //绘制右边刻度进度
    CGContextRotateCTM(context, -count * scaleAngle);
    
    for (int i = 0; i < count; i++) {
        CGContextMoveToPoint(context, 0, scaleRect.size.width/2 - _scaleDivisionsLength);
        CGContextAddLineToPoint(context, 0, scaleRect.size.width/2);
        //    CGContextScaleCTM(ctx, 0.5, 0.5);
        // 渲染
        CGContextStrokePath(context);
        CGContextRotateCTM(context, -scaleAngle);
    }
    
    CGContextTranslateCTM(context, -fullRect.size.width / 2, -fullRect.size.width / 2);
}

绘制完后效果如下：

水的波浪效果绘制

终于到了最主要也是最难的效果绘制了，对于带有波浪不断滚动的效果是采用NSTimer来不断绘制每一帧图形实现的，现在简单介绍下每一帧的绘制方法。
首先在drawRect中添加drawWave方法，

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self drawScale:context];
    [self drawProcessScale:context];
    [self drawWave:context];
}

drawWave中实现如下方法：

/**
 *  画波浪
 *
 *  @param context 全局context
 */
- (void)drawWave:(CGContextRef)context {
    
    CGMutablePathRef frontPath = CGPathCreateMutable();
    CGMutablePathRef backPath = CGPathCreateMutable();
    
    //画水
    CGContextSetLineWidth(context, 1);
    CGContextSetFillColorWithColor(context, [_frontWaterColor CGColor]);
    
    CGFloat offset = _scaleMargin + _waveMargin + _scaleDivisionsWidth;
    
    float frontY = currentLinePointY;
    float backY = currentLinePointY;
    
    CGFloat radius = waveRect.size.width / 2;
    
    CGPoint frontStartPoint = CGPointMake(offset, currentLinePointY + offset);
    CGPoint frontEndPoint = CGPointMake(offset, currentLinePointY + offset);
    
    CGPoint backStartPoint = CGPointMake(offset, currentLinePointY + offset);
    CGPoint backEndPoint = CGPointMake(offset, currentLinePointY + offset);
    
    for(float x = 0; x <= waveRect.size.width; x++){
        
        //前浪绘制
        frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;
        
        CGFloat frontCircleY = frontY;
        if (currentLinePointY < radius) {
            frontCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
            if (frontY < frontCircleY) {
                frontY = frontCircleY;
            }
        } else if (currentLinePointY > radius) {
            frontCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
            if (frontY > frontCircleY) {
                frontY = frontCircleY;
            }
        }
        
        if (fabs(0 - x) < 0.001) {
            frontStartPoint = CGPointMake(x + offset, frontY + offset);
            CGPathMoveToPoint(frontPath, NULL, frontStartPoint.x, frontStartPoint.y);
        }
        
        frontEndPoint = CGPointMake(x + offset, frontY + offset);
        CGPathAddLineToPoint(frontPath, nil, frontEndPoint.x, frontEndPoint.y);
        
        //后波浪绘制
        backY = a * cos( x / 180 * M_PI + 3 * b / M_PI ) * amplitude + currentLinePointY;
        CGFloat backCircleY = backY;
        if (currentLinePointY < radius) {
            backCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
            if (backY < backCircleY) {
                backY = backCircleY;
            }
        } else if (currentLinePointY > radius) {
            backCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
            if (backY > backCircleY) {
                backY = backCircleY;
            }
        }
        
        if (fabs(0 - x) < 0.001) {
            backStartPoint = CGPointMake(x + offset, backY + offset);
            CGPathMoveToPoint(backPath, NULL, backStartPoint.x, backStartPoint.y);
        }
        
        backEndPoint = CGPointMake(x + offset, backY + offset);
        CGPathAddLineToPoint(backPath, nil, backEndPoint.x, backEndPoint.y);
    }
    
    CGPoint centerPoint = CGPointMake(fullRect.size.width / 2, fullRect.size.height / 2);
    
    //绘制前浪圆弧
    CGFloat frontStart = [self calculateRotateDegree:centerPoint point:frontStartPoint];
    CGFloat frontEnd = [self calculateRotateDegree:centerPoint point:frontEndPoint];
    
    CGPathAddArc(frontPath, nil, centerPoint.x, centerPoint.y, waveRect.size.width / 2, frontEnd, frontStart, 0);
    CGContextAddPath(context, frontPath);
    CGContextFillPath(context);
    //推入
    CGContextSaveGState(context);
    CGContextDrawPath(context, kCGPathStroke);
    CGPathRelease(frontPath);
    
    
    //绘制后浪圆弧
    CGFloat backStart = [self calculateRotateDegree:centerPoint point:backStartPoint];
    CGFloat backEnd = [self calculateRotateDegree:centerPoint point:backEndPoint];
    
    CGPathAddArc(backPath, nil, centerPoint.x, centerPoint.y, waveRect.size.width / 2, backEnd, backStart, 0);
    
    CGContextSetFillColorWithColor(context, [_backWaterColor CGColor]);
    CGContextAddPath(context, backPath);
    CGContextFillPath(context);
    //推入
    CGContextSaveGState(context);
    CGContextDrawPath(context, kCGPathStroke);
    CGPathRelease(backPath);
    
}

上面的代码较长，可能也比较难以理解。下面我将会对上述代码简单解读一下，已前浪为例（前浪和后浪的实现方式基本一样，只是两个浪正余弦函数不一样而已）。两个浪都是由一条曲线和和一个圆弧构成的封闭区间，曲线的x区间为[0, waveRect.size.width]，y值坐标为frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;(currentLinePointY为偏移量)，通过for循环自增x，计算出y的位置来不断CGPathAddLineToPoint绘制出一条曲线，这就构成了波浪的曲线。然后我们需要根据波浪曲线的起始点和结束点以及圆心点(fullRect.size.width / 2, fullRect.size.height / 2)，来绘制一段封闭的圆弧。
这里就需要用到CGPathAddArc方法；CGPathAddArc方法和CGContextAddArc类似。需要先计算出点波浪的起始点和结束点分别与圆心之间的夹角。知道两点计算夹角的方式如下：

/**
 *  根据圆心点和圆上一个点计算角度
 *
 *  @param centerPoint 圆心点
 *  @param point       圆上的一个点
 *
 *  @return 角度
 */
- (CGFloat)calculateRotateDegree:(CGPoint)centerPoint point:(CGPoint)point {
    
    CGFloat rotateDegree = asin(fabs(point.y - centerPoint.y) / (sqrt(pow(point.x - centerPoint.x, 2) + pow(point.y - centerPoint.y, 2))));
    
    //如果point纵坐标大于原点centerPoint纵坐标(在第一和第二象限)
    if (point.y > centerPoint.y) {
        //第一象限
        if (point.x >= centerPoint.x) {
            rotateDegree = rotateDegree;
        }
        //第二象限
        else {
            rotateDegree = M_PI - rotateDegree;
        }
    } else //第三和第四象限
    {
        if (point.x <= centerPoint.x) //第三象限，不做任何处理
        {
            rotateDegree = M_PI + rotateDegree;
        }
        else //第四象限
        {
            rotateDegree = 2 * M_PI - rotateDegree;
        }
    }
    return rotateDegree;
}

波浪绘制的相关判断

由于曲线x区间是[0, waveRect.size.width]，y值是根据公式frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;计算出来的，但是最终构成的波浪是一个球形的，所以对于计算出来的y值坐标，我们需要判断它是否在圆上，如果不在圆上，我们应该将它移到圆上。

判断分为两种情况：

currentLinePointY<fullRect.size.height / 2

当currentLinePointY<fullRect.size.height / 2时，已知点的坐标x，根据公式y1 = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;算出来的点位置为(x, y1)，而在圆上点坐标为x的点的位置在(x,y2)，如果y1<y2 则最终应该放到波浪上的点为 (x,y2)。

currentLinePointY>fullRect.size.height / 2

同理当currentLinePointY>fullRect.size.height / 2时，已知点的坐标x，根据公式y1 = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;算出来的点位置为(x, y1)，而在圆上点坐标为x的点的位置在(x,y2)，如果y1>y2 则最终应该放到波浪上的点为 (x,y2)。

其中判断的代码如下：

frontY = a * sin( x / 180 * M_PI + 4 * b / M_PI ) * amplitude + currentLinePointY;
        
CGFloat frontCircleY = frontY;
if (currentLinePointY < radius) {
    frontCircleY = radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
    if (frontY < frontCircleY) {
        frontY = frontCircleY;
    }
} else if (currentLinePointY > radius) {
    frontCircleY = radius + sqrt(pow(radius, 2) - pow((radius - x), 2));
    if (frontY > frontCircleY) {
        frontY = frontCircleY;
    }
}

其中当currentLinePointY < radius时，y2=radius - sqrt(pow(radius, 2) - pow((radius - x), 2));
当currentLinePointY > radius时，y2=radius + sqrt(pow(radius, 2) - pow((radius - x), 2))；

这样就构成了一个如下的效果：

然后通过Timer不断的改变a、b的值就得到了我想要的动画效果。

Github地址：https://github.com/Jvaeyhcd/HcdProcessView

最后编辑于：2017.12.04 03:40:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270