绘制图形 基本步骤:
- 获取图形上下文
- 创建路径
- 将路径添加到上下文中
- 渲染 当然,操作需要在view的drawRect:方法中。
###绘制饼状图
- 构建数据: 如NSArray *data = @[@15, @30, @12, @18, @25];
- 根据数据个数绘制扇形
- 注意:
- 每个弧的起始、结束弧度都是不一样的
- 每次绘制完毕一个弧以后 都要重新设置下一次的起始弧度为当前的结束 弧度。
- 本次绘制的结束弧度,为起始弧度 + 本次的弧度。
//绘制一个饼状图
//构建数据
NSArray *data = @[@15, @30, @12, @18, @25];
//获取图形上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
//创建路径
//确定圆心
CGPoint centerP = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
//半径
CGFloat r = MIN(rect.size.width, rect.size.height) * 0.5;
//起始弧度
CGFloat start = 0;
//终止弧度
CGFloat end = 0;
for (int i = 0; i < data.count; i ++) {
//计算起始和终止弧度
//终止弧度
end = [data[i] floatValue] / 100.0 * (M_PI * 2) + start;
//
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerP radius:r startAngle:start endAngle:end clockwise:YES];
//连一条到中心点的线
[path addLineToPoint:centerP];
//路径添加到上下文中
CGContextAddPath(ref, path.CGPath);
//下一个扇形的起始弧度就是上一个扇形的终止弧度
start = end;
//设置颜色
[[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1] set];
//渲染
CGContextDrawPath(ref, kCGPathFill);
}
复制代码
###绘制柱状图
- 构建数据: 如NSArray *data = @[@180.8, @300, @125.2, @186.5, @125, @160, @216, @360];
- 根据数据的个数绘制柱状图
- 计算每个柱子的x,y, w,h
//绘制一个柱状图
//数据
NSArray *data = @[@180.8, @300, @125.2, @186.5, @125, @160, @216, @360];
NSArray *colorData = @[[UIColor redColor], [UIColor cyanColor], [UIColor yellowColor], [UIColor greenColor], [UIColor blueColor], [UIColor magentaColor], [UIColor purpleColor], [UIColor brownColor]];
//上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
//计算每个柱子的x y w h
CGFloat w = rect.size.width / (data.count * 2 - 1);
for (int i = 0; i < data.count; i ++) {
//创建路径
CGFloat x = i * (w + w);
CGFloat h = rect.size.height * ([data[i] floatValue] / 500.0);
CGFloat y = rect.size.height - h;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];
//添加到上下文中
CGContextAddPath(ref, path.CGPath);
//设置颜色
// [[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1] set];//随机色
//指定颜色
UIColor *color = (UIColor *)colorData[i];
[color set];
//渲染
CGContextDrawPath(ref, kCGPathFill);
}
复制代码
###绘制进度条
- 控制器中将slider的值传递给自定义view。
- 自定义view中,根据传递过来的值进行绘制。
- 创建一个与自定义view一样大小的label来显示下载进度。
[self addSubview:self.percentageLabel];
self.percentageLabel.frame = CGRectMake(10, (rect.size.height - 20)/2.0, rect.size.width - 20, 20);
self.percentageLabel.text = [NSString stringWithFormat:@"%.2f%%", self.percentage * 100];
//上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
//创建路径
//圆心
CGPoint centerP = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
//半径
CGFloat r = MIN(rect.size.width, rect.size.height) * 0.5 - 5;
//起始弧度
CGFloat start = -M_PI_2;
//终止弧度
CGFloat end = (M_PI * 2) * self.percentage - M_PI_2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerP radius:r startAngle:start endAngle:end clockwise:YES];
//关闭路径
// [path closePath];
//到圆心连线
[path addLineToPoint:centerP];
//设置线宽
CGContextSetLineWidth(ref, 10);
//设置线颜色
[[UIColor redColor] set];
//设置圆角
CGContextSetLineCap(ref, kCGLineCapRound);
//路径添加到上下文
CGContextAddPath(ref, path.CGPath);
//渲染
CGContextDrawPath(ref, kCGPathFill);
复制代码