一.繪制進(jìn)度條
在研究了Quartz 2D繪制路徑吱晒、文字之后，我們需要實(shí)例運(yùn)用一下沦童。首先我們制作一個如下的效果仑濒，拖動slider的時候，扇形的進(jìn)度條也隨之加載偷遗。
進(jìn)度條效果圖
思路：
- 需要一個slider墩瞳、一個view來繪制扇形；
- 當(dāng)slider拖動的時候氏豌，把slider滑動到的value值給view來繪制扇形喉酌；
- 扇形最小弧度是0，最大弧度是360度（M_PI * 2）；扇形的起點(diǎn)是-M_PI_2泪电，終點(diǎn)是slider滑動的value * 360度（M_PI * 2）般妙；
實(shí)現(xiàn)
我們再storyboard里面添加一個slider、一個ProgressView相速，ProgressView里面添加一個valueLabel來顯示進(jìn)度碟渺；
添加的view
viewcontroller:
#import "ViewController.h"
#import "ProgressView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ProgressView *progressView;
@end
@implementation ViewController
//滾動條滾動調(diào)用的事件
- (IBAction)sliderValueChange:(UISlider *)sender {
//把滾動的值傳給顯示的view
self. progressView.value = sender.value;
}
@end
ProgressView:
.h
@interface ProgressView : UIView
//用于接收滾動的值
@property(nonatomic,assign)CGFloat value;
@end
.m
@implementation ProgressView
-(void)setValue:(CGFloat)value{
_value = value;
//修改lable顯示的內(nèi)容
_valueLabel.text = [NSString stringWithFormat:@"%.2f%%",value * 100];
//通知系統(tǒng)，調(diào)用drawRect方法
[self setNeedsDisplay];
}
/*
當(dāng)系統(tǒng)調(diào)用drawRect方法時突诬，在drawRect內(nèi)部會自動創(chuàng)建跟view相關(guān)的上下文
手動調(diào)用drawRect不會創(chuàng)建上下文
*/
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height *0.5);
CGFloat radius = rect.size.width/2.0 - 10;
CGFloat startA = -M_PI_2;//-90度
CGFloat endA = startA + _value * M_PI * 2; //value * 360度
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描繪路徑
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[path addLineToPoint:center];
//設(shè)置上下文狀態(tài)
[[UIColor yellowColor] set];
//3.把路徑添加到畫板上面
CGContextAddPath(ctx, path.CGPath);
//4.把上下文渲染到view的layer層
[path fill];
}
@end
