先看效果圖
line.gif
所用框架
CAShapeLayer與UIBezierPath配合畫線鹤树。畫線的兩種方法：
- DrawRect：DrawRect屬于CoreGraphic框架，占用CPU椰拒，消耗性能大
- CAShapeLayer：CAShapeLayer屬于CoreAnimation框架晶渠，通過GPU來渲染圖形，節(jié)省性能燃观。動(dòng)畫渲染直接提交給手機(jī)GPU褒脯，不消耗內(nèi)存
實(shí)現(xiàn)方法
- 初始化存放x軸的view及y軸的view
- 隨機(jī)產(chǎn)生x軸數(shù)據(jù)及y軸數(shù)據(jù)并賦值
NSMutableArray *xArray = [NSMutableArray new];
NSMutableArray *yArray = [NSMutableArray new];
int x = 10+arc4random()%5;
NSLog(@"x:%d",x);
for (int i=1; i<x; i++) {
[xArray addObject:[NSString stringWithFormat:@"%d",i]];
int y1 = (arc4random()%10)-5;
float y2 = (arc4random()%100) / 100.0;
float y = (float)(y1+y2);
NSLog(@"y1:%d y2:%f",y1,y2);
[yArray addObject:[NSString stringWithFormat:@"%.2f",y]];
}
[self.lineChart setXvalue:xArray];
[self.lineChart setDataArray:yArray];
3.在對(duì)應(yīng)的軸線上添加組件賦值，折線的實(shí)現(xiàn)首先對(duì)獲取到的y軸數(shù)據(jù)做處理
?3.1 取出最大值最小值
NSMutableArray *dataArray = [NSMutableArray new];
CGFloat max = [[yArray valueForKeyPath:@"@max.floatValue"] floatValue];
_maxValue = max;
CGFloat min = [[yArray valueForKeyPath:@"@min.floatValue"] floatValue];
_minValue = min;
if (max>=0) {
_maxValue = max * 1.4;
}else {
_maxValue = max * 0.6;
}
if (min>=0) {
_minValue = min * 0.6;
}else {
_minValue = min * 1.4;
}
CGFloat ava = (_maxValue-_minValue)/3;
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",_maxValue]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",(_maxValue-ava)]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",(_minValue+ava)]];
[dataArray addObject:[NSString stringWithFormat:@"%.2f%%",_minValue]];
return dataArray;
?3.2 畫背景線
CAShapeLayer *bgLayer = [CAShapeLayer layer];
bgLayer.strokeColor = self.bgLineColor.CGColor;
UIBezierPath *linePath = [UIBezierPath bezierPath];
linePath.lineWidth = 2.0;
//背景線
[yValue enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger i, BOOL * _Nonnull stop) {
[linePath moveToPoint:CGPointMake(0 , self.lineHeight / (yValue.count - 1) * i)];
[linePath addLineToPoint:CGPointMake(self.frame.size.width-self.yWidth ,self.lineHeight / (yValue.count - 1) * i)];
}];
bgLayer.path = linePath.CGPath;
[self.layer addSublayer:bgLayer];
?3.3 畫折線
///折線圖
_lineLayer.lineWidth = 1.0;
_lineLayer.strokeColor = COLORHEX(0x24d8fd).CGColor;
_lineLayer.fillColor = [UIColor clearColor].CGColor;
_fillLayer.fillColor = [COLORHEX(0x24d8fd) colorWithAlphaComponent:0.2].CGColor;
UIBezierPath *linePath = [UIBezierPath bezierPath];
UIBezierPath *fillpath = [UIBezierPath bezierPath];
//值差與高度的比例
CGFloat unitValue = (_maxValue - _minValue)/self.lineHeight;
//平均寬度
CGFloat unitWidth = (self.frame.size.width-self.yWidth)/(dataArray.count-1);
NSInteger startY = ABS(self.lineHeight - ([dataArray[0] floatValue]-self.minValue) / unitValue);
[linePath moveToPoint:CGPointMake(0, startY)];
[fillpath moveToPoint:CGPointMake(0, startY)];
[dataArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
CGFloat xPosition = unitWidth * idx;
CGFloat yPosition;
if (unitValue == 0.00) {
yPosition = 0.00;
}else {
yPosition = ABS(self.lineHeight - ([obj floatValue]-self.minValue) / unitValue);
}
[linePath addLineToPoint:CGPointMake(xPosition, yPosition)];
[fillpath addLineToPoint:CGPointMake(xPosition, yPosition)];
//在最后一組數(shù)據(jù)時(shí)給填充路徑形成一個(gè)閉包
if (idx == dataArray.count-1) {
[fillpath addLineToPoint:CGPointMake(self.frame.size.width-self.yWidth, self.lineHeight)];
[fillpath addLineToPoint:CGPointMake(0, self.lineHeight)];
[fillpath moveToPoint:CGPointMake(0, startY)];
}
}];
?3.4 動(dòng)畫效果
CABasicAnimation *ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];
ani.fromValue = @0;
ani.toValue = @1;
ani.duration = 2.0;
[_lineLayer addAnimation:ani forKey:NSStringFromSelector(@selector(strokeEnd))];
__block typeof(&*self) ws = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[ws.layer addSublayer:ws.fillLayer];
});
