CGContextRef绘图－iOS球形波浪加载进度控件－HcdProcessView详解
简书也有发布：http://www.jianshu.com/p/20d7...git
《iOS球形波浪加载进度控件－HcdProcessView》这篇文章已经展现了我在项目中编写的一个球形进度加载控件HcdProcessView，这篇文章我要简单介绍一下个人制做过程。github
思路
首先我放弃了使用经过改变图片的位置来实现上面的动画效果，虽然这样也能够实现如上的效果，可是从性能和资源消耗上来讲都不是最好的选择。这里我采用了经过上下文（也就是CGContextRef）来绘制这样的效果，你们对它应该并不陌生，它既能够绘制直线、曲线、多边形圆形以及各类各样的几何图形。函数
具体步骤
咱们能够将上面的复杂图形拆分红以下几步：性能
绘制最外面的一圈刻度尺动画
绘制表示进度的刻度尺spa
绘制中间的球形加载界面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...
- 1. 水波波浪进度球
- 2. Android自定义波浪加载圆形进度条——（自定义控件 一）
- 3. canvas绘制多边形进度展现图，水波浪效果
- 4. iOS 图片加载 圆形进度条
- 5. 小程序 波浪进度球 wave
- 6. 【iOS】绘画波浪篇
- 7. Flutter实现圆形波浪进度球【canvas+animation】
- 8. Flutter 波浪圆形进度条
- 9. Canvas绘制波浪图
- 10. 绘制波形图
- 更多相关文章...
- • R 绘图 - 条形图 - R 语言教程
- • MySQL下载步骤详解 - MySQL教程
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
- • Flink 数据传输及反压详解
-
每一个你不满意的现在，都有一个你没有努力的曾经。