這一篇就應該是繪圖這個系列的基礎中最后一篇了，然后孩擂，然后就過年啦Ｏ浒尽！Ｔ槿稀糕伐！
在此之前良瞧，分享了一些關于繪圖方面的基礎≈吭可以通過傳輸門快捷進入：
其實堅持更新真的對自己而言還算是蠻挑戰(zhàn)的一件事情尘执，重點在于堅持宴凉。每一次有點贊弥锄，和回復都讓自己感覺非常棒。知識就是用來分享的温治，這就是開源越來越讓人著迷的地方戒悠。
好了，來吧～Come on～
1. 繪制柱狀圖bar chart
- 獲取數組中對于每個柱狀圖的樹枝
- 計算柱子的寬度
- 循環(huán)計算每根柱子的高度卤恳、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
完成后的樣子：
餅狀圖.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動態(tài)渲染出該類圖形化界面;
使用IB_DESIGNABLE的方式永乌，把該宏加在自定義類的前面;
這兩個配合著使用具伍，就可以在StoryBoard上直接設置一些系統(tǒng)不提供的屬性了翅雏，例如線段的寬度、顏色等等人芽。個性化定制一個屬于自己的SB望几。
Paste_Image.png
- IBInspectable 就是讓SB上出現屬性的修改框，可以在SB直接修改:
Paste_Image.png
5. C和OC混合繪制圖形小帖士
- C和OC繪制圖形的時候萤厅，如果混合使用橄抹，以C語言為主。
Paste_Image.png
Paste_Image.png
哈哈惕味，寫完這篇楼誓，下篇就開始自己繪制一個進度條拉。不知道各位是不是已經踏上回家的征程了吶名挥？希望各位雞年大吉～新年新祝福疟羹，說雞不說吧～
