一辫狼、CAShapeLayer簡介
CAShapeLayer屬于QuartzCore框架寺惫，繼承自CALayer形娇。CAShapeLayer是在坐標(biāo)系內(nèi)繪制貝塞爾曲線的仔粥，通過繪制貝塞爾曲線，設(shè)置shape(形狀)的path(路徑)王带，從而繪制各種各樣的圖形以及不規(guī)則圖形淑蔚。因此，使用CAShapeLayer需要與UIBezierPath一起使用愕撰。
UIBezierPath類允許你在自定義的 View 中繪制和渲染由直線和曲線組成的路徑.刹衫。你可以在初始化的時候直接為你的UIBezierPath指定一個幾何圖形。
通俗點(diǎn)就是UIBezierPath用來指定繪制圖形路徑搞挣，而CAShapeLayer就是根據(jù)路徑來繪圖的带迟。
二、CAShapeLayer屬性介紹
1囱桨、[CAShapeLayer layer].path
path
@property(nullable)CGPathRefpath;
官方的解釋是定義要呈現(xiàn)的形狀的路徑仓犬。如果路徑擴(kuò)展到層邊界之外，只有當(dāng)正常層屏蔽規(guī)則導(dǎo)致該條線時舍肠，它才會自動被剪輯到該層搀继。賦值時，路徑被復(fù)制翠语。默認(rèn)為null叽躯。（注意，雖然路徑屬性的動畫肌括，不隱將動畫時創(chuàng)建的屬性發(fā)生了變化点骑。）
2、[CAShapeLayer layer].fillColor
fillColor
@property(nullable)CGColorReffillColor;
官方解釋是填充路徑的顏色谍夭，或不需要填充黑滴。默認(rèn)顏色為不透明的黑色。
3紧索、[CAShapeLayer layer].fillRule
fillRule
@property(copy)NSString*fillRule;
官方解釋是當(dāng)在填充顏色的時候則就需要這種填充規(guī)則袁辈，值有兩種，非零和奇偶數(shù)珠漂，但默認(rèn)是非零值吵瞻。
4葛菇、[CAShapeLayer layer].strokeColor
strokeColor
@property(nullable)CGColorRefstrokeColor;
官方解釋是設(shè)置描邊色开泽，默認(rèn)無色斑鸦。
5溯香、[CAShapeLayer layer].strokeStart與[CAShapeLayer layer].strokeEnd
strokeStart與strokeEnd
@propertyCGFloatstrokeStart;@propertyCGFloatstrokeEnd;
官方解釋是這兩個值被定義用于繪制邊線輪廓路徑的子區(qū)域。該值必須在[0,1]范圍卿泽，0代表路徑的開始，1代表路徑的結(jié)束滋觉。在0和1之間的值沿路徑長度進(jìn)行線性插值签夭。strokestart默認(rèn)為0，strokeend默認(rèn)為1椎侠。
6第租、[CAShapeLayer layer]. lineWidth與[CAShapeLayer layer].miterLimit
lineWidth與miterLimit
@propertyCGFloatlineWidth;@propertyCGFloatmiterLimit;
官方解釋是lineWidth為線的寬度，默認(rèn)為1我纪；miterLimit為最大斜接長度慎宾。斜接長度指的是在兩條線交匯處和外交之間的距離。只有l(wèi)ineJoin屬性為kCALineJoinMiter時miterLimit才有效浅悉。邊角的角度越小趟据，斜接長度就會越大。為了避免斜接長度過長术健，我們可以使用miterLimit屬性汹碱。如果斜接長度超過miterLimit的值，邊角會以lineJoin的“bevel”即kCALineJoinBevel類型來顯示荞估。
7咳促、[CAShapeLayer layer]. lineCap與[CAShapeLayer layer].lineJoin
lineCap與lineJoin
@property(copy)NSString*lineCap;@property(copy)NSString*lineJoin;
lineCap為線端點(diǎn)類型，值有三個類型勘伺，分別為kCALineCapButt 跪腹、kCALineCapRound 、kCALineCapSquare娇昙，默認(rèn)值為Butt尺迂；lineJoin為線連接類型，其值也有三個類型冒掌，分別為kCALineJoinMiter噪裕、kCALineJoinRound、kCALineJoinBevel股毫，默認(rèn)值是Miter膳音。
8、[CAShapeLayer layer]. lineDashPhase與[CAShapeLayer layer]. lineDashPattern
lineDashPhase與lineDashPattern
@propertyCGFloatlineDashPhase;@property(nullable,copy)NSArray *lineDashPattern;
官方解釋是lineDashPhase為線型模版的起始位置铃诬；lineDashPattern為線性模版祭陷，這是一個NSNumber的數(shù)組苍凛，索引從1開始記，奇數(shù)位數(shù)值表示實(shí)線長度兵志，偶數(shù)位數(shù)值表示空白長度醇蝴。
注：fillColor與strokeColor都是在有UIBezierPath參數(shù)配置的情況下才能發(fā)生作用
三、開始繪制
1想罕、顏色說明---矩形為例
顏色說明
CAShapeLayer*layer = [CAShapeLayerlayer];layer.frame =CGRectMake(375/2-50,667/2-50,100,100);//設(shè)置背景色layer.backgroundColor = [UIColorcyanColor].CGColor;//設(shè)置描邊色layer.strokeColor = [UIColorblackColor].CGColor;//設(shè)置填充色layer.fillColor = [UIColorredColor].CGColor;[self.view.layer addSublayer:layer];
效果如圖顯示一個青色的矩形圖：
繪圖1
讀者估計(jì)會納悶悠栓，為啥設(shè)置的描邊色與填充色沒有作用，這是因?yàn)檫@兩種顏色需要UIBezierPath來繪制路徑按价，然后使用CAShapeLayer進(jìn)行渲染惭适，所以接下來就就在上面的那段代碼下簡單的添加一個UIBezierPath類路徑（溫馨提示，layer的背景與這兩種顏色最好不要共用）楼镐。
UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(0,0,100,100)];layer.path = path.CGPath;
繪圖2
可以發(fā)現(xiàn)填充色與描邊色有效果了癞志。
2、繪制shape
//繪制矩形UIBezierPath*path = [UIBezierPathbezierPathWithRect:CGRectMake(0,0,100,100)];//繪制圓形路徑UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,100,100)];//繪制自帶圓角的路徑UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(0,0,100,100) cornerRadius:30];//指定矩形某一個角加圓角（代碼示例為左上角）UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(0,0,100,100) byRoundingCorners:UIRectCornerTopLeftcornerRadii:CGSizeMake(50,50)];
繪圖3
3框产、繪制曲線（正弦曲線為例）
先來兩張效果圖：
繪圖4
繪圖5
說明：圖4只是比圖5多了填充色而已凄杯。
- (void)viewDidLoad {? ? [superviewDidLoad];// Do any additional setup after loading the view, typically from a nib.UIBezierPath*path = [selfstartPoint:CGPointMake(50,300) endPoint:CGPointMake(200,300) controlPoint:CGPointMake(125,200)];UIBezierPath*path1 = [selfstartPoint:CGPointMake(200,300) endPoint:CGPointMake(350,300) controlPoint:CGPointMake(275,400)];CAShapeLayer*layer = [selfcreateShapeLayer:[UIColororangeColor]];? ? layer.path = path.CGPath;CAShapeLayer*layer1 = [selfcreateShapeLayer:[UIColorgreenColor]];? ? layer1.path = path1.CGPath;}/**
配置貝塞爾曲線
@param startPoint 起始點(diǎn)
@param endPoint 結(jié)束點(diǎn)
@param controlPoint 控制點(diǎn)
@return UIBezierPath對象
*/- (UIBezierPath*)startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint{UIBezierPath*path = [UIBezierPathbezierPath];? ? [path moveToPoint:startPoint];? ? [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];returnpath;}- (CAShapeLayer*)createShapeLayer:(UIColor*)color{CAShapeLayer*layer = [CAShapeLayerlayer];//? ? layer.frame = CGRectMake(0, 0, 50, 50);//設(shè)置背景色//? ? layer.backgroundColor = [UIColor cyanColor].CGColor;//設(shè)置描邊色layer.strokeColor = [UIColorblackColor].CGColor;//設(shè)置填充色layer.fillColor = color.CGColor;? ? [self.view.layer addSublayer:layer];returnlayer;}
4、曲線動畫
1)茅信、直線
直線動畫
UIBezierPath*path = [UIBezierPathbezierPath];[path moveToPoint:CGPointMake(50,667/2)];[path addLineToPoint:CGPointMake(375/2,667/2)];[path addLineToPoint:CGPointMake(300,667/2)];CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];//每次動畫的持續(xù)時間animation.duration =5;//動畫起始位置animation.fromValue = @(0);//動畫結(jié)束位置animation.toValue = @(1);//動畫重復(fù)次數(shù)animation.repeatCount =100;CAShapeLayer*layer = [selfcreateShapeLayerNoFrame:[UIColororangeColor]];layer.path = path.CGPath;layer.lineWidth =2.0;//設(shè)置圖形的弧度//? ? layer.strokeStart = 0;//? ? layer.strokeEnd = 0;[layer addAnimation:animation forKey:@"strokeEndAnimation"];//注：由于UIBezierPath已經(jīng)設(shè)置路徑盾舌，所以動畫的路徑就不需要再次設(shè)置，只需要設(shè)置起始0與結(jié)束1就行蘸鲸，有需要可以設(shè)置動畫結(jié)束后是否需要返回原位置妖谴。
2)、曲線
曲線動畫.gif
UIBezierPath*path = [UIBezierPathbezierPath];//起始點(diǎn)[path moveToPoint:CGPointMake(50,667/2)];//結(jié)束點(diǎn)酌摇、兩個控制點(diǎn)[path addCurveToPoint:CGPointMake(330,667/2) controlPoint1:CGPointMake(125,200) controlPoint2:CGPointMake(185,450)];CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];animation.duration =5;animation.fromValue = @(0);animation.toValue = @(1);animation.repeatCount =100;CAShapeLayer*layer = [selfcreateShapeLayerNoFrame:[UIColorclearColor]];layer.path = path.CGPath;layer.lineWidth =2.0;[layer addAnimation:animation forKey:@"strokeEndAnimation"];
3)膝舅、圓形
筆者目前的一個項(xiàng)目中就用到了這個功能。直接貼一張效果圖：
圓形動畫.gif
其實(shí)實(shí)現(xiàn)效果很簡單窑多，只是把邊線加粗了然后實(shí)現(xiàn)動畫就可以了仍稀，還有一種思路就是畫兩個圓，截取中間的環(huán)埂息，對大圓進(jìn)行顏色漸變填充技潘，小圓clear所有顏色再去實(shí)現(xiàn)動畫也能達(dá)到這樣的效果。
UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(375/2-100,667/2-100,200,200)];CABasicAnimation*animation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];animation.duration =3.0;animation.fromValue = @(0);animation.toValue = @(1);animation.repeatCount =100;CAShapeLayer*layer = [selfcreateShapeLayerNoFrame:[UIColorclearColor]];layer.path = path.CGPath;layer.lineWidth =25.0;//圓的起始位置千康，默認(rèn)為0layer.strokeStart =0;//圓的結(jié)束位置享幽，默認(rèn)為1，如果值為0.75拾弃，則顯示3/4的圓layer.strokeEnd =1;[layer addAnimation:animation forKey:@"strokeEndAnimation"];
四值桩、小結(jié)
iOS中畫圖類還有CoreGraphics，但筆者比較喜歡使用CAShapeLayer豪椿，且CAShapeLayer一般是與UIBezierPath連用的奔坟，如果有動畫功能的話携栋，還可以加上CABasicAnimation。這篇文章只是對CAShapeLayer和UIBezierPath類如何使用和主要功能實(shí)現(xiàn)做了簡要的說明咳秉，還有一些項(xiàng)目中可能經(jīng)常用到的圓形進(jìn)度圈婉支、下載圈，或者某些特效的實(shí)現(xiàn)滴某，筆者可能在下一篇文章中簡析封裝步驟與代碼實(shí)現(xiàn)磅摹，有需要的讀者多多關(guān)注。
轉(zhuǎn)載自? http://www.reibang.com/p/139f4fbe7b6b
