这一篇就应该是绘图这个系列的基础中最后一篇了，然后，然后就过年啦！！！！
在此之前，分享了一些关于绘图方面的基础。可以通过传输门快捷进入：
其实坚持更新真的对自己而言还算是蛮挑战的一件事情，重点在于坚持。每一次有点赞，和回复都让自己感觉非常棒。知识就是用来分享的，这就是开源越来越让人着迷的地方。
好了，来吧～Come on～
1. 绘制柱状图bar chart
- 获取数组中对于每个柱状图的数值
- 计算柱子的宽度
- 循环计算每根柱子的高度、X／Y
- 绘制矩形
- 设置颜色
- 填充
下面模拟一个数组，绘制柱状图。
完成后的样子：
柱状图.png
首先我们要获取数组中常用的一些数值，有一些常见的手法：
NSArray *arry = @[@300,@232.233,@324.324,@34,@4352,@43.0];
// 找出数组中的最大数值
CGFloat maxValue = [[arry valueForKeyPath:@"@max.floatValue"] floatValue];
// 重点在这句话上
// @”@max.floatValue”（获取最大值），
// @”@min.floatValue”（获取最小值），
// @”@avg.floatValue” (获取平均值)，
// @”@count.floatValue”(获取数组大小)
// @”@sum.floatValue”(获取数组总和)
- (void)drawRect:(CGRect)rect{
NSArray *arry = @[@300,@232.233,@324.324,@34,@435,@43.0];
// 计算bar的宽度
CGFloat barW = self.bounds.size.width / (arry.count * 2 - 1);
// 找出数组中的最大数值
CGFloat maxValue = [[arry valueForKeyPath:@"@max.floatValue"] floatValue];
for (NSInteger i = 0; i < arry.count; i++) {
// 计算bar的高度
CGFloat barH = [arry[i] floatValue] * (self.bounds.size.height * BAR_HEIGHT_COEFFICIENT/ maxValue);
// 计算bar的XY
CGFloat barX = barW * i * 2;
CGFloat barY = self.bounds.size.height - barH;
// 绘制矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(barX, barY, barW, barH)];
// 给矩形添加随机色
[[self randomUIColor] set];
[path fill];
}
}
- (UIColor *)randomUIColor{
UIColor *color = [UIColor colorWithRed:(arc4random_uniform(256) / 255.0) green:(arc4random_uniform(256) / 255.0) blue:(arc4random_uniform(256) / 255.0) alpha:(arc4random_uniform(256) / 255.0)];
return color;
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self setNeedsDisplay];
}
2. 绘制饼图Pie Chart
完成后的样子：
Paste_Image.png
- (void)drawRect:(CGRect)rect {
// Drawing code
NSArray *arry = @[@300,@232.233,@324.324,@34,@4352,@43.0];
// 计算数组中所有数值之和
CGFloat sumValue = [[arry valueForKeyPath:@"@sum.floatValue"] floatValue];
//设定圆弧的圆点、起始弧度
CGPoint origin = CGPointMake(150, 150);
CGFloat startAngle = 0;
CGFloat endAngle = 0;
for (NSInteger i = 0 ; i < arry.count; i++) {
// 每个数据的弧度
CGFloat angle = [arry[i] floatValue] * M_PI * 2 / sumValue;
// 计算这一段弧度的结束为止
endAngle = startAngle + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:origin radius:130 startAngle:startAngle endAngle:endAngle clockwise:YES];
// 计算下一段弧度开始的位置
startAngle = endAngle;
// 从弧边，绘制到原点。用于封闭路径，可以绘制扇形
[path addLineToPoint:origin];
// 给扇形添加随机色
[[self randomUIColor] set];
[path fill];
}
}
- (UIColor *)randomUIColor{
UIColor *color = [UIColor colorWithRed:(arc4random_uniform(256) / 255.0) green:(arc4random_uniform(256) / 255.0) blue:(arc4random_uniform(256) / 255.0) alpha:(arc4random_uniform(256) / 255.0)];
return color;
}
//触屏后重新渲染
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self setNeedsDisplay];
}
3. 绘制进度条和进度扇形
本来也想像柱状图、饼状图一样的写法，但是想想其实可以做的更形象一点。所以打算下一篇专门写一下如何用扇形来表达一个下载进度。实现后的效果如下：
rightImage.gif
4. 神秘感增强器：IB_DESIGNABLE和IBInspectable
- IB_DESIGNABLE的宏的功能就是让SB动态渲染出该类图形化界面;
- 使用IB_DESIGNABLE的方式，把该宏加在自定义类的前面;
这两个配合着使用，就可以在StoryBoard上直接设置一些系统不提供的属性了，例如线段的宽度、颜色等等。个性化定制一个属于自己的SB。
Paste_Image.png
- IBInspectable 就是让SB上出现属性的修改框，可以在SB直接修改:
Paste_Image.png
5. C和OC混合绘制图形小帖士
- C和OC绘制图形的时候，如果混合使用，以C语言为主。
Paste_Image.png
Paste_Image.png
- context的栈操作
Paste_Image.png
哈哈，写完这篇，下篇就开始自己绘制一个进度条拉。不知道各位是不是已经踏上回家的征程了吶？希望各位鸡年大吉～新年新祝福，说鸡不说吧～
网友评论