自媒体人专用网站,网站建设教育平台,网站宣传推广策划方案,wordpress添加分类图片效果图 .................... 概述 现状 折线图的应用比较广泛#xff0c;为了增强用户体验#xff0c;很多应用中都嵌入了折线图。折线图可以更加直观的表示数据的变化。网络上有很多绘制折线图的demo#xff0c;有的也使用了动画#xff0c;但是线条颜色渐变的折线图的…效果图 .................... 概述 现状 折线图的应用比较广泛为了增强用户体验很多应用中都嵌入了折线图。折线图可以更加直观的表示数据的变化。网络上有很多绘制折线图的demo有的也使用了动画但是线条颜色渐变的折线图的demo少之又少甚至可以说没有。该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案以及折线图线条颜色渐变的实现原理并附以完整的示例。成果 本人已将折线图封装到了一个UIView子类中并提供了相应的接口。该自定义折线图视图基本上可以适用于大部分需要集成折线图的项目。若你遇到相应的需求可以直接将文件拖到项目中调用相应的接口即可项目文件中包含了大量的注释代码若你的需求与折线图的实现效果有差别那么你可以对项目文件的进行修改也可以依照思路定义自己的折线图视图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对象显示折线终点的信息标签的位置需要根据折线终点的位置计算具体实现 折线转折处的点 使用一个类来描述折线转折处的点代码如下 // 接口
/** 折线图上的点 */
interface IDLineChartPoint : NSObject
/** x轴偏移量 */
property (nonatomic, assign) float x;
/** y轴偏移量 */
property (nonatomic, assign) float y;
/** 工厂方法 */(instancetype)pointWithX:(float)x andY:(float)y;
end// 实现
implementation IDLineChartPoint(instancetype)pointWithX:(float)x andY:(float)y {IDLineChartPoint *point [[self alloc] init];point.x x;point.y y;return point;
}
end自定义折线图视图 折线图视图是一个自定义的UIView子类代码如下 // 接口
/** 折线图视图 */
interface IDLineChartView : UIView
/** 折线转折点数组 */
property (nonatomic, strong) NSMutableArrayIDLineChartPoint * *pointArray;
/** 开始绘制折线图 */
- (void)startDrawlineChart;
end// 分类
interface IDLineChartView ()
end// 实现
implementation IDLineChartView
// 初始化
- (instancetype)initWithFrame:(CGRect)frame {if (self [super initWithFrame:frame]) {// 设置折线图的背景色self.backgroundColor [UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1.0];}return self;
}
end效果如图 绘制坐标轴信息 与坐标轴绘制相关的常量 /** 坐标轴信息区域宽度 */
static const CGFloat kPadding 25.0;
/** 坐标系中横线的宽度 */
static const CGFloat kCoordinateLineWith 1.0;在分类中添加与坐标轴绘制相关的成员变量 /** X轴的单位长度 */
property (nonatomic, assign) CGFloat xAxisSpacing;
/** Y轴的单位长度 */
property (nonatomic, assign) CGFloat yAxisSpacing;
/** X轴的信息 */
property (nonatomic, strong) NSMutableArrayNSString * *xAxisInformationArray;
/** Y轴的信息 */
property (nonatomic, strong) NSMutableArrayNSString * *yAxisInformationArray;与坐标轴绘制相关的成员变量的get方法 - (CGFloat)xAxisSpacing {if (_xAxisSpacing 0) {_xAxisSpacing (self.bounds.size.width - kPadding) / (float)self.xAxisInformationArray.count;}return _xAxisSpacing;
}
- (CGFloat)yAxisSpacing {if (_yAxisSpacing 0) {_yAxisSpacing (self.bounds.size.height - kPadding) / (float)self.yAxisInformationArray.count;}return _yAxisSpacing;
}
- (NSMutableArrayNSString * *)xAxisInformationArray {if (_xAxisInformationArray nil) {// 创建可变数组_xAxisInformationArray [[NSMutableArray alloc] init];// 当前日期和日历NSDate *today [NSDate date];NSCalendar *currentCalendar [NSCalendar currentCalendar];// 设置日期格式NSDateFormatter *dateFormatter [[NSDateFormatter alloc] init];dateFormatter.dateFormat MM-dd;// 获取最近一周的日期NSDateComponents *components [[NSDateComponents alloc] init];for (int i -7; i0; i) {components.day i;NSDate *dayOfLatestWeek [currentCalendar dateByAddingComponents:components toDate:today options:0];NSString *dateString [dateFormatter stringFromDate:dayOfLatestWeek];[_xAxisInformationArray addObject:dateString];}}return _xAxisInformationArray;
}
- (NSMutableArrayNSString * *)yAxisInformationArray {if (_yAxisInformationArray nil) {_yAxisInformationArray [NSMutableArray arrayWithObjects:0, 10, 20, 30, 40, 50, nil];}return _yAxisInformationArray;
}
// 折线图上的点重写get方法后期需要暴露接口
- (NSMutableArrayIDLineChartPoint * *)pointArray {if (_pointArray nil) {_pointArray [NSMutableArray arrayWithObjects:[IDLineChartPoint pointWithX:1 andY:1], [IDLineChartPoint pointWithX:2 andY:2], [IDLineChartPoint pointWithX:3 andY:1.5], [IDLineChartPoint pointWithX:4 andY:2], [IDLineChartPoint pointWithX:5 andY:4], [IDLineChartPoint pointWithX:6 andY:1], [IDLineChartPoint pointWithX:7 andY:2], nil];}return _pointArray;
}绘制坐标轴的相关信息 - (void)drawRect:(CGRect)rect {// 获取上下文CGContextRef context UIGraphicsGetCurrentContext();// x轴信息[self.xAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 计算文字尺寸UIFont *informationFont [UIFont systemFontOfSize:10];NSMutableDictionary *attributes [NSMutableDictionary dictionary];attributes[NSForegroundColorAttributeName] [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];attributes[NSFontAttributeName] informationFont;CGSize informationSize [obj sizeWithAttributes:attributes];// 计算绘制起点float drawStartPointX kPadding idx * self.xAxisSpacing (self.xAxisSpacing - informationSize.width) * 0.5;float drawStartPointY self.bounds.size.height - kPadding (kPadding - informationSize.height) / 2.0;CGPoint drawStartPoint CGPointMake(drawStartPointX, drawStartPointY);// 绘制文字信息[obj drawAtPoint:drawStartPoint withAttributes:attributes];}];// y轴[self.yAxisInformationArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 计算文字尺寸UIFont *informationFont [UIFont systemFontOfSize:10];NSMutableDictionary *attributes [NSMutableDictionary dictionary];attributes[NSForegroundColorAttributeName] [UIColor colorWithRed:158/255.0 green:158/255.0 blue:158/255.0 alpha:1.0];attributes[NSFontAttributeName] informationFont;CGSize informationSize [obj sizeWithAttributes:attributes];// 计算绘制起点float drawStartPointX (kPadding - informationSize.width) / 2.0;float drawStartPointY self.bounds.size.height - kPadding - idx * self.yAxisSpacing - informationSize.height * 0.5;CGPoint drawStartPoint CGPointMake(drawStartPointX, drawStartPointY);// 绘制文字信息[obj drawAtPoint:drawStartPoint withAttributes:attributes];// 横向标线CGContextSetRGBStrokeColor(context, 231 / 255.0, 231 / 255.0, 231 / 255.0, 1.0);CGContextSetLineWidth(context, kCoordinateLineWith);CGContextMoveToPoint(context, kPadding, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height - kPadding - idx * self.yAxisSpacing);CGContextStrokePath(context);}];
}效果如图 渐变背景视图 在分类中添加与背景视图相关的常量 /** 渐变背景视图 */
property (nonatomic, strong) UIView *gradientBackgroundView;
/** 渐变图层 */
property (nonatomic, strong) CAGradientLayer *gradientLayer;
/** 颜色数组 */
property (nonatomic, strong) NSMutableArray *gradientLayerColors;在初始化方法中添加调用设置背景视图方法的代码 [self drawGradientBackgroundView];设置渐变视图方法的具体实现 - (void)drawGradientBackgroundView {// 渐变背景视图不包含坐标轴self.gradientBackgroundView [[UIView alloc] initWithFrame:CGRectMake(kPadding, 0, self.bounds.size.width - kPadding, self.bounds.size.height - kPadding)];[self addSubview:self.gradientBackgroundView];/** 创建并设置渐变背景图层 *///初始化CAGradientlayer对象使它的大小为渐变背景视图的大小self.gradientLayer [CAGradientLayer layer];self.gradientLayer.frame self.gradientBackgroundView.bounds;//设置渐变区域的起始和终止位置范围为0-1即渐变路径self.gradientLayer.startPoint CGPointMake(0, 0.0);self.gradientLayer.endPoint CGPointMake(1.0, 0.0);//设置颜色的渐变过程self.gradientLayerColors [NSMutableArray arrayWithArray:[(__bridge id)[UIColor colorWithRed:253 / 255.0 green:164 / 255.0 blue:8 / 255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:251 / 255.0 green:37 / 255.0 blue:45 / 255.0 alpha:1.0].CGColor]];self.gradientLayer.colors self.gradientLayerColors;//将CAGradientlayer对象添加在我们要设置背景色的视图的layer层[self.gradientBackgroundView.layer addSublayer:self.gradientLayer];
}效果如图 折线 在分类中添加与折线绘制相关的成员变量 /** 折线图层 */
property (nonatomic, strong) CAShapeLayer *lineChartLayer;
/** 折线图终点处的标签 */
property (nonatomic, strong) UIButton *tapButton;在初始化方法中添加调用设置折线图层方法的代码 [self setupLineChartLayerAppearance];设置折线图层方法的具体实现 - (void)setupLineChartLayerAppearance {/** 折线路径 */UIBezierPath *path [UIBezierPath bezierPath];[self.pointArray enumerateObjectsUsingBlock:^(IDLineChartPoint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {// 折线if (idx 0) {[path moveToPoint:CGPointMake(self.xAxisSpacing * 0.5 (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];} else {[path addLineToPoint:CGPointMake(self.xAxisSpacing * 0.5 (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing)];}// 折线起点和终点位置的圆点if (idx 0 || idx self.pointArray.count - 1) {[path addArcWithCenter:CGPointMake(self.xAxisSpacing * 0.5 (obj.x - 1) * self.xAxisSpacing, self.bounds.size.height - kPadding - obj.y * self.yAxisSpacing) radius:2.0 startAngle:0 endAngle:2 * M_PI clockwise:YES];}}];/** 将折线添加到折线图层上并设置相关的属性 */self.lineChartLayer [CAShapeLayer layer];self.lineChartLayer.path path.CGPath;self.lineChartLayer.strokeColor [UIColor whiteColor].CGColor;self.lineChartLayer.fillColor [[UIColor clearColor] CGColor];// 默认设置路径宽度为0使其在起始状态下不显示self.lineChartLayer.lineWidth 0;self.lineChartLayer.lineCap kCALineCapRound;self.lineChartLayer.lineJoin kCALineJoinRound;// 设置折线图层为渐变图层的maskself.gradientBackgroundView.layer.mask self.lineChartLayer;
}效果如图初始状态不显示折线 动画的开始与结束 动画开始 /** 动画开始绘制折线图 */
- (void)startDrawlineChart {// 设置路径宽度为4使其能够显示出来self.lineChartLayer.lineWidth 4;// 移除标签if ([self.subviews containsObject:self.tapButton]) {[self.tapButton removeFromSuperview];}// 设置动画的相关属性CABasicAnimation *pathAnimation [CABasicAnimation animationWithKeyPath:strokeEnd];pathAnimation.duration 2.5;pathAnimation.repeatCount 1;pathAnimation.removedOnCompletion NO;pathAnimation.fromValue [NSNumber numberWithFloat:0.0f];pathAnimation.toValue [NSNumber numberWithFloat:1.0f];// 设置动画代理动画结束时添加一个标签显示折线终点的信息pathAnimation.delegate self;[self.lineChartLayer addAnimation:pathAnimation forKey:strokeEnd];
}动画结束添加标签 /** 动画结束时添加一个标签 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {if (self.tapButton nil) { // 首次添加标签避免多次创建和计算CGRect tapButtonFrame CGRectMake(self.xAxisSpacing * 0.5 ([self.pointArray[self.pointArray.count - 1] x] - 1) * self.xAxisSpacing 8, self.bounds.size.height - kPadding - [self.pointArray[self.pointArray.count - 1] y] * self.yAxisSpacing - 34, 30, 30);self.tapButton [[UIButton alloc] initWithFrame:tapButtonFrame];self.tapButton.enabled NO;[self.tapButton setBackgroundImage:[UIImage imageNamed:bubble] forState:UIControlStateDisabled];[self.tapButton.titleLabel setFont:[UIFont systemFontOfSize:10]];[self.tapButton setTitle:20 forState:UIControlStateDisabled];}[self addSubview:self.tapButton];
}集成折线图视图 创建折线图视图 添加成员变量 /** 折线图 */
property (nonatomic, strong) IDLineChartView *lineCharView;在viewDidLoad方法中创建折线图并添加到控制器的view上 self.lineCharView [[IDLineChartView alloc] initWithFrame:CGRectMake(35, 164, 340, 170)];
[self.view addSubview:self.lineCharView];添加开始绘制折线图视图的按钮 添加成员变量 /** 开始绘制折线图按钮 */
property (nonatomic, strong) UIButton *drawLineChartButton;在viewDidLoad方法中创建开始按钮并添加到控制器的view上 self.drawLineChartButton [UIButton buttonWithType:UIButtonTypeSystem];
self.drawLineChartButton.frame CGRectMake(180, 375, 50, 44);
[self.drawLineChartButton setTitle:开始 forState:UIControlStateNormal];
[self.drawLineChartButton addTarget:self action:selector(drawLineChart) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.drawLineChartButton];开始按钮的点击事件 // 开始绘制折线图
- (void)drawLineChart {[self.lineCharView startDrawlineChart];
}效果如图 声明若需要工程文件请在评论中联系我非常愿意与广大技术爱好者沟通交流。下一篇博客将会介绍如何使用UICollectionView实现具有签到功能的日历 转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/5212183.html
