# CATiledLayer 有些時候你可能需要繪制一個很大的圖片，常見的例子就是一個高像素的照片或者是地球表面的詳細地圖。iOS應用通暢運行在內存受限的設備上，所以讀取整個圖片到內存中是不明智的。載入大圖可能會相當地慢，那些對你看上去比較方便的做法（在主線程調用`UIImage`的`-imageNamed:`方法或者`-imageWithContentsOfFile:`方法）將會阻塞你的用戶界面，至少會引起動畫卡頓現象。 能高效繪制在iOS上的圖片也有一個大小限制。所有顯示在屏幕上的圖片最終都會被轉化為OpenGL紋理，同時OpenGL有一個最大的紋理尺寸（通常是2048*2048，或4096*4096，這個取決于設備型號）。如果你想在單個紋理中顯示一個比這大的圖，即便圖片已經存在于內存中了，你仍然會遇到很大的性能問題，因為Core Animation強制用CPU處理圖片而不是更快的GPU（見第12章『速度的曲調』，和第13章『高效繪圖』，它更加詳細地解釋了軟件繪制和硬件繪制）。 `CATiledLayer`為載入大圖造成的性能問題提供了一個解決方案：將大圖分解成小片然后將他們單獨按需載入。讓我們用實驗來證明一下。 ## 小片裁剪 這個示例中，我們將會從一個2048*2048分辨率的雪人圖片入手。為了能夠從`CATiledLayer`中獲益，我們需要把這個圖片裁切成許多小一些的圖片。你可以通過代碼來完成這件事情，但是如果你在運行時讀入整個圖片并裁切，那`CATiledLayer`這些所有的性能優點就損失殆盡了。理想情況下來說，最好能夠逐個步驟來實現。 清單6.11 演示了一個簡單的Mac OS命令行程序，它用`CATiledLayer`將一個圖片裁剪成小圖并存儲到不同的文件中。 清單6.11 裁剪圖片成小圖的終端程序 ~~~ #import int main(int argc, const char * argv[]) { @autoreleasepool{ ?//handle incorrect arguments if (argc < 2) { NSLog(@"TileCutter arguments: inputfile"); return 0; } //input file NSString *inputFile = [NSString stringWithCString:argv[1] encoding:NSUTF8StringEncoding]; //tile size CGFloat tileSize = 256; //output path NSString *outputPath = [inputFile stringByDeletingPathExtension]; //load image NSImage *image = [[NSImage alloc] initWithContentsOfFile:inputFile]; NSSize size = [image size]; NSArray *representations = [image representations]; if ([representations count]){ NSBitmapImageRep *representation = representations[0]; size.width = [representation pixelsWide]; size.height = [representation pixelsHigh]; } NSRect rect = NSMakeRect(0.0, 0.0, size.width, size.height); CGImageRef imageRef = [image CGImageForProposedRect:&rect context:NULL hints:nil]; //calculate rows and columns NSInteger rows = ceil(size.height / tileSize); NSInteger cols = ceil(size.width / tileSize); //generate tiles for (int y = 0; y < rows; ++y) { for (int x = 0; x < cols; ++x) { //extract tile image CGRect tileRect = CGRectMake(x*tileSize, y*tileSize, tileSize, tileSize); CGImageRef tileImage = CGImageCreateWithImageInRect(imageRef, tileRect); //convert to jpeg data NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:tileImage]; NSData *data = [imageRep representationUsingType: NSJPEGFileType properties:nil]; CGImageRelease(tileImage); //save file NSString *path = [outputPath stringByAppendingFormat: @"_%02i_%02i.jpg", x, y]; [data writeToFile:path atomically:NO]; } } } return 0; } ~~~ 這個程序將2048*2048分辨率的雪人圖案裁剪成了64個不同的256*256的小圖。（256*256是`CATiledLayer`的默認小圖大小，默認大小可以通過`tileSize`屬性更改）。程序接受一個圖片路徑作為命令行的第一個參數。我們可以在編譯的scheme將路徑參數硬編碼然后就可以在Xcode中運行了，但是以后作用在另一個圖片上就不方便了。所以，我們編譯了這個程序并把它保存到敏感的地方，然后從終端調用，如下面所示： ~~~ > path/to/TileCutterApp path/to/Snowman.jpg ~~~ The app is very basic, but could easily be extended to support additional arguments such as tile size, or to export images in formats other than JPEG. The result of running it is a sequence of 64 new images, named as follows: 這個程序相當基礎，但是能夠輕易地擴展支持額外的參數比如小圖大小，或者導出格式等等。運行結果是64個新圖的序列，如下面命名： ~~~ Snowman_00_00.jpg Snowman_00_01.jpg Snowman_00_02.jpg ... Snowman_07_07.jpg ~~~ 既然我們有了裁切后的小圖，我們就要讓iOS程序用到他們。`CATiledLayer`很好地和`UIScrollView`集成在一起。除了設置圖層和滑動視圖邊界以適配整個圖片大小，我們真正要做的就是實現`-drawLayer:inContext:`方法，當需要載入新的小圖時，`CATiledLayer`就會調用到這個方法。 清單6.12演示了代碼。圖6.12是代碼運行結果。 清單6.12 一個簡單的滾動`CATiledLayer`實現 ~~~ #import "ViewController.h" #import @interface ViewController () @property (nonatomic, weak) IBOutlet UIScrollView *scrollView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //add the tiled layer CATiledLayer *tileLayer = [CATiledLayer layer];? tileLayer.frame = CGRectMake(0, 0, 2048, 2048); tileLayer.delegate = self; [self.scrollView.layer addSublayer:tileLayer]; //configure the scroll view self.scrollView.contentSize = tileLayer.frame.size; //draw layer [tileLayer setNeedsDisplay]; } - (void)drawLayer:(CATiledLayer *)layer inContext:(CGContextRef)ctx { //determine tile coordinate CGRect bounds = CGContextGetClipBoundingBox(ctx); NSInteger x = floor(bounds.origin.x / layer.tileSize.width); NSInteger y = floor(bounds.origin.y / layer.tileSize.height); //load tile image NSString *imageName = [NSString stringWithFormat: @"Snowman_%02i_%02i", x, y]; NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"]; UIImage *tileImage = [UIImage imageWithContentsOfFile:imagePath]; //draw tile UIGraphicsPushContext(ctx); [tileImage drawInRect:bounds]; UIGraphicsPopContext(); } @end ~~~  圖6.12 用`UIScrollView`滾動`CATiledLayer` 當你滑動這個圖片，你會發現當`CATiledLayer`載入小圖的時候，他們會淡入到界面中。這是`CATiledLayer`的默認行為。（你可能已經在iOS 6之前的蘋果地圖程序中見過這個效果）你可以用`fadeDuration`屬性改變淡入時長或直接禁用掉。`CATiledLayer`（不同于大部分的`UIKit`和Core Animation方法）支持多線程繪制，`-drawLayer:inContext:`方法可以在多個線程中同時地并發調用，所以請小心謹慎地確保你在這個方法中實現的繪制代碼是線程安全的。 ## Retina小圖 你也許已經注意到了這些小圖并不是以Retina的分辨率顯示的。為了以屏幕的原生分辨率來渲染`CATiledLayer`，我們需要設置圖層的`contentsScale`來匹配`UIScreen`的`scale`屬性： ~~~ tileLayer.contentsScale = [UIScreen mainScreen].scale; ~~~ 有趣的是，`tileSize`是以像素為單位，而不是點，所以增大了`contentsScale`就自動有了默認的小圖尺寸（現在它是128*128的點而不是256*256）.所以，我們不需要手工更新小圖的尺寸或是在Retina分辨率下指定一個不同的小圖。我們需要做的是適應小圖渲染代碼以對應安排`scale`的變化，然而： ~~~ //determine tile coordinate CGRect bounds = CGContextGetClipBoundingBox(ctx); CGFloat scale = [UIScreen mainScreen].scale; NSInteger x = floor(bounds.origin.x / layer.tileSize.width * scale); NSInteger y = floor(bounds.origin.y / layer.tileSize.height * scale); ~~~ 通過這個方法糾正`scale`也意味著我們的雪人圖將以一半的大小渲染在Retina設備上（總尺寸是1024*1024，而不是2048*2048）。這個通常都不會影響到用`CATiledLayer`正常顯示的圖片類型（比如照片和地圖，他們在設計上就是要支持放大縮小，能夠在不同的縮放條件下顯示），但是也需要在心里明白。