UIBezierPath
是非常强大的绘图工具，可以使用它绘制包括圆弧，椭圆，直线，虚线，折线等各类线性图形。今天就详细介绍一下使用UIBezierPath绘制折线图。
先看一下绘制后的效果图：
折线图.png
使用UIBezierPath绘制大致分为以下几个步骤：
- 获取UIBezierPath对象，设置UIBezierPath的属性，如折线宽度，点与点的连接样式。
- 为UIBezierPath对象设置起始点和结束点。
- 获取CAShapeLayer 对象，设置layer的绘制颜色，填充颜色。
- 将UIBezierPath对象和CAShaperLayer对象进行关联。
- 将CAShaperLayer对象添加到需要显示的view上。
结合代码分享一下，从绘制X轴，Y轴和具体的折线的绘制过程, 并为点(x,y)添加响应的点击事件
1. 绘制 x 轴
* 画 X 轴
*/
- (void) drawXAxisView
{
// 因为x轴的数据比较多，需要折线活动，所以将折线绘制在scrollView上，将scrollView添加到当前view上
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(40, 0, self.frame.size.width - 30, self.frame.size.height)];
_scrollView.contentSize = CGSizeMake((self.frame.size.width - 40) * 2, 0);
_scrollView.backgroundColor = [UIColor whiteColor];
_scrollView.bounces = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
if (_scrollView.contentInset.top == 64) {
_scrollView.contentInset = UIEdgeInsetsMake(-64, 0, 0, 0);
}
[self addSubview:_scrollView];
self.xAxisView = [[XAxisView alloc] initWithFrame:CGRectMake(0,self.frame.size.height - 20, _scrollView.contentSize.width, 20)];
[_xAxisView initXAxisValues:_XAxisValuesArray];
[_scrollView addSubview:_xAxisView]; // 将绘制好的x轴添加到scrollView
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0,self.frame.size.height - 21, _scrollView.contentSize.width, 1)];
lineView.backgroundColor = [UIColor blackColor];
[_scrollView addSubview:lineView]; // x 轴单位尺的分界线
}```
**2. 绘制Y轴**
```/**
* 画 Y 轴
*/
- (void) drawYAxisView{
self.yAxisView = [[YAxisView alloc] initWithFrame:CGRectMake(0, 0, 40, self.frame.size.height - 20)];
[_yAxisView initYAxisValues:_YAxisValuesArray];
[self addSubview:_yAxisView]; // 将绘制好的y轴添加到当前view上
}```
**3.绘制折线**
/**
- 画折线
*/
- (void) drawPolylineXValues:(NSArray *)xValues andYValues:(NSArray *)yValues
{
self.xValues = xValues;
self.yValues = yValues;
UIBezierPath *path = [UIBezierPath bezierPath]; // 1. 获取UIBezierPath对象
path.lineWidth = 1; // 设置UIBezierPath的对象的属性
CGFloat x1 = _xAxisView.xSpaceValue * [xValues[0] floatValue];
CGFloat y1 = self.frame.size.height - _yAxisView.ySpaceValue * [yValues[0] floatValue] - _yAxisView.ySpaceValue;
[path moveToPoint:CGPointMake(x1, y1)]; // 2. UIBezierPath的起始点
[self addButtonAtX:x1 andY:y1 andTag:0]; // 当前点添加事件，方便点击显示相应信息
for (int i = 1; i < xValues.count; i++) {
CGFloat x = _xAxisView.xSpaceValue * [[xValues objectAtIndex:i] floatValue];
CGFloat y = self.frame.size.height - _yAxisView.ySpaceValue * [[yValues objectAtIndex:i] floatValue] - _yAxisView.ySpaceValue;
[path addLineToPoint:CGPointMake(x, y)]; //2. UIBezierPath的结束点
[self addButtonAtX:x andY:y andTag:i];
}
self.shapelayer = [CAShapeLayer layer]; // 3. 获取CAShaperLayer 对象
if (!_lineColor) {
self.lineColor = [UIColor redColor];
}
_shapelayer.strokeColor = _lineColor.CGColor; // 设置 CAShaperLayer对象的属性(折线的颜色)
_shapelayer.fillColor = [[UIColor clearColor]CGColor]; 设置 CAShaperLayer对象的属性
_shapelayer.path = path.CGPath; // 4. UIBezierPath对象和CAShaperLayer对象进行关联
[_scrollView.layer addSublayer:_shapelayer]; // 5. 添加CAShaperLayer到当前view
}```
4.在(x,y)处 画点。
/**
* 画点
*/
- (void) drawPoint{
for (int i = 0; i < _xValues.count; i++) {
CGFloat x = _xAxisView.xSpaceValue * [[_xValues objectAtIndex:i] floatValue];
CGFloat y = self.frame.size.height - _yAxisView.ySpaceValue * [[_yValues objectAtIndex:i] floatValue] - _yAxisView.ySpaceValue;
[self addPointToPolyLine:x andY:y];
}
}
/**
* 开始画点
*
* @param x x轴值
* @param y y轴值
*/
- (void) addPointToPolyLine:(CGFloat )x andY:(CGFloat)y{
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:4 startAngle:(0) endAngle:(M_PI*2) clockwise:YES];
self.circleLayer = [CAShapeLayer layer];
_circleLayer.position = CGPointMake(x, y);
_circleLayer.strokeColor = [UIColor whiteColor].CGColor;
_circleLayer.fillColor = [UIColor cyanColor].CGColor;
_circleLayer.lineWidth = 2.0;
_circleLayer.path = circlePath.CGPath;
[_scrollView.layer insertSublayer:_circleLayer above:_shapelayer];
}
5. 在点(x,y) 处添加button, 并且添加点击事件，点击后，会显示当前点的相关信息
/**
* 在点(x,y)出增加button
*
* @param button
*/
- (void) addButtonAtX:(CGFloat)x andY:(CGFloat)y andTag:(int)tag
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.tag = 2000 + tag;
button.frame = CGRectMake(x-10, y-10, 20, 20);
button.backgroundColor = [UIColor clearColor];
[button addTarget:self action:@selector(clickAction:) forControlEvents:UIControlEventTouchUpInside];
[_scrollView addSubview:button];
}
/**
* 点击（x,y）处的响应事件
*
*/
- (void) clickAction:(UIButton *)button
{
int index = (int)button.tag - 2000;
CGFloat x = _xAxisView.xSpaceValue * [_xValues[index] floatValue];
[self drawVerticalLine:x];
[self removeShowLabel];
CGFloat y = self.frame.size.height - _yAxisView.ySpaceValue * [_yValues[index] floatValue] - _yAxisView.ySpaceValue;
self.label = [[UILabel alloc] init];
_label.text = [NSString stringWithFormat:@"x:%@,y:%@",_xValues[index],_yValues[index]];
_label.frame = CGRectMake(x, y, [self widthWithString:[NSString stringWithFormat:@"x:%@,y:%@",_xValues[index],_yValues[index]] andFont:13.0], 20);
_label.backgroundColor = [UIColor groupTableViewBackgroundColor];
_label.textAlignment = NSTextAlignmentCenter;
_label.font = [UIFont systemFontOfSize:13.0];
_label.layer.borderColor = [UIColor lightGrayColor].CGColor;
_label.layer.borderWidth = 0.5;
[_scrollView addSubview:_label];
}
/**
* 画直线
*/
- (void) drawVerticalLine:(CGFloat) x
{
for (int i = 0; i < _scrollView.layer.sublayers.count; i++) {
if ([_scrollView.layer.sublayers[i] isEqual:_verticalLayer]) {
[_verticalLayer removeFromSuperlayer];
}
}
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 1;
[path moveToPoint:CGPointMake(x, 0)];
[path addLineToPoint:CGPointMake(x, self.frame.size.height - 22)];
self.verticalLayer = [CAShapeLayer layer];
_verticalLayer.strokeColor = [[UIColor cyanColor]CGColor];
_verticalLayer.fillColor = [[UIColor clearColor]CGColor];
_verticalLayer.path = path.CGPath;
[_scrollView.layer addSublayer:_verticalLayer];
}
6. 画水平方向的虚线。
/**
* 画虚线
*/
- (void) drawDashLine
{
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 1;
for (int i = 1; i < _YAxisValuesArray.count; i++) {
CGFloat x = _xAxisView.xSpaceValue * [[_XAxisValuesArray lastObject] floatValue];
CGFloat y = self.frame.size.height - _yAxisView.ySpaceValue * [[_YAxisValuesArray objectAtIndex:i] floatValue] - _yAxisView.ySpaceValue;
[path moveToPoint:CGPointMake(0, y)];
[path addLineToPoint:CGPointMake(x, y)];
}
CAShapeLayer *dashLinelayer = [CAShapeLayer layer];
dashLinelayer.strokeColor = [[UIColor grayColor]CGColor];
dashLinelayer.fillColor = [[UIColor clearColor]CGColor];
dashLinelayer.path = path.CGPath;
dashLinelayer.lineDashPattern = @[@2,@2]; // 斜线的长度
[_scrollView.layer insertSublayer:dashLinelayer below:_shapelayer];
}
以下方法为类 XAxisView，和YAxisVieW中的方法。
/**
* 初始化X轴，类XAxisView中的方法
*
*/
- (void) initXAxisValues:(NSArray *)xAxisValuesArray
{
self.xSpaceValue = self.frame.size.width/xAxisValuesArray.count; // x 轴单位尺的距离
// 增加X轴值
for (int i = 0; i < xAxisValuesArray.count; i++) {
if (i != 0) {
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(i * _xSpaceValue - _xSpaceValue/2, 8, _xSpaceValue, 12)];
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:12.0];
label.text = [xAxisValuesArray objectAtIndex:i];
[self addSubview:label];
}
UIView *view = [[UIView alloc] initWithFrame:CGRectMake((i + 1) * _xSpaceValue, 0, 1, 6)];
view.backgroundColor = [UIColor blackColor];
[self addSubview:view];
}
}
/**
* 初始化Y轴，类YAxisView中的方法
*
*/
- (void) initYAxisValues:(NSArray *)yAxisValuesArray
{
self.ySpaceValue = self.frame.size.height/yAxisValuesArray.count; // y 轴单位尺的距离
UIView *ylineView = [[UIView alloc] initWithFrame:CGRectMake(39, 0, 1, self.frame.size.height)];
ylineView.backgroundColor = [UIColor blackColor];
[self addSubview:ylineView];
// 增加分割线
for (int i = 1; i < yAxisValuesArray.count; i++) {
UIView *seperatorLineView = [[UIView alloc] initWithFrame:CGRectMake(34, i * _ySpaceValue - 0.5, 5, 1)];
seperatorLineView.backgroundColor = [UIColor blackColor];
[self addSubview:seperatorLineView];
}
// 增加Y轴值
for (int i = 0; i < yAxisValuesArray.count; i++)
{
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, self.frame.size.height - (i * (_ySpaceValue)) - 6, 30, 12)];
label.textColor = [UIColor blackColor];
label.textAlignment = NSTextAlignmentRight;
label.font = [UIFont systemFontOfSize:12.0];
label.text = [yAxisValuesArray objectAtIndex:i];
[self addSubview:label];
}
}
以上就是使用UIBezierPath绘制折线的大概过程，如有任何不足和缺点，欢迎指教。O(∩_∩)O
