CGContextRef繪圖－iOS球形波浪加載進度控件－HcdProcessView詳解

時間  2019-11-09
標籤 cgcontextref 繪圖 ios 球形 波浪 加載 進度 控件 hcdprocessview 詳解 欄目 iOS 简体版
原文   原文鏈接

簡書也有發佈：http://www.jianshu.com/p/20d7...git

《iOS球形波浪加載進度控件－HcdProcessView》這篇文章已經展現了我在項目中編寫的一個球形進度加載控件HcdProcessView，這篇文章我要簡單介紹一下個人製做過程。github

思路

首先我放棄了使用經過改變圖片的位置來實現上面的動畫效果，雖然這樣也能夠實現如上的效果，可是從性能和資源消耗上來講都不是最好的選擇。這裏我採用了經過上下文（也就是CGContextRef）來繪製這樣的效果，你們對它應該並不陌生，它既能夠繪製直線、曲線、多邊形圓形以及各類各樣的幾何圖形。函數

具體步驟

咱們能夠將上面的複雜圖形拆分紅以下幾步：性能

  1. 繪製最外面的一圈刻度尺動畫

  2. 繪製表示進度的刻度尺spa

  3. 繪製中間的球形加載界面code

繪製刻度尺

若是你先要在控件中繪製本身想要的圖形，你須要重寫UIView的drawRect方法：blog

- (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/H...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程