最近學(xué)習(xí)顏色漸變和制作虛線的相關(guān)知識(shí)吹由，總結(jié)一下以便自己學(xué)習(xí)和多多交流朱嘴。
效果圖：
效果圖.jpeg
新建項(xiàng)目之后：
第一步：在storyBoard添加slider控件設(shè)置位置和初始值為0.5，添加slider的拖拽事件- (IBAction)changeProgress:(UISlider *)slider 到viewController.m级乍，可以獲得slider的數(shù)值變化帚湘。
第二步：新建一個(gè)繼承自UIView的文件CircleView，用來(lái)封裝虛線和圓環(huán)大诸。
如上圖效果中：灰色的圓環(huán)和虛線是不需要考慮進(jìn)度條的顏色變化贯卦，可以單獨(dú)繪制焙贷；橘色的圓環(huán)和彩色虛線要根據(jù)slider進(jìn)度條變化，制作時(shí)需要獲得進(jìn)度填的數(shù)值啡彬，所以首先繪制灰色的圓環(huán)和虛線故硅。
1 ->灰色圓環(huán)和虛線 在CircleView的drawRect:方法中
//繪制灰色圓環(huán)
UIBezierPath *lightGary = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:110 startAngle:-M_PI endAngle:M_PI clockwise:YES];
lightGary.lineWidth = 5;
[[UIColor lightGrayColor] setStroke];
[lightGary stroke];//連接各個(gè)點(diǎn)
//繪制灰色虛線圓
/*
context – 繪制上下文
phase - 虛線繪制開(kāi)始時(shí)跳過(guò)幾個(gè)點(diǎn)
lengths – 指明虛線是如何交替繪制，具體看例子
count – lengths數(shù)組的長(zhǎng)度
*/
CGContextRef context = UIGraphicsGetCurrentContext();//獲取上下文
CGContextSetLineCap(context, kCGLineCapRound);//設(shè)置線條樣式
CGContextSetLineWidth(context, 3);//設(shè)置線條寬度
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);//設(shè)置顏色
CGContextBeginPath(context);//開(kāi)始繪制
CGFloat length[] = {5,5};//表示先繪制5個(gè)點(diǎn)往踢，再跳過(guò)5個(gè)點(diǎn)
UIBezierPath *dashLine = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:100 startAngle:-M_PI_2 endAngle:M_PI *3/2 clockwise:YES];
CGContextSetLineDash(context, 0, length, 2);//虛線的起始點(diǎn)
CGContextAddPath(context, dashLine.CGPath);
CGContextStrokePath(context);//繪制
CGContextClosePath(context);//關(guān)閉圖像
灰色圓環(huán)虛線.jpeg
2 ->獲取slider的數(shù)據(jù)變化
在CircleView.h設(shè)置全局變量 progress，在ViewController獲取slider的數(shù)值變化
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor yellowColor];
self.circleProgress = [[CircleView alloc]initWithFrame:CGRectMake(70, 50, 250, 250)];
self.circleProgress.backgroundColor = [UIColor blackColor];
[self.view addSubview:_circleProgress];
_circleProgress.progress = _slider.value;//獲取初始值
}
- (IBAction)sliderChange:(UISlider*)sender {
NSLog(@"%f",sender.value);
_circleProgress.progress = sender.value;
[_circleProgress setNeedsDisplay];//slider值變化時(shí)重繪_circleProgress
}
3 ->繪制橘色圓環(huán)（和灰色圓環(huán)差不多瘦癌，此代碼寫(xiě)在繪制灰色虛線代碼之前英支，否則圓環(huán)顯示虛線）
startAngle：圓環(huán)繪制開(kāi)始位置（-M_PI_2 ：12點(diǎn)鐘的位置哮伟，-90度）
endAngle：圓環(huán)結(jié)束為止
//畫(huà)橘色的圓環(huán)
UIBezierPath *orange = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:110 startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI *2 *_progress clockwise:YES];
orange.lineWidth = 4;
[[UIColor orangeColor] setStroke];
[orange stroke];
4->繪制漸變色虛線
// 繪制彩色虛線
CGContextRef contextColor = UIGraphicsGetCurrentContext();//獲取上下文
CGContextSetLineCap(contextColor, kCGLineCapRound);//設(shè)置線條樣式
CGContextSetLineWidth(contextColor, 3);//設(shè)置線條寬度
CGContextBeginPath(contextColor);//開(kāi)始繪制
CGContextSetLineDash(contextColor, 0, length, 2);//虛線的起始點(diǎn)
CGContextAddArc(contextColor, 120, 120, 100,-M_PI_2 , -M_PI_2 + M_PI *2 *_progress, 0);
//以下是使用CGGradientRef 進(jìn)行漸變色替換
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); //創(chuàng)建RGB色彩空間
NSArray *colorArray = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colorArray, NULL);
CGColorSpaceRelease(colorSpace);
colorSpace = NULL;
//將context中的路徑替換成路徑的描邊版本楞黄，使用參數(shù)context去計(jì)算路徑（即創(chuàng)建新的路徑是原來(lái)路徑的描邊）。用恰當(dāng)?shù)念伾畛涞玫降穆窂綄a(chǎn)生類似繪制原來(lái)路徑的效果鬼廓。
CGContextReplacePathWithStrokedPath(contextColor);
CGContextClip(contextColor);
/*
CGGradientRef 線性漸變 參數(shù)意思：
Graphics context 指定用于繪制線性漸變的圖形上下文。
CGGradientRef 線性漸變對(duì)象
startPoint 漸變開(kāi)始位置 endPoint 漸變結(jié)束位置
Gradient drawing options 當(dāng)你的起點(diǎn)或者終點(diǎn)不在圖形上下文的邊緣內(nèi)時(shí)尤慰，指定該如何處理。你可以使用你的開(kāi)始或結(jié)束顏色來(lái)填充漸變以外的空間伟端。此參數(shù)為以下值之一：KCGGradientDrawsAfterEndLocation擴(kuò)展整個(gè)漸變到漸變的終點(diǎn)之后的所有點(diǎn) KCGGradientDrawsBeforeStartLocation擴(kuò)展整個(gè)漸變到漸變的起點(diǎn)之前的所有點(diǎn)匪煌。0不擴(kuò)展該漸變党巾。
*/
CGContextDrawLinearGradient(contextColor, gradient, CGPointMake(0, rect.size.height / 2), CGPointMake(rect.size.width, rect.size.height / 2), 0);
// CGContextDrawRadialGradient(contextColor, gradient, CGPointMake(50, 150), 5, CGPointMake(150, 150),150,kCGGradientDrawsAfterEndLocation);// CGGradientRef 圓形漸變
CGGradientRelease(gradient);
到此已經(jīng)制作出虛線漸變的進(jìn)度效果圖了霜医，顏色漸變還有一種可以用CAGradientLayer實(shí)現(xiàn)（只有線性漸變），有時(shí)間可以自行學(xué)習(xí)一下署海。
如有哪里不對(duì)歡迎大家批評(píng)指正，感謝叹侄。
