写在前面
前段时间做汇率的项目中，需要绘制汇率曲线，虽然知道关于图表相关的三方库，github已经有很多大神级作品，但是我还是想自己尝试写一下，也是学习的过程嘛，所以我就自己按照项目需求做了个曲线图表视图，并进行了简单封装，效果如图：
图1：项目中的效果,模拟器对背后的网格显示有点问题，可以忽略
t1.gif
图2：简单的demo截图
t2.gif
功能
如上图，控件主要包含了几个功能点
1、绘制曲线
2、填充曲线围绕部分
3、背后网格线
4、左侧的行标和下方的列标显示
如何使用
github地址：封装一个简单的曲线图表视图XWCurveView，使用步骤如下：
1、导入XWCurveView.h头文件
2、初始化控件，设置pointValues属性，该属性为所有的绘制点的值的数组，每个绘制点用字典表示，字典必须包含key值为 XWCurveViewPointValuesRowValueKey 和 XWCurveViewPointValuesColumnValueKey 分别代表横纵的值，
3、配置其他可选的属性值
4、调用- (void)xw_drawCurveView;进行绘制或者重绘曲线视图
原理
绘制原理很简单，使用了CAShapeLayer + UIBezierPath,我们需要将pointValues中的所有值转换成控件中的坐标值，然后根据坐标值得到path即能得到曲线，转换的时候需要考虑到每个点的坐标和横纵最值的关系，最值可以手动设置，但如果没设置，可以通过pointValues计算得到最值，背后的网格我使用了CAReplicatorLayer,这是创建重复控件的利器，下面是主要的代码
/**
* 整理传入的坐标值，按传入数据的值的横坐标值从小到大排序一下
*/- (void)xwp_sortPointValues{ NSMutableArray *temp = [NSMutableArray arrayWithArray:_pointValues];
[temp sortUsingComparator:^NSComparisonResult(NSDictionary *obj1, NSDictionary *obj2) { if ([obj1[XWCurveViewPointValuesRowValueKey] floatValue] > [obj2[XWCurveViewPointValuesRowValueKey] floatValue]) { return NSOrderedDescending;
}else{ return NSOrderedAscending;
}
}];
_pointValues = temp.copy;
}/**
* 计算横纵坐标的最值，如果没有设置就使用计算的最值
*/- (void)xwp_checkEdgeValues{ CGFloat rowMax = [_pointValues.lastObject[XWCurveViewPointValuesRowValueKey] floatValue]; CGFloat rowMin = [_pointValues.firstObject[XWCurveViewPointValuesRowValueKey] floatValue]; CGFloat columnMax = -MAXFLOAT; CGFloat columnMin = MAXFLOAT; for (NSDictionary *pointValue in _pointValues) { if ([pointValue[XWCurveViewPointValuesColumnValueKey] floatValue] > columnMax) {
columnMax = [pointValue[XWCurveViewPointValuesColumnValueKey] floatValue];
} if ([pointValue[XWCurveViewPointValuesColumnValueKey] floatValue] < columnMin) {
columnMin = [pointValue[XWCurveViewPointValuesColumnValueKey] floatValue];
}
} if (!_rowMaxSettedFlag) {
_rowMaxValue = rowMax;
} if (!_rowMinSettedFlag) {
_rowMinValue = rowMin;
} if (!_columnMaxSettedFlag) {
_columnMaxValue = columnMax;
} if (!_columnMinSettedFlag) {
_columnMinValue = columnMin;
}
}/**
* 转换，将传入的点的值数组转换为坐标数组
*/- (void)xwp_changePointArrayFromValueArray{
_pointArray = @[].mutableCopy; for (NSDictionary *dict in _pointValues) { CGPoint point = [self xwp_changePointFromValue:dict];
[_pointArray addObject:[NSValue valueWithCGPoint:point]];
}
}/**
* 将传入的点根据值转换为坐标
*/- (CGPoint)xwp_changePointFromValue:(NSDictionary *)dict{ CGFloat rowValue = [dict[XWCurveViewPointValuesRowValueKey] floatValue]; CGFloat columnValue = [dict[XWCurveViewPointValuesColumnValueKey] floatValue]; CGPoint point = CGPointMake(_mainContainer.width / (_rowMaxValue - _rowMinValue) * (rowValue - _rowMinValue), _mainContainer.height / (_columnMaxValue - _columnMinValue) * (_columnMaxValue - columnValue)); return point;
}/**
* 根据转换的坐标点构建绘制曲线的path和填充曲线的path
*/- (void)xwp_makePath{ UIBezierPath * path = [UIBezierPath bezierPath]; UIBezierPath *backPath = [UIBezierPath bezierPath]; CGPoint firstPoint = [_pointArray[0] CGPointValue]; CGPoint lastPoint = [_pointArray[_pointArray.count - 1] CGPointValue];
[path moveToPoint:firstPoint];
[backPath moveToPoint:CGPointMake(firstPoint.x, _mainContainer.height)]; for (NSValue *pointValue in _pointArray) { CGPoint point = [pointValue CGPointValue]; if (pointValue == _pointArray[0]) {
[backPath addLineToPoint:point]; continue;
}
[backPath addLineToPoint:point];
[path addLineToPoint:point];
}
[backPath addLineToPoint:CGPointMake(lastPoint.x, _mainContainer.height)];
_path = path;
_backPath = backPath;
}/**
* 根据path绘制曲线
*/- (void)xwp_drawCurveWithPath{
_backLayer.path = _backPath.CGPath;
_curveLineLayer.path = _path.CGPath;
_curveLineLayer.strokeEnd = 1; if (_drawWithAnimation) { CABasicAnimation *pointAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pointAnim.fromValue = @0;
pointAnim.toValue = @1;
pointAnim.duration = _drawAnimationDuration;
[_curveLineLayer addAnimation:pointAnim forKey:@"drawLine"];
}
}/**
* 上面除了绘制的操作，关于计算点和path的操作最后都应该在异步线程进行，如果点过多，会造成主线程阻塞
*/- (void)xwp_setCurveLine{ if (!_pointValues.count) { NSLog(@"pointValues为空，没有可绘制的点"); return;
} dispatch_async(dispatch_queue_create("处理计算点和path的队列", NULL), ^{
[self xwp_sortPointValues];
[self xwp_checkEdgeValues];
[self xwp_changePointArrayFromValueArray];
[self xwp_makePath]; dispatch_async(dispatch_get_main_queue(), ^{
[self xwp_drawCurveWithPath];
});
});
}4、如上就是主要的曲线绘制代码了，逻辑是非常简单的，其它细节代码请查看源代码
最后
控件比较简单，我仅仅是对自己的思路做了个总结，自己实现过一次毕竟印象要深刻许多，要是自己以后还要用到这类功能有能更快的集成了，github地址：封装一个简单的曲线图表视图XWCurveView
作者：wazrx
链接：https://www.jianshu.com/p/24459aa51330