最近用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绘制柱状图、折线图和饼状图
