CAShapeLayer 簡介:
<li> CAShapeLayer繼承于CALayer,可以使用CALayer的全部屬性;
<li> CAShapeLayer需要和貝塞爾曲線結合使用才更有意義。貝塞爾曲線可以為其提供形狀,而單獨使用CAShapeLayer是沒有任何意義的;
<li> 使用CAShapeLayer與貝塞爾曲線可以實現不在View的DrawRect方法中畫出一些想要的圖形。
貝塞爾曲線(UIBezierPath) 簡介:
<li> UIBezierPath這個類在UIKit中,是CoreGraphics框架關于路徑path的一個封裝,使用此類可以定義簡單的形狀。
<li> UIBezierPath對象是對CGPathRef數據類型的封裝。一般使用UIBezierPath都是在重寫View的-drawRect方法中使用 ,
步驟:
1. 重寫 -drawRect方法;
2. 創建UIBezierPath對象;
3. 使用方法 -moveToPoint 設置初始點;
4. 根據具體要求使用UIBezierPath類的實例方法(畫線、矩形、圓形 等等)
5. 設置UIBezierPath對象的相關屬性(eg: lineWidth 、lineJoinStyle 、aPath.lineCapStyle 、color 等等);
6. 使用行程或者填充方法結束繪圖。
關于CAShapeLayer和DrawRect的比較:
<li>drawRect:drawRect屬于CoreGraphics框架,占用CPU,消耗性能大;
<li>CAShapeLayer:CAShapeLayer屬于CoreAnimation框架,通過GPU來渲染圖形,節省性能,動畫渲染直接提交給手機GPU,不消耗內存。
CAShapeLayer的使用:
<li>繪制特別的形狀
1、CAShapeLayer有一個神奇的屬性 - Path ,用這個屬性配合上UIBezierPath這個類就可以達到神奇的效果。
/** CAShapeLayer */
// 創建path
UIBezierPath * path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(80, 180)];
[path addCurveToPoint:CGPointMake(300, 180) controlPoint1:CGPointMake(100, 80) controlPoint2:CGPointMake(250, 280)];
// 創建CAShapeLayer
CAShapeLayer * shapelayer = [[CAShapeLayer alloc] init];
// 添加到要要顯示的View的圖層中
[self.view.layer addSublayer:shapelayer];
// 將需要繪制的曲線交給shapelayer對象
shapelayer.path = path.CGPath;
// 填充顏色
shapelayer.fillColor = [UIColor redColor].CGColor;
// 曲線的顏色
shapelayer.strokeColor = [UIColor orangeColor].CGColor;
// 曲線的寬度
shapelayer.lineWidth = 10;
總結:可以不需要通過重寫-drawRect方法去實現圖形的繪制,更加的隨機,高性能。
2、一些特殊的圖形也可以通過CAShapeLayer繪制出來,如:
// 設置繪制圖形的大小
CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 600);
CGFloat layerHeight = finalSize.height * 0.2;
// 創建shapeLayer
CAShapeLayer *bottomCurveLayer = [[CAShapeLayer alloc]init];
// 創建path
UIBezierPath *path = [[UIBezierPath alloc]init];
// 設置起點
[path moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
// 左側的邊線
[path addLineToPoint:CGPointMake(0, finalSize.height - 1)];
// 底部的邊線
[path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
// 右側的邊線
[path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
// 頂部的曲線
[path addQuadCurveToPoint:CGPointMake(0, finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
// UIBezierPath提高需要繪制的圖形,交給CAShapeLayer對象渲染圖形
bottomCurveLayer.path = path.CGPath;
bottomCurveLayer.fillColor = [UIColor orangeColor].CGColor;
[self.view.layer addSublayer:bottomCurveLayer];
總結:UIBezierPath提供需要繪制的圖形,而CAShapeLayer提供圖形的渲染顯示到View,不需要在重寫-drawRect中拿到圖形上下文。