UIBezierPath
是非常強(qiáng)大的繪圖工具，可以使用它繪制包括圓弧，橢圓进倍，直線土至，虛線，折線等各類線性圖形猾昆。今天就詳細(xì)介紹一下使用UIBezierPath繪制折線圖陶因。
先看一下繪制后的效果圖：
折線圖.png
使用UIBezierPath繪制大致分為以下幾個(gè)步驟：
- 獲取UIBezierPath對(duì)象，設(shè)置UIBezierPath的屬性垂蜗，如折線寬度楷扬，點(diǎn)與點(diǎn)的連接樣式。
- 為UIBezierPath對(duì)象設(shè)置起始點(diǎn)和結(jié)束點(diǎn)贴见。
- 獲取CAShapeLayer 對(duì)象烘苹，設(shè)置layer的繪制顏色，填充顏色片部。
- 將UIBezierPath對(duì)象和CAShaperLayer對(duì)象進(jìn)行關(guān)聯(lián)镣衡。
- 將CAShaperLayer對(duì)象添加到需要顯示的view上。
結(jié)合代碼分享一下档悠，從繪制X軸廊鸥，Y軸和具體的折線的繪制過(guò)程, 并為點(diǎn)(x,y)添加響應(yīng)的點(diǎn)擊事件
1. 繪制 x 軸
* 畫(huà) X 軸
*/
- (void) drawXAxisView
{
// 因?yàn)閤軸的數(shù)據(jù)比較多，需要折線活動(dòng)辖所，所以將折線繪制在scrollView上惰说，將scrollView添加到當(dāng)前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軸**
```/**
* 畫(huà) Y 軸
*/
- (void) drawYAxisView{
self.yAxisView = [[YAxisView alloc] initWithFrame:CGRectMake(0, 0, 40, self.frame.size.height - 20)];
[_yAxisView initYAxisValues:_YAxisValuesArray];
[self addSubview:_yAxisView]; // 將繪制好的y軸添加到當(dāng)前view上
}```
**3.繪制折線**
/**
- 畫(huà)折線
*/
- (void) drawPolylineXValues:(NSArray *)xValues andYValues:(NSArray *)yValues
{
self.xValues = xValues;
self.yValues = yValues;
UIBezierPath *path = [UIBezierPath bezierPath]; // 1. 獲取UIBezierPath對(duì)象
path.lineWidth = 1; // 設(shè)置UIBezierPath的對(duì)象的屬性
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的起始點(diǎn)
[self addButtonAtX:x1 andY:y1 andTag:0]; // 當(dāng)前點(diǎn)添加事件，方便點(diǎn)擊顯示相應(yīng)信息
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的結(jié)束點(diǎn)
[self addButtonAtX:x andY:y andTag:i];
}
self.shapelayer = [CAShapeLayer layer]; // 3. 獲取CAShaperLayer 對(duì)象
if (!_lineColor) {
self.lineColor = [UIColor redColor];
}
_shapelayer.strokeColor = _lineColor.CGColor; // 設(shè)置 CAShaperLayer對(duì)象的屬性(折線的顏色)
_shapelayer.fillColor = [[UIColor clearColor]CGColor]; 設(shè)置 CAShaperLayer對(duì)象的屬性
_shapelayer.path = path.CGPath; // 4. UIBezierPath對(duì)象和CAShaperLayer對(duì)象進(jìn)行關(guān)聯(lián)
[_scrollView.layer addSublayer:_shapelayer]; // 5. 添加CAShaperLayer到當(dāng)前view
}```
4.在(x,y)處 畫(huà)點(diǎn)缘回。
/**
* 畫(huà)點(diǎn)
*/
- (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];
}
}
/**
* 開(kāi)始畫(huà)點(diǎn)
*
* @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. 在點(diǎn)(x,y) 處添加button, 并且添加點(diǎn)擊事件吆视，點(diǎn)擊后，會(huì)顯示當(dāng)前點(diǎn)的相關(guān)信息
/**
* 在點(diǎn)(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];
}
/**
* 點(diǎn)擊（x,y）處的響應(yīng)事件
*
*/
- (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];
}
/**
* 畫(huà)直線
*/
- (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. 畫(huà)水平方向的虛線切诀。
/**
* 畫(huà)虛線
*/
- (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]; // 斜線的長(zhǎng)度
[_scrollView.layer insertSublayer:dashLinelayer below:_shapelayer];
}
以下方法為類 XAxisView揩环，和YAxisVieW中的方法。
/**
* 初始化X軸幅虑，類XAxisView中的方法
*
*/
- (void) initXAxisValues:(NSArray *)xAxisValuesArray
{
self.xSpaceValue = self.frame.size.width/xAxisValuesArray.count; // x 軸單位尺的距離
// 增加X(jué)軸值
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繪制折線的大概過(guò)程，如有任何不足和缺點(diǎn)倒庵，歡迎指教褒墨。O(∩_∩)O
