# 離屏渲染
????當圖層屬性的混合體被指定為在未預合成之前不能直接在屏幕中繪制時,屏幕外渲染就被喚起了。屏幕外渲染并不意味著軟件繪制,但是它意味著圖層必須在被顯示之前在一個屏幕外上下文中被渲染(不論CPU還是GPU)。圖層的以下屬性將會觸發屏幕外繪制:
* 圓角(當和`maskToBounds`一起使用時)
* 圖層蒙板
* 陰影
????屏幕外渲染和我們啟用光柵化時相似,除了它并沒有像光柵化圖層那么消耗大,子圖層并沒有被影響到,而且結果也沒有被緩存,所以不會有長期的內存占用。但是,如果太多圖層在屏幕外渲染依然會影響到性能。
????有時候我們可以把那些需要屏幕外繪制的圖層開啟光柵化以作為一個優化方式,前提是這些圖層并不會被頻繁地重繪。
????對于那些需要動畫而且要在屏幕外渲染的圖層來說,你可以用`CAShapeLayer`,`contentsCenter`或者`shadowPath`來獲得同樣的表現而且較少地影響到性能。
## CAShapeLayer
????`cornerRadius`和`maskToBounds`獨立作用的時候都不會有太大的性能問題,但是當他倆結合在一起,就觸發了屏幕外渲染。有時候你想顯示圓角并沿著圖層裁切子圖層的時候,你可能會發現你并不需要沿著圓角裁切,這個情況下用`CAShapeLayer`就可以避免這個問題了。
????你想要的只是圓角且沿著矩形邊界裁切,同時還不希望引起性能問題。其實你可以用現成的`UIBezierPath`的構造器`+bezierPathWithRoundedRect:cornerRadius:`(見清單15.1).這樣做并不會比直接用`cornerRadius`更快,但是它避免了性能問題。
清單15.1 用`CAShapeLayer`畫一個圓角矩形
~~~
#import "ViewController.h"
#import
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create shape layer
CAShapeLayer *blueLayer = [CAShapeLayer layer];
blueLayer.frame = CGRectMake(50, 50, 100, 100);
blueLayer.fillColor = [UIColor blueColor].CGColor;
blueLayer.path = [UIBezierPath bezierPathWithRoundedRect:
CGRectMake(0, 0, 100, 100) cornerRadius:20].CGPath;
?
//add it to our view
[self.layerView.layer addSublayer:blueLayer];
}
@end
~~~
## 可伸縮圖片
????另一個創建圓角矩形的方法就是用一個圓形內容圖片并結合第二章『寄宿圖』提到的`contensCenter`屬性去創建一個可伸縮圖片(見清單15.2).理論上來說,這個應該比用`CAShapeLayer`要快,因為一個可拉伸圖片只需要18個三角形(一個圖片是由一個3*3網格渲染而成),然而,許多都需要渲染成一個順滑的曲線。在實際應用上,二者并沒有太大的區別。
清單15.2 用可伸縮圖片繪制圓角矩形
~~~
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create layer
CALayer *blueLayer = [CALayer layer];
blueLayer.frame = CGRectMake(50, 50, 100, 100);
blueLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.0, 0.0);
blueLayer.contentsScale = [UIScreen mainScreen].scale;
blueLayer.contents = (__bridge id)[UIImage imageNamed:@"Circle.png"].CGImage;
//add it to our view
[self.layerView.layer addSublayer:blueLayer];
}
@end
~~~
????使用可伸縮圖片的優勢在于它可以繪制成任意邊框效果而不需要額外的性能消耗。舉個例子,可伸縮圖片甚至還可以顯示出矩形陰影的效果。
## shadowPath
????在第2章我們有提到`shadowPath`屬性。如果圖層是一個簡單幾何圖形如矩形或者圓角矩形(假設不包含任何透明部分或者子圖層),創建出一個對應形狀的陰影路徑就比較容易,而且Core Animation繪制這個陰影也相當簡單,避免了屏幕外的圖層部分的預排版需求。這對性能來說很有幫助。
????如果你的圖層是一個更復雜的圖形,生成正確的陰影路徑可能就比較難了,這樣子的話你可以考慮用繪圖軟件預先生成一個陰影背景圖。
- Introduction
- 1. 圖層樹
- 1.1 圖層與視圖
- 1.2 圖層的能力
- 1.3 使用圖層
- 1.4 總結
- 2. 寄宿圖
- 2.1 contents屬性
- 2.2 Custom Drawing
- 2.3 總結
- 3. 圖層幾何學
- 3.1 布局
- 3.2 錨點
- 3.3 坐標系
- 3.4 Hit Testing
- 3.5 自動布局
- 3.6 總結
- 4. 視覺效果
- 4.1 圓角
- 4.2 圖層邊框
- 4.3 陰影
- 4.4 圖層蒙板
- 4.5 拉伸過濾
- 4.6 組透明
- 4.7 總結
- 5. 變換
- 5.1 仿射變換
- 5.2 3D變換
- 5.3 固體對象
- 5.4 總結
- 6. 專用圖層
- 6.1 CAShapeLayer
- 6.2 CATextLayer
- 6.3 CATransformLayer
- 6.4 CAGradientLayer
- 6.5 CAReplicatorLayer
- 6.6 CAScrollLayer
- 6.7 CATiledLayer
- 6.8 CAEmitterLayer
- 6.9 CAEAGLLayer
- 6.10 AVPlayerLayer
- 6.11 總結
- 7. 隱式動畫
- 7.1 事務
- 7.2 完成塊
- 7.3 圖層行為
- 7.4 呈現與模型
- 7.5 總結
- 8. 顯式動畫
- 8.1 屬性動畫
- 8.2 動畫組
- 8.3 過渡
- 8.4 在動畫過程中取消動畫
- 8.5 總結
- 9. 圖層時間
- 9.1 CAMediaTiming協議
- 9.2 層級關系時間
- 9.3 手動動畫
- 9.4 總結
- 10. 緩沖
- 10.1 動畫速度
- 10.2 自定義緩沖函數
- 10.3 總結
- 11. 基于定時器的動畫
- 11.1 定時幀
- 11.2 物理模擬
- 12. 性能調優
- 12.1. CPU VS GPU
- 12.2 測量,而不是猜測
- 12.3 Instruments
- 12.4 總結
- 13. 高效繪圖
- 13.1 軟件繪圖
- 13.2 矢量圖形
- 13.3 臟矩形
- 13.4 異步繪制
- 13.5 總結
- 14. 圖像IO
- 14.1 加載和潛伏
- 14.2 緩存
- 14.3 文件格式
- 14.4 總結
- 15. 圖層性能
- 15.1 隱式繪制
- 15.2 離屏渲染
- 15.3 混合和過度繪制
- 15.4 減少圖層數量
- 15.5 總結