轉(zhuǎn)自: iOS開(kāi)發(fā)之CAShapeLayer初探
拓展: CAShapeLayer
一、CAShapeLayer簡(jiǎn)介
CAShapeLayer屬于QuartzCore框架章郁，繼承自CALayer。CAShapeLayer是在坐標(biāo)系內(nèi)繪制貝塞爾曲線的锦援，通過(guò)繪制貝塞爾曲線儒恋，設(shè)置shape(形狀)的path(路徑)，從而繪制各種各樣的圖形以及不規(guī)則圖形黄刚。因此捎谨，使用CAShapeLayer需要與UIBezierPath一起使用。
UIBezierPath類允許你在自定義的 View 中繪制和渲染由直線和曲線組成的路徑.憔维。你可以在初始化的時(shí)候直接為你的UIBezierPath指定一個(gè)幾何圖形涛救。
通俗點(diǎn)就是UIBezierPath用來(lái)指定繪制圖形路徑，而CAShapeLayer就是根據(jù)路徑來(lái)繪圖的业扒。
二检吆、CAShapeLayer屬性介紹
1、[CAShapeLayer layer].path
2程储、[CAShapeLayer layer].fillColor
3蹭沛、[CAShapeLayer layer].fillRule
4臂寝、[CAShapeLayer layer].strokeColor
5、[CAShapeLayer layer].strokeStart與
[CAShapeLayer layer].strokeEnd
6摊灭、[CAShapeLayer layer]. lineWidth與
[CAShapeLayer layer].miterLimit
7咆贬、[CAShapeLayer layer]. lineCap與
[CAShapeLayer layer].lineJoin
8、[CAShapeLayer layer]. lineDashPhase與
[CAShapeLayer layer]. lineDashPattern
三帚呼、開(kāi)始繪制
1掏缎、顏色說(shuō)明---矩形為例
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(375/2-50, 667/2-50, 100, 100);
//設(shè)置背景色
layer.backgroundColor = [UIColor cyanColor].CGColor;
//設(shè)置描邊色
layer.strokeColor = [UIColor blackColor].CGColor;
//設(shè)置填充色
layer.fillColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];
讀者估計(jì)會(huì)納悶，為啥設(shè)置的描邊色與填充色沒(méi)有作用煤杀，這是因?yàn)檫@兩種顏色需要UIBezierPath來(lái)繪制路徑眷蜈，然后使用CAShapeLayer進(jìn)行渲染，所以接下來(lái)就就在上面的那段代碼下簡(jiǎn)單的添加一個(gè)UIBezierPath類路徑（溫馨提示沈自，layer的背景與這兩種顏色最好不要共用）酌儒。
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
layer.path = path.CGPath;
2、繪制shape
//繪制矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
//繪制圓形路徑
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
//繪制自帶圓角的路徑
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) cornerRadius:30];
//指定矩形某一個(gè)角加圓角（代碼示例為左上角）
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(50, 50)];
3酥泛、繪制曲線（正弦曲線為例）
先來(lái)兩張效果圖：
說(shuō)明：圖4只是比圖5多了填充色而已今豆。
- (void)viewDidLoad {
[super viewDidLoad];
UIBezierPath *path = [self startPoint:CGPointMake(50, 300) endPoint:CGPointMake(200, 300) controlPoint:CGPointMake(125, 200)];
UIBezierPath *path1 = [self startPoint:CGPointMake(200, 300) endPoint:CGPointMake(350, 300) controlPoint:CGPointMake(275, 400)];
CAShapeLayer *layer = [self createShapeLayer:[UIColor orangeColor]];
layer.path = path.CGPath;
CAShapeLayer *layer1 = [self createShapeLayer:[UIColor greenColor]];
layer1.path = path1.CGPath;
}
/** 配置貝塞爾曲線
@param startPoint 起始點(diǎn)
@param endPoint 結(jié)束點(diǎn)
@param controlPoint 控制點(diǎn)
@return UIBezierPath對(duì)象
*/
- (UIBezierPath *)startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];
return path;
}
- (CAShapeLayer *)createShapeLayer:(UIColor *)color {
CAShapeLayer *layer = [CAShapeLayer layer];
// layer.frame = CGRectMake(0, 0, 50, 50);
//設(shè)置背景色
// layer.backgroundColor = [UIColor cyanColor].CGColor;
//設(shè)置描邊色
layer.strokeColor = [UIColor blackColor].CGColor;
//設(shè)置填充色
layer.fillColor = color.CGColor;
[self.view.layer addSublayer:layer];
return layer;
}
4、曲線動(dòng)畫(huà)
1)柔袁、直線
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 667/2)];
[path addLineToPoint:CGPointMake(375/2, 667/2)];
[path addLineToPoint:CGPointMake(300, 667/2)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//每次動(dòng)畫(huà)的持續(xù)時(shí)間
animation.duration = 5;
//動(dòng)畫(huà)起始位置
animation.fromValue = @(0);
//動(dòng)畫(huà)結(jié)束位置
animation.toValue = @(1);
//動(dòng)畫(huà)重復(fù)次數(shù)
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor orangeColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
//設(shè)置圖形的弧度
// layer.strokeStart = 0;
// layer.strokeEnd = 0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
//注：由于UIBezierPath已經(jīng)設(shè)置路徑呆躲，所以動(dòng)畫(huà)的路徑就不需要再次設(shè)置，
//只需要設(shè)置起始0與結(jié)束1就行捶索，有需要可以設(shè)置動(dòng)畫(huà)結(jié)束后是否需要返回原位置插掂。
2)、曲線
UIBezierPath *path = [UIBezierPath bezierPath];
//起始點(diǎn)
[path moveToPoint:CGPointMake(50, 667/2)];
//結(jié)束點(diǎn)腥例、兩個(gè)控制點(diǎn)
[path addCurveToPoint:CGPointMake(330, 667/2) controlPoint1:CGPointMake(125, 200) controlPoint2:CGPointMake(185, 450)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 5;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 2.0;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
3)辅甥、圓形
筆者目前的一個(gè)項(xiàng)目中就用到了這個(gè)功能。直接貼一張效果圖：
其實(shí)實(shí)現(xiàn)效果很簡(jiǎn)單燎竖，只是把邊線加粗了然后實(shí)現(xiàn)動(dòng)畫(huà)就可以了璃弄，還有一種思路就是畫(huà)兩個(gè)圓，截取中間的環(huán)构回，對(duì)大圓進(jìn)行顏色漸變填充夏块，小圓clear所有顏色再去實(shí)現(xiàn)動(dòng)畫(huà)也能達(dá)到這樣的效果。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(375/2-100, 667/2-100, 200, 200)];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 9.0;
animation.fromValue = @(0);
animation.toValue = @(1);
animation.repeatCount = 100;
CAShapeLayer *layer = [self createShapeLayer:[UIColor clearColor]];
layer.path = path.CGPath;
layer.lineWidth = 25.0;
//圓的起始位置纤掸，默認(rèn)為0
layer.strokeStart = 0;
//圓的結(jié)束位置脐供，默認(rèn)為1，如果值為0.75借跪，則顯示3/4的圓
layer.strokeEnd = 1;
[layer addAnimation:animation forKey:@"strokeEndAnimation"];
四政己、小結(jié)
iOS中畫(huà)圖類還有CoreGraphics，但筆者比較喜歡使用CAShapeLayer掏愁，且CAShapeLayer一般是與UIBezierPath連用的歇由，如果有動(dòng)畫(huà)功能的話卵牍，還可以加上CABasicAnimation。這篇文章只是對(duì)CAShapeLayer和UIBezierPath類如何使用和主要功能實(shí)現(xiàn)做了簡(jiǎn)要的說(shuō)明印蓖，還有一些項(xiàng)目中可能經(jīng)常用到的圓形進(jìn)度圈辽慕、下載圈，或者某些特效的實(shí)現(xiàn)赦肃，筆者可能在下一篇文章中簡(jiǎn)析封裝步驟與代碼實(shí)現(xiàn)，有需要的讀者多多關(guān)注公浪。
