通过两天的学习，研究了一下quartz，发现这是一个绘图的好工具。可以在屏幕图层绘制文字，线条，图形还有折线图。
主要是通过CGContextRef来实现，下面来说下实现思路
图片上方的 进度圈
（1）从圆心到圆上画线，每5度转化成弧度画线。共有72条线，然后通过实际走的步数和目标步数转化比率来将线渲染成绿色，渲染方式为画线 stroke。
//计算，通过实际步数和目标步数的比率，计算得出需要标绿的线
CGFloatstepCount = [self.stepCountfloatValue];
CGFloatactualStepCount = [self.targetStepCountfloatValue];
CGFloatstepRate = stepCount / actualStepCount;
NSIntegerstep = stepRate *360;
NSLog(@"%ld",step);
//画线
for(NSIntegeri = -90; i <270; i +=5) {
if(i < step -90) {
CGContextSetRGBStrokeColor(context,60.0/255.0f,175.0/255.0f,60.0/255.0f,1);
//实际步数
}
else
{
CGContextSetRGBStrokeColor(context,0.5,0.5,0.5,1);
//实际步数与目标步数之间的差
}
CGPointaPoints[2];
doubleradian = (double) i *PI/180;
aPoints[0] =CGPointMake(self.circlePoint.x,self.circlePoint.y);
//调用方法，通过圆心，半径和弧度来计算圆上的点
aPoints[1] = [selfPointOfCircleWithCirclePoint:aPoints[0]andRadian:radian];
CGContextAddLines(context, aPoints,2);
CGContextDrawPath(context,kCGPathStroke);
}
//调用方法，通过圆心，半径和弧度来计算圆上的点
BIGRADIUS 大圆半径
-(CGPoint)PointOfCircleWithCirclePoint:(CGPoint)circlePoint andRadian:(double) radian
{
CGPointpoint =CGPointMake(circlePoint.x+BIGRADIUS*cos(radian), circlePoint.y+BIGRADIUS*sin(radian));
returnpoint;
}
（2）从圆心出发，盖一个半径较小的圆，渲染方式为填充 fill。
//小圆填充
CGContextMoveToPoint(context,self.circlePoint.x,self.circlePoint.y);
CGContextSetRGBFillColor(context,1,1,1,1);
CGContextAddArc(context,self.circlePoint.x,self.circlePoint.y,SMALLRADIUS,0,2*PI,0);
CGContextFillPath(context);
（3）中心小圆上加载一个view，上面有image view 和label。
图片下方的折线图
主要也是用CGContextRef实现，然后填充。
模拟数据，24小时对应24个值，随机产生。生成一个字典，
//每小时步数
@property(nonatomic,strong)NSDictionary*stepDict;
（1）首先画出坐标系
代码实现如下图
//画布
CGContextRefcontext =UIGraphicsGetCurrentContext();
CGColorRefcolor = [UIColorgrayColor].CGColor;
//线宽
CGFloatbackLineWidth =0.5f;
//投影
//CGFloat backMiterLimit = 0.f;
//线的属性
CGContextSetLineWidth(context, backLineWidth);
CGContextSetLineJoin(context,kCGLineJoinRound);
CGContextSetLineCap(context,kCGLineCapRound);
CGContextSetBlendMode(context,kCGBlendModeNormal);
CGContextSetStrokeColorWithColor(context, color);
NSIntegertempY =y;
//横线
for(NSIntegeri =0; i <4; i++) {
CGPointbPoint =CGPointMake(30, tempY -50);
CGPointePoint =CGPointMake(x-30, tempY -50);
CGContextMoveToPoint(context, bPoint.x,bPoint.y);
CGContextAddLineToPoint(context, ePoint.x,ePoint.y);
tempY -=_vInterVal;
}
//竖线
CGContextMoveToPoint(context,30,y-50);
CGContextAddLineToPoint(context,30, tempY +_vInterVal-50);
//高度赋值
_height=y-50- (tempY +_vInterVal-50);
//x轴上的坐标点
NSIntegertempX =0;
for(NSIntegeri =0; i <5; i++) {
tempX = i*_hInterval+10;
CGRectrect =CGRectMake(tempX,y-50,50,50);
NSString*hourStr = [NSStringstringWithFormat:@"%2ld:00",i*6];
[selfdrawTheTextWithContext:contextandHourStr:hourStrandRect:rect];
}
//渲染
CGContextStrokePath(context);
（2）画折线图，主要设立CGContextMoveToPoint，然后CGContextAddLineToPoint，通过字典的个数来绘制连续的线，一直CGContextAddLineToPoint，直到最后一个。
//画折线
CGColorRef pointlineColor = [UIColor colorWithRed:60.0/255.0fgreen:175.0/255.0fblue:60.0/255.0falpha:1].CGColor;
CGFloat pointLineWidth =0.5f;
//设置线的属性
CGContextSetLineWidth(context, pointLineWidth);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGContextSetStrokeColorWithColor(context, pointlineColor);
CGContextSetRGBFillColor(context,204.0/255.0f,255.0/255.0f,200.0/255.0f,1);
_hInterval = (x -60) /24;
//起始点
CGContextMoveToPoint(context,30, y -50);
CGFloat endX =30;
for(NSInteger i =0; i <24; i++) {
NSString * key = [NSString stringWithFormat:@"%02ld:00",i];
//调用方法，取y值
CGFloat endY = [selfcalcTheOriginYWithKey:key];
//连线
CGContextAddLineToPoint(context, endX, endY);
//计算x值
endX += _hInterval;
}
//结束点
CGContextAddLineToPoint(context, x-30, y -50);
//填充
CGContextFillPath(context);
//通过key取得字典中的valve，然后转化为y轴上的值
-(CGFloat)calcTheOriginYWithKey:(NSString*)key
{
CGFloatoriginY =y-50- [[self.stepDictobjectForKey:key]floatValue] /600*_height;
returnoriginY;
over
网友评论