iOS动画绘制折线图以及渐变色
有问题联系QQ: 652985191
有问题联系QQ: 652985191
有问题联系QQ: 652985191
说明:
已将折线图封装到了一个UIView子类中，并提供了相应的接口。若你遇到相应的需求可以直接将文件拖到项目中，调用相应的接口即可,感谢@
世俗孤岛
X轴为前7天的时间,动态获取日期,点击坐标点弹出标签
有问题联系QQ: 652985191
Blog中涉及到的知识点
CALayer
图层，可以简单的看做一个不接受用户交互的UIView
每个图层都具有一个CALayer类型mask属性，作用与蒙版相似
Blog中主要用到的CALayer子类有
CAGradientLayer，绘制颜色渐变的背景图层
CAShapeLayer，绘制折线图
CAAnimation
核心动画的基类（不可实例化对象），实现动画操作
Quartz 2D
一个二维的绘图引擎，用来绘制折线（Path）和坐标轴信息（Text）
实现思路
折线图视图
整个折线图将会被自定义到一个UIView子类中
坐标轴绘制
坐标轴直接绘制到折线图视图上，在自定义折线图视图的 drawRect 方法中绘制坐标轴相关信息（线条和文字）
注意坐标系的转换
线条颜色渐变
失败的方案
开始的时候，为了实现线条颜色渐变，我的思考方向是，如何改变路径（UIBezierPath）的渲染颜色（strokeColor）。但是strokeColor只可以设置一种，所以最终无法实现线条颜色的渐变。
成功的方案
在探索过程中找到了CALayer的CALayer类型的mask（）属性，最终找到了解决方案，即：使用UIView对象封装渐变背景视图（frame为折线图视图的减去坐标轴后的frame），创建一个CAGradientLayer渐变图层添加到背景视图上。
创建一个CAShapeLayer对象，用于绘制线条，线条的渲染颜色（strokeColor）为whiteColor，填充颜色（fillColor）为clearColor，从而显示出渐变图层的颜色。将CAShapeLayer对象设置为背景视图的mask属性，即背景视图的蒙版。
折线
使用 UIBezierPath 类来绘制折线
折线转折处尖角的处理，使用 kCALineCapRound 与 kCALineJoinRound 设置折线转折处为圆角
折线起点与终点的圆点的处理，可以直接在 UIBezierPath 对象上添加一个圆，设置远的半径为路径宽度的一半，从而保证是一个实心的圆而不是一个圆环
折线转折处的点
折线转折处点使用一个类来描述（不使用CGPoint的原因是：折线转折处的点需要放到一个数组中）
坐标轴信息
X轴、Y轴的信息分别放到一个数组中
X轴显示的是最近七天的日期，Y轴显示的是最近七天数据变化的幅度
动画
使用CABasicAnimation类来完成绘制折线图时的动画
需要注意的是，折线路径在一开始时需要社会线宽为0，开始绘制时才设置为适当的线宽，保证一开折线路径是隐藏的
标签
点击视图，向折线图视图上添加一个标签（UIButton对象），显示折线点的信息
具体实现
折线转折处的点
使用一个类来描述折线转折处的点，代码如下：
#import
@interfaceHLQLineChartPoint :NSObject
@property(nonatomic,assign)CGFloatx;
@property(nonatomic,assign)CGFloaty;
+ (instancetype)pointWithX:(CGFloat)X andY:(CGFloat)Y;
@end
#import"HLQLineChart.h"
@implementationHLQLineChartPoint
+ (instancetype)pointWithX:(CGFloat)X andY:(CGFloat)Y
{
HLQLineChartPoint*point = [[selfalloc]init];
point.x= X;
point.y= Y;
returnpoint;
}
@end
自定义折线图视图
折线图视图是一个自定义的UIView子类，代码如下：
@interfaceHLQLineChart :UIView
//是否点击弹出每个点的数值
@property(nonatomic,assign,getter=isPopupView)BOOLpopupView;
//是否倒序绘制图形,默认为正序
@property(nonatomic,assign,getter=isInvertedOrder)BOOLinvertedOrder;
//绘制图形的时间,默认是1秒
@property(nonatomic,assign)CGFloatdrawTime;
//初始化折线视图
- (instancetype)initWithFrame:(CGRect)frame andCoordinateFigureArray:(NSMutableArray*)coordinateFigureArray
andYAxleArray:(NSMutableArray*)YAxleArray andBackgroudColor:(UIColor*)backgroudColor andFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor andKFontColor:(UIColor*)fontColor andcolorGradient:(BOOL)isColorGradient;
//开始绘制折线
- (void)startDrawLineChart;
@end
//初始化
- (instancetype)initWithFrame:(CGRect)frame andCoordinateFigureArray:(NSMutableArray*)coordinateFigureArray andYAxleArray:(NSMutableArray*)YAxleArray andBackgroudColor:(UIColor*)backgroudColor andFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor andKFontColor:(UIColor*)fontColor andcolorGradient:(BOOL)isColorGradient
{
if(coordinateFigureArray) {
self.pointArray= coordinateFigureArray;
}
if(YAxleArray) {
self.yAxisInformationArray= YAxleArray;
}
if(self= [superinitWithFrame:frame]) {
//设置折线图的背景颜色
if(backgroudColor) {
self.backgroundColor= backgroudColor;
}else{
self.backgroundColor=KLineBackgroudColor;
}
if(fontColor) {
self.fontColor= fontColor;
}else{
self.fontColor=KFontColor;
}
if(isColorGradient) {
self.colorGradient= isColorGradient;
}
/**设置渐变背景视图*/
[selfdrawGradientBackgroundViewWithFirstChangeColor:FirstChangeColorandSecondChangeColor:SecondChangeColor];
/**设置折线图层*/
[selfsetupLineChartLayerAppearance];
}
returnself;
}
绘制坐标轴信息
- (void)drawRect:(CGRect)rect {
CGContextRefref =UIGraphicsGetCurrentContext();
//x轴信息
[self.xAxisInformationArrayenumerateObjectsUsingBlock:^(NSString*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {
NSMutableDictionary*dictM = [NSMutableDictionarydictionary];
UIFont*font = [UIFontsystemFontOfSize:8];
dictM[NSFontAttributeName] =font;
dictM[NSForegroundColorAttributeName] =self.fontColor;
CGSizeinformationSize = [objsizeWithAttributes:dictM];
//计算绘制起点
CGFloatdrawStartPointX =KPadding+idx*self.xAxisSpacing+(self.xAxisSpacing-informationSize.width)*0.5;
CGFloatdrawStartPointY =self.bounds.size.height-KPadding+(KPadding-informationSize.height)*0.5;
[objdrawAtPoint:CGPointMake(drawStartPointX, drawStartPointY)withAttributes:dictM];
}];
//y轴
[self.yAxisInformationArrayenumerateObjectsUsingBlock:^(NSString*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {
NSMutableDictionary*dictM = [NSMutableDictionarydictionary];
UIFont*font = [UIFontsystemFontOfSize:8];
dictM[NSFontAttributeName] =font;
dictM[NSForegroundColorAttributeName] =KFontColor;
CGSizeinformationSize = [objsizeWithAttributes:dictM];
//计算绘制起点
CGFloatdrawStartPointX = (KPadding-informationSize.width)*0.5;
CGFloatdrawStartPointY =self.bounds.size.height-KPadding-idx*self.yAxisSpacing-informationSize.height*0.5;
[objdrawAtPoint:CGPointMake(drawStartPointX, drawStartPointY)withAttributes:dictM];
//横向的标线
CGContextSetRGBStrokeColor(ref,KRedFloat,KGreenFloat,KBlueFloat,KAlaphFloat);
CGContextSetLineWidth(ref,kCoordinateLineWith);
CGContextMoveToPoint(ref,KPadding,self.bounds.size.height-KPadding-(idx*self.yAxisSpacing));
CGContextAddLineToPoint(ref,self.bounds.size.width,self.bounds.size.height-KPadding-(idx*self.yAxisSpacing));
CGContextStrokePath(ref);
}];
}
动画的开始与结束
- (void)startDrawLineChart
{
//self.lineChartLayer.lineWidth = 1.0;
if(self.isDrawing) {
return;
}
if(self.tapButton) {
[self.tapButtonremoveFromSuperview];
}
self.lineChartLayer.fillColor= [UIColorclearColor].CGColor;
CABasicAnimation*pathAnimation;
//设置动画的相关属性
if(self.isInvertedOrder) {
pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeStart"];
}else{
pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];
}
if(self.drawTime) {
pathAnimation.duration=self.drawTime;
}else{
pathAnimation.duration=1.0;
}
pathAnimation.repeatCount=1;
pathAnimation.removedOnCompletion=NO;
pathAnimation.timingFunction= [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseIn];
if(self.isInvertedOrder) {
pathAnimation.fromValue= [NSNumbernumberWithInt:1.0];
pathAnimation.toValue= [NSNumbernumberWithInt:0.0];
}else{
pathAnimation.fromValue= [NSNumbernumberWithInt:0.0];
pathAnimation.toValue= [NSNumbernumberWithInt:1.0];
}
pathAnimation.delegate=self;
[self.lineChartLayeraddAnimation:pathAnimationforKey:@"strokeEnd"];
}
//动画开始
- (void)animationDidStart:(CAAnimation*)anim
{
self.Drawing=YES;
}
//动画结束之后
- (void)animationDidStop:(CAAnimation*)anim finished:(BOOL)flag
{
if(self.iscolorGradient) {
self.lineChartLayer.fillColor= [UIColorwhiteColor].CGColor;
}
self.Drawing=NO;
}
集成折线图视图
//绘制渐变背景颜色
- (void)drawGradientBackgroundViewWithFirstChangeColor:(UIColor*)FirstChangeColorandSecondChangeColor:(UIColor*)SecondChangeColor
{
self.gradientBackgroundView= [[UIViewalloc]initWithFrame:CGRectMake(KPadding,0,self.bounds.size.width-KPadding,self.bounds.size.height-KPadding)];
[selfaddSubview:self.gradientBackgroundView];
self.gradientLayer= [CAGradientLayerlayer];
self.gradientLayer.frame=self.gradientBackgroundView.bounds;
self.gradientLayer.startPoint=CGPointMake(0,0.0);
self.gradientLayer.endPoint=CGPointMake(1.0,0);
//设置颜色的渐变过程
if(FirstChangeColor&&SecondChangeColor) {
self.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)FirstChangeColor.CGColor,
(__bridgeid)SecondChangeColor.CGColor]];
}else{
self.gradientLayerColors= [NSMutableArrayarrayWithArray:@[(__bridgeid)KFirstChangeColor.CGColor,
(__bridgeid)KSecondChangeColor.CGColor]];
}
self.gradientLayer.colors=self.gradientLayerColors;
[self.gradientBackgroundView.layeraddSublayer:self.gradientLayer];
}
- (void)setupLineChartLayerAppearance
{
UIBezierPath*path = [UIBezierPathbezierPath];
[self.pointArrayenumerateObjectsUsingBlock:^(HLQLineChartPoint*_Nonnullobj,NSUIntegeridx,BOOL*_Nonnullstop) {
//所有的点的位置以及圆心点
CGPointallPoint =CGPointMake(self.xAxisSpacing*0.5+(obj.x-1)*self.xAxisSpacing,self.bounds.size.height-KPadding-obj.y*self.yAxisSpacing);
//从x轴起点或终点的坐标
CGPointxFromWithEndPoint =CGPointMake(self.xAxisSpacing*0.5+(obj.x-1)*self.xAxisSpacing,self.bounds.size.height-KPadding);
//折线
if(idx ==0) {
[pathmoveToPoint:xFromWithEndPoint];
[pathaddLineToPoint:allPoint];
[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];
}elseif(idx ==self.pointArray.count-1){
[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];
[pathaddLineToPoint:allPoint];
[pathaddLineToPoint:xFromWithEndPoint];
}else{
[pathaddArcWithCenter:allPointradius:4.0startAngle:0endAngle:M_PI*2clockwise:YES];
[pathaddLineToPoint:allPoint];
}
}];
self.lineChartLayer= [CAShapeLayerlayer];
self.lineChartLayer.path= path.CGPath;
self.lineChartLayer.strokeColor= [UIColorblueColor].CGColor;
if(!self.iscolorGradient) {
self.lineChartLayer.fillColor= [UIColorclearColor].CGColor;
}
self.lineChartLayer.lineWidth=2.0;
self.lineChartLayer.lineCap=kCALineCapRound;
self.lineChartLayer.lineJoin=kCALineJoinRound;
//设置折线图层为渐变背景的mask
self.gradientBackgroundView.layer.mask=self.lineChartLayer;
}
