趣談 iOS 10 UIKit 繪圖

我花費了幾天時間用來嘗試 iOS 10 中 UIGraphics 類中對于圖片和 PDF 中的渲染功能。感覺很有意思。這次我來分享一下這個功能，并且將其與舊的版本對比一下。

舊版本

是否還記得這個？

// 創建一個色域(color space)
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
if (colorSpace == NULL) {
    NSLog(@"Error allocating color space");
    return nil; 
}

// 創建位圖上下文(Context Reference)
CGContextRef context = CGBitmapContextCreate(
    NULL, width, height,
    BITS_PER_COMPONENT, // 每個通道的位數是 8 bit （BPC） 
    width * ARGB_COUNT, // 4 byte ARGB 值
    colorSpace,
    (CGBitmapInfo) kCGImageAlphaPremultipliedFirst); 

if (context == NULL) {
    NSLog(@"Error: Context not created!"); 
    CGColorSpaceRelease(colorSpace ); 
    return nil;
}

// 加入上下文
UIGraphicsPushContext(context);

// 繪圖操作
UIGraphicsPopContext();

// 轉換為圖片對象
CGImageRef imageRef = CGBitmapContextCreateImage(context); 
UIImage *image = [UIImage imageWithCGImage:imageRef];

//  清除
CGColorSpaceRelease(colorSpace ); 
CGContextRelease(context); 
CFRelease(imageRef);

新版本

let image = renderer.image { context in
    let bounds = context.format.bounds
    for amount in stride(from: 1.0 as CGFloat, to: 0.0, by: -0.1) {
        let color = UIColor(hue: amount, saturation: 1.0, 
            brightness: 1.0, alpha: 1.0)
        let rects = bounds.divided(
            atDistance: amount * bounds.size.width, from: .maxXEdge)
        color.set(); UIRectFill(rects.0)
    }
}

以及

public func imageExample(size: CGSize) -> UIImage? {
    let bounds = CGRect(origin: .zero, size: size)
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let (width, height) = (Int(size.width), Int(size.height))

    // 創建 CG ARGB 上下文
    guard let context = CGContext(data: nil, width: width, 
        height: height, bitsPerComponent: 8, 
        bytesPerRow: width * 4, space: colorSpace, 
        bitmapInfo: CGImageAlphaInfo.premultipliedFirst.rawValue) 
        else { return nil }

    // 為 UIKit 準備 CG 上下文 
    UIGraphicsPushContext(context); defer { UIGraphicsPopContext() }

    // 使用 UIKit 調用繪制上下文
    UIColor.blue.set(); UIRectFill(bounds)
    let oval = UIBezierPath(ovalIn: bounds)
    UIColor.red.set(); oval.fill()

    // 從上下文中提取圖像
    guard let imageRef = context.makeImage() else { return nil }
    return UIImage(cgImage: imageRef)
}

以及

extension UIImage {
    public func grayscaled() -> UIImage? {
        guard let cgImage = cgImage else { return nil }
        let colorSpace = CGColorSpaceCreateDeviceGray()
        let (width, height) = (Int(size.width), Int(size.height))

        // 構建上下文：每個像素一個字節，無alpha
        guard let context = CGContext(data: nil, width: width, 
            height: height, bitsPerComponent: 8, 
            bytesPerRow: width, space: colorSpace, 
            bitmapInfo: CGImageAlphaInfo.none.rawValue) 
            else { return nil }

        // 繪制上下文
        let destination = CGRect(origin: .zero, size: size)
        context.draw(cgImage, in: destination)

        // 返回灰度圖片
        guard let imageRef = context.makeImage() 
            else { return nil }
        return UIImage(cgImage: imageRef)
    }
}

好吧，我承認 bitmapInfo 還是有些別扭，但是其他還是很不錯的，不是嗎？

• 取消了 UIGraphicsBeginImageContext() UIGraphicsEndImageContext() 這些成員，與上下文引用對象實現脫離。為什么之前不這樣做呢？
• 我十分喜歡 Swift 的構造函數。現在在創建尺寸對象 CGRect 的時候，更加簡潔。
• 如果你想用 Core Graphics ，Swift 也是可以的：在很多時候也需要原先的上下文操作（例如設備灰色空間）并且仍然支持一些低耗能、 Core Image 和其他一些強勁的框架。
• 在繪圖時，push context 和 pop context 操作要對應出現。我一般喜歡用 defer 關鍵字來讓清除和配置部分的邏輯在同一時刻。（我需要擴展 Swift 的引用類型來引入 deinit ！）
• Swift 可以進行內存管理操作。
• Swift 的可選關鍵字和錯誤處理可以在異常處理中變的更加優雅。
• 如你期望的，PDF 繪圖與圖像繪制一樣簡單。
• CG 中的一些冷門的方法（例如對于 CGRect 的劃分方法 divided(atDistance:, from:) 以及上下文的 draw 和 makeImage 方法）也顯得好用一些。

當然，我只是在完成了 Swift 風格的初步探索。你們是否也對 iOS 的繪圖部分感興趣呢？或者讓我們一起討論其他有趣的話題。

來自：http://swift.gg/2017/01/03/the-joys-of-ios-10-uikit-drawing/