最近用UIBezierPath繪制了一些圖形，像柱狀圖、折線圖和餅狀圖之類的圖形。先上效果圖：
基本原理：
- 利用
UIBezierPath能夠創建基于矢量路徑的特性來繪制圖形的路徑，然后將UIBezierPath和CAShapeLayer建立關系，讓后者在前者提供的路徑中進行渲染，最后生成我們所需的各種圖形。而且可以給CAShapeLayer添加動畫特效。
一、柱狀圖
實現思路：
- 對數據源進行分析，獲取數據源的最大值，以及最大值和柱狀圖高度的比例，用于其他數據等比例顯示。數據源為：
- (NSArray *)topArray {
return @[@"342",@"900",@"505",@"1780",@"1450",@"30",@"1000”];
}
- (NSArray *)bottomArray {
return @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月”];
}
獲取數據源最大值以及比例：
//獲取數據最大值
float max = [[self.topArray valueForKeyPath:@"@max.intValue"] floatValue];
//獲取比例大小
float scale = (K_HEIGHT-K_LABEL_HEIGHT*2)/max;
- 然后利用
UIBezierPath繪制單個柱狀的起點和終點的連線：
//柱狀圖
UIBezierPath * bePath = [UIBezierPath bezierPath];
//起點
[bePath moveToPoint:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*i, K_HEIGHT-K_LABEL_HEIGHT)];
//終點
[bePath addLineToPoint:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*i, K_HEIGHT-K_LABEL_HEIGHT-[self.topArray[i] floatValue]*scale)];
[bePath stroke];
- 創建
CAShapeLayer（其屬性作用在下面分類中有說明），并與UIBezierPath建立關系，即設置path屬性:
//添加CAShapeLayer
_shaLayer = [CAShapeLayer layerWithFillColor:[UIColor clearColor].CGColor strokeColor:[UIColor greenColor].CGColor strokeStart:0.0f strokeEnd:1.0f zPosition:1 lineWidth:30.0f path:bePath.CGPath];
[self.layer addSublayer:_shaLayer];
CAShapeLayer的分類方法為：
@implementation CAShapeLayer (Category)
/** CAShapeLayer
* @param fillColor 填充顏色
* @param strokeColor 填充路徑的描邊輪廓的顏色
* @param strokeStart 表示路徑的起點,在[0,1]的范圍內
* @param strokeEnd 表示路徑的終點,在[0,1]的范圍內
* @param zPosition 表示在superlayer中的位置
* @param lineWidth 填充路徑的線寬
* @param path 表示要呈現形狀的路徑
*/
+ (CAShapeLayer *)layerWithFillColor:(CGColorRef)fillColor strokeColor:(CGColorRef)strokeColor strokeStart:(CGFloat)strokeStart strokeEnd:(CGFloat)strokeEnd zPosition:(CGFloat)zPosition lineWidth:(CGFloat)lineWidth path:(CGPathRef)path {
CAShapeLayer * layer = [CAShapeLayer layer];
layer.fillColor = fillColor;
layer.strokeColor = strokeColor;
layer.strokeStart = strokeStart;
layer.strokeEnd = strokeEnd;
layer.zPosition = zPosition;
layer.lineWidth = lineWidth;
layer.path = path;
return layer;
}
@end
- 為創建的
CAShapeLayer添加動畫特效：
//動畫
- (void)startStroke {
[_shaLayer addAnimation:self.pathAnimation forKey:@"strokeEndAnimation”];
}
動畫方法為：
//動畫
- (CABasicAnimation *)pathAnimation {
CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd”];
pathAnimation.duration = 2.0f;
pathAnimation.fromValue = @0.0f;//動畫開始位置
pathAnimation.toValue = @1.0f;//動畫停止位置
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//添加動畫樣式
return pathAnimation;
}
- 為每個柱狀創建上下數據展示
label：
//上label
[self addSubview:[UILabel labelWithFrame:CGRectMake(K_WIDTH/count*i, K_HEIGHT-60-[self.topArray[i] floatValue]*scale, K_WIDTH/count, K_LABEL_HEIGHT) text:self.topArray[i] textColor:[UIColor redColor] textAlignment:NSTextAlignmentCenter font:15]];
//下label
[self addSubview:[UILabel labelWithFrame:CGRectMake(K_WIDTH/count*i, K_HEIGHT-K_LABEL_HEIGHT, K_WIDTH/count, K_LABEL_HEIGHT) text:self.bottomArray[i] textColor:[UIColor blackColor] textAlignment:NSTextAlignmentCenter font:13]];
- 最后按數據源個數對以上控件進行循環創建。
最終實現效果為：
柱狀圖.gif
二、折線圖
折線圖的實現方法和柱狀圖的實現方法類似，主要在于折線圖需要創建一個坐標體系，并對數據源中每個坐標點進行連線繪制。直接上代碼（數據源和柱狀圖一樣）：
#import “BrokenView.h”
#import "UILabel+Category.h”
#define K_WIDTH CGRectGetWidth(self.frame)
#define K_HEIGHT CGRectGetHeight(self.frame)
#define K_LABEL_HEIGHT 30
#define K_ACROSS_NUM 6 //橫線默認條數
@implementation BrokenView {
CAShapeLayer * _shaLayer;
}
- (instancetype)initWithFrame:(CGRect)frame topArray:(NSArray *)topArray bottoArray:(NSArray *)bottomArray {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor whiteColor];
self.topArray = topArray;
self.bottomArray = bottomArray;
}
return self;
}
//動畫
- (void)startStroke {
[_shaLayer addAnimation:self.pathAnimation forKey:@"strokeEndAnimation”];
}
- (void)drawRect:(CGRect)rect {
NSUInteger count = self.topArray.count;
if (count<1) return;
//獲取數據最大值
float max = [[self.topArray valueForKeyPath:@"@max.intValue"] floatValue];//獲取比例大小
float scale = (K_HEIGHT-K_LABEL_HEIGHT*2)/max;//上下兩個label高度和
//繪制坐標系
for (int i=0; i<K_ACROSS_NUM; i++) {
//橫線
UIBezierPath * across = [UIBezierPath bezierPath];
[across moveToPoint:CGPointMake(0, (K_HEIGHT-K_LABEL_HEIGHT)/K_ACROSS_NUM*(i+1))];
[across addLineToPoint:CGPointMake(K_WIDTH, (K_HEIGHT-K_LABEL_HEIGHT)/K_ACROSS_NUM*(i+1))];
[[UIColor greenColor] set];
[across stroke];
}
for (int j=0; j<count; j++) {
//豎線
UIBezierPath * vertical = [UIBezierPath bezierPath];
[vertical moveToPoint:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*j, K_HEIGHT-K_LABEL_HEIGHT)];
[vertical addLineToPoint:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*j, 0)];
[[UIColor greenColor] set];
[vertical stroke];
//繪制各坐標點
UIBezierPath * point = [UIBezierPath bezierPathWithArcCenter:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*j, K_HEIGHT-K_LABEL_HEIGHT-[self.topArray[j] floatValue]*scale) radius:5.0f startAngle:-M_PI endAngle:M_PI*3 clockwise:YES];
CAShapeLayer * pointLayer = [CAShapeLayer layerWithFillColor:[UIColor blueColor].CGColor strokeColor:[UIColor clearColor].CGColor strokeStart:0.0f strokeEnd:1.0f zPosition:0 lineWidth:0.0f path:point.CGPath];
[self.layer addSublayer:pointLayer];
//上label
[self addSubview:[UILabel labelWithFrame:CGRectMake(K_WIDTH/count*j, K_HEIGHT-60-[self.topArray[j] floatValue]*scale, K_WIDTH/count, K_LABEL_HEIGHT) text:self.topArray[j] textColor:[UIColor redColor] textAlignment:NSTextAlignmentCenter font:15]];
//下label
[self addSubview:[UILabel labelWithFrame:CGRectMake(K_WIDTH/count*j, K_HEIGHT-K_LABEL_HEIGHT, K_WIDTH/count, K_LABEL_HEIGHT) text:self.bottomArray[j] textColor:[UIColor blackColor] textAlignment:NSTextAlignmentCenter font:13]];
}
//繪制折線
UIBezierPath * broPath = [UIBezierPath bezierPath];
[broPath moveToPoint:CGPointMake(K_WIDTH/(count*2), K_HEIGHT-K_LABEL_HEIGHT-[self.topArray[0] floatValue]*scale)];
for (int j=1; j<count; j++) {
[broPath addLineToPoint:CGPointMake(K_WIDTH/(count*2)+K_WIDTH/count*j, K_HEIGHT-K_LABEL_HEIGHT-[self.topArray[j] floatValue]*scale)];
}
[broPath stroke];
_shaLayer = [CAShapeLayer layer];
_shaLayer.lineWidth = 2.0f;
_shaLayer.fillColor = [UIColor clearColor].CGColor;
_shaLayer.strokeColor = [UIColor blueColor].CGColor;
_shaLayer.path = broPath.CGPath;
[self.layer addSublayer:_shaLayer];
[self startStroke];
}
@end
最終實現效果為：
折線圖.gif
三、餅狀圖
實現思路：
- 首先設置餅狀圖中心點以及半徑：
//設置餅狀圖中心點
CGFloat centerX = K_WIDTH * 0.5f;
CGFloat centerY = K_HEIGHT * 0.5f;
CGPoint centerPoint = CGPointMake(centerX, centerY);
//設置半徑
CGFloat radius = MIN(centerX, centerY) * 0.5f;//MIN(A,B)為獲取兩者最小值
- 設置數據源：
- (NSArray *)pieArray {
return @[@"70",@"60",@"100",@"50",@"80"];
}
- (NSArray *)colorArray {
return @[[UIColor redColor],[UIColor purpleColor],[UIColor blueColor],[UIColor orangeColor],[UIColor blackColor]];
}
- 獲取數據源數據總和，用于后面扇形劃分比例：
//獲取展示數據總和
CGFloat nums = 0.0f;
for (int i=0; i<self.dataArray.count; i++) {
nums += [self.dataArray[i] floatValue];
}
- 創建一個背景圓，用于后期添加動畫特效：
//繪制背景圓的路徑
UIBezierPath * backPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
radius:radius
startAngle:-M_PI_2
endAngle:M_PI_2*3
clockwise:YES];
_backLayer = [CAShapeLayer layerWithFillColor:[UIColor clearColor].CGColor
strokeColor:[UIColor greenColor].CGColor
strokeStart:0.0f
strokeEnd:1.0f
zPosition:1
lineWidth:radius * 2.0f
path:backPath.CGPath];
UIBezierPath繪制圓形方法+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;中參數如下：center是弧線中心點的坐標； radius是弧線所在圓的半徑； startAngle是弧線開始的角度值； endAngle是弧線結束的角度值； clockwise表示是否順時針畫弧線。
- 用
UIBezierPath繪制各個扇形的路徑，和背景圓路徑一樣：
//繪制各個扇形的路徑
UIBezierPath * subPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
radius:radius
startAngle:-M_PI_2
endAngle:M_PI_2*3
clockwise:YES];
- 分別獲取餅狀圖中每個扇形的起點
strokeStart和終點strokeEnd，并按數據源的個數循環創建每個扇形的CAShapeLayer，并與subPath相關聯，并以此獲取扇形的形狀。
//設置各個扇形開始和結束位置
CGFloat start = 0.0f;
CGFloat end = 0.0f;
for (int i=0; i<self.dataArray.count; i++) {
end = [self.dataArray[i] floatValue]/nums + start;
CGColorRef strokeColor = (!self.colorArray || self.colorArray.count == 0 || i>self.colorArray.count-1) ? [UIColor purpleColor].CGColor : ((UIColor *)self.colorArray[i]).CGColor;
CAShapeLayer * subLayer = [CAShapeLayer layerWithFillColor:[UIColor clearColor].CGColor
strokeColor:strokeColor
strokeStart:start
strokeEnd:end
zPosition:2
lineWidth:radius * 2.0f
path:subPath.CGPath];
[self.layer addSublayer:subLayer];
//百分比label
CGFloat angle = M_PI * (start + end);//扇形角度
CGFloat labelCenterX = centerX * 0.5f * sinf(angle) + centerX;
CGFloat labelCenterY = -centerX * 0.5f * cosf(angle) + centerY;
UILabel * label = [UILabel labelWithFrame:CGRectMake(0, 0, radius * 0.8f, radius * 0.3f) text:[NSString stringWithFormat:@"%@ %ld%%",self.dataArray[i],(NSInteger)((end-start+0.005)*100)] textColor:[UIColor redColor] textAlignment:NSTextAlignmentCenter font:15];
label.center = CGPointMake(labelCenterX, labelCenterY);
label.backgroundColor = [UIColor whiteColor];
label.layer.zPosition = 3;
[self addSubview:label];
start = end;
}
其中以每個扇形的中軸線的中點為中心點來創建的label用于顯示扇形的比例。中心點坐標是利用三角形的正弦函數和余弦函數來確定的。
- 最后為背景圓的
Layer添加動畫:
//動畫
- (void)startStroke {
[_backLayer addAnimation:self.pathAnimation forKey:@"circleAnimation”];
}
最終實現效果為：
餅狀圖.gif
Demo地址：UIBezierPath繪制柱狀圖、折線圖和餅狀圖
