通過(guò)兩天的學(xué)習(xí)，研究了一下quartz，發(fā)現(xiàn)這是一個(gè)繪圖的好工具?？梢栽谄聊粓D層繪制文字，線條，圖形還有折線圖。
主要是通過(guò)CGContextRef來(lái)實(shí)現(xiàn)，下面來(lái)說(shuō)下實(shí)現(xiàn)思路
圖片上方的 進(jìn)度圈
（1）從圓心到圓上畫(huà)線，每5度轉(zhuǎn)化成弧度畫(huà)線。共有72條線，然后通過(guò)實(shí)際走的步數(shù)和目標(biāo)步數(shù)轉(zhuǎn)化比率來(lái)將線渲染成綠色，渲染方式為畫(huà)線 stroke。
//計(jì)算，通過(guò)實(shí)際步數(shù)和目標(biāo)步數(shù)的比率，計(jì)算得出需要標(biāo)綠的線
CGFloatstepCount = [self.stepCountfloatValue];
CGFloatactualStepCount = [self.targetStepCountfloatValue];
CGFloatstepRate = stepCount / actualStepCount;
NSIntegerstep = stepRate *360;
NSLog(@"%ld",step);
//畫(huà)線
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);
//實(shí)際步數(shù)
}
else
{
CGContextSetRGBStrokeColor(context,0.5,0.5,0.5,1);
//實(shí)際步數(shù)與目標(biāo)步數(shù)之間的差
}
CGPointaPoints[2];
doubleradian = (double) i *PI/180;
aPoints[0] =CGPointMake(self.circlePoint.x,self.circlePoint.y);
//調(diào)用方法，通過(guò)圓心，半徑和弧度來(lái)計(jì)算圓上的點(diǎn)
aPoints[1] = [selfPointOfCircleWithCirclePoint:aPoints[0]andRadian:radian];
CGContextAddLines(context, aPoints,2);
CGContextDrawPath(context,kCGPathStroke);
}
//調(diào)用方法，通過(guò)圓心，半徑和弧度來(lái)計(jì)算圓上的點(diǎn)
BIGRADIUS 大圓半徑
-(CGPoint)PointOfCircleWithCirclePoint:(CGPoint)circlePoint andRadian:(double) radian
{
CGPointpoint =CGPointMake(circlePoint.x+BIGRADIUS*cos(radian), circlePoint.y+BIGRADIUS*sin(radian));
returnpoint;
}
（2）從圓心出發(fā)，蓋一個(gè)半徑較小的圓，渲染方式為填充 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）中心小圓上加載一個(gè)view，上面有image view 和label。
圖片下方的折線圖
主要也是用CGContextRef實(shí)現(xiàn)，然后填充。
模擬數(shù)據(jù)，24小時(shí)對(duì)應(yīng)24個(gè)值，隨機(jī)產(chǎn)生。生成一個(gè)字典，
//每小時(shí)步數(shù)
@property(nonatomic,strong)NSDictionary*stepDict;
（1）首先畫(huà)出坐標(biāo)系
代碼實(shí)現(xiàn)如下圖
//畫(huà)布
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軸上的坐標(biāo)點(diǎn)
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）畫(huà)折線圖，主要設(shè)立CGContextMoveToPoint，然后CGContextAddLineToPoint，通過(guò)字典的個(gè)數(shù)來(lái)繪制連續(xù)的線，一直CGContextAddLineToPoint，直到最后一個(gè)。
//畫(huà)折線
CGColorRef pointlineColor = [UIColor colorWithRed:60.0/255.0fgreen:175.0/255.0fblue:60.0/255.0falpha:1].CGColor;
CGFloat pointLineWidth =0.5f;
//設(shè)置線的屬性
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;
//起始點(diǎn)
CGContextMoveToPoint(context,30, y -50);
CGFloat endX =30;
for(NSInteger i =0; i <24; i++) {
NSString * key = [NSString stringWithFormat:@"%02ld:00",i];
//調(diào)用方法，取y值
CGFloat endY = [selfcalcTheOriginYWithKey:key];
//連線
CGContextAddLineToPoint(context, endX, endY);
//計(jì)算x值
endX += _hInterval;
}
//結(jié)束點(diǎn)
CGContextAddLineToPoint(context, x-30, y -50);
//填充
CGContextFillPath(context);
//通過(guò)key取得字典中的valve，然后轉(zhuǎn)化為y軸上的值
-(CGFloat)calcTheOriginYWithKey:(NSString*)key
{
CGFloatoriginY =y-50- [[self.stepDictobjectForKey:key]floatValue] /600*_height;
returnoriginY;
over
