iOS中使用blend改變圖片顏色

最近對Core Animation和Core Graphics的內容東西比較感興趣，自己之前也在這塊相對薄弱，趁此機會也想補習一下這塊的內容，所以之后幾篇可能都會是對CA和CG學習的記錄的文章。

在應用里一個很常見的需求是主題變換：同樣的圖標，同樣的素材，但是需要按照用戶喜愛變為不同的顏色。在iOS5和6的SDK里部分標準控件引入了tintColor，來滿足個性化界面的需求，但是Apple在這方面還遠遠做的不夠。一是現在用默認控件根本難以做出界面優秀的應用，二是tintColor所覆蓋的并不夠全面，在很多情況下開發者都無法使用其來完成個性化定義。解決辦法是什么？最簡單當然是拜托設計師大大出圖，想要藍色主題？那好，開PS蓋個藍色圖層出一套藍色的UI；又想加粉色UI，那好，再出一套粉色的圖然后導入Xcode。代碼上的話根據顏色需求使用image-blue或者image-pink這樣的名字來加載圖片。

如果有一丁點重構的意識，就會知道這不是一個很好的解決方案。工程中存在大量的冗余和重復（就算你要狡辯這些圖片顏色不同不算重復，你也會在內心里知道這種狡辯是多么無力），這是非常致命的。想象一下如果你有10套主題界面，先不論應用的體積會膨脹到多少，光是想做一點修改就會痛苦萬分，比如希望改一下某個按鈕的形狀，很好，設計師大大請重復地修改10遍，并出10套UI，然后一系列的重命名，文件移動和導入…一場災難。

當然有其他辦法，因為說白了就是tint不同的顏色到圖片上而已，如果我們能實現改變UIImage的顏色，那我們就只需要一套UI，然后用代碼來改變UI的顏色就可以了，生活有木有一下光明起來呀。嗯，讓我們先從一張圖片開始吧～下面是一張帶有alpha通道的圖片，原始顏色是純的灰色（當然什么顏色都可以，只不過我這個人現在暫時比較喜歡灰色而已）。

我們將用blending給這張圖片加上另一個純色作為tint，并保持原來的alpha通道。用Core Graphics來做的話，大概的想法很直接：

最麻煩的部分可能就是保持alpha通道了。UIImage的文檔中提供了使用blend繪圖的方法drawInRect:blendMode:alpha:，rect和alpha都沒什么問題，但是blendMode是個啥玩意兒啊…繼續看文檔，關于CGBlendMode的文檔，里面有一大堆看不懂的枚舉值，比如這樣：

kCGBlendModeDestinationOverR = S*(1 - Da) + DAvailable in iOS 2.0 and later.Declared in CGContext.h.
完全不懂..直接看之后的Discussion部分：
The blend mode constants introduced in OS X v10.5 rePResent the Porter-Duff blend modes. The symbols in the equations for these blend modes are:R is the premultiplied resultS is the source color, and includes alphaD is the destination color, and includes alphaRa, Sa, and Da are the alpha components of R, S, and D
原來如此，R表示結果，S表示包含alpha的原色，D表示包含alpha的目標色，Ra，Sa和Da分別是三個的alpha。明白了這些以后，就可以開始尋找我們所需要的blend模式了。相信你可以和我一樣，很快找到這個模式：
kCGBlendModeDestinationInR = D*SaAvailable in iOS 2.0 and later.Declared in CGContext.h.
結果 = 目標色和原色透明度的加成，看起來正式所需要的。啦啦啦，還等什么呢，開始動手實現看看對不對吧～
為了以后使用方便，當然是祭出Category，先創建一個UIImage的類別：
//  UIImage+Tint.h#import <UIKit/UIKit.h>@interface UIImage (Tint)- (UIImage *) imageWithTintColor:(UIColor *)tintColor;@end
暫時先這樣，當然我們也可以創建一個類方法直接完成從bundle讀取圖片然后加tintColor，但是很多時候并不如上面一個實例方法方便（比如想要從非bundle的地方獲取圖片），這個問題之后再說。那么就按照之前設想的步驟來實現吧：
//  UIImage+Tint.m#import "UIImage+Tint.h"@implementation UIImage (Tint)- (UIImage *) imageWithTintColor:(UIColor *)tintColor{    //We want to keep alpha, set opaque to NO; Use 0.0f for scale to use the scale factor of the device’s main screen.    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);    [tintColor setFill];    CGRect bounds = CGRectMake(0, 0, self.size.width, self.size.height);    UIRectFill(bounds);    //Draw the tinted image in context    [self drawInRect:bounds blendMode:kCGBlendModeDestinationIn alpha:1.0f];    UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return tintedImage;}@end
簡單明了，沒有任何難點。測試之：[[UIImage imageNamed:@"image"] imageWithTintColor:[UIColor orangeColor]];，得到的結果為：
嗯...怎么說呢，雖然tintColor的顏色是變了，但是總覺得怪怪的。仔細對比一下就會發現，原來灰色圖里星星和周圍的灰度漸變到了橙色的圖里好像都消失了：星星整個變成了橙色，周圍的一圈漂亮的光暈也沒有了，這是神馬情況啊…這種圖能交差的話那算見鬼了，會被設計和產品打死的吧。對于無漸變的純色圖的圖來說直接用上面的方法是沒問題的，但是現在除了Metro的大色塊以外哪里無灰度漸變的設計啊…檢查一下使用的blend，R = D * Sa，恍然大悟，我們雖然保留了原色的透明度，但是卻把它的所有的灰度信息弄丟了。怎么辦？繼續刨CGBlendMode的文檔吧，那么多blend模式應該總有我們需要的。功夫不負有心人，kCGBlendModeOverlay一副嗷嗷待選的樣子：
kCGBlendModeOverlayEither multiplies or screens the source image samples with the background image samples, depending on the background color. The result is to overlay the existing image samples while preserving the highlights and shadows of the background. The background color mixes with the source image to reflect the lightness or darkness of the background.Available in iOS 2.0 and later.Declared in CGContext.h.
kCGBlendModeOverlay可以保持背景色的明暗，也就是灰度信息，聽起來正是我們需要的。加入到聲明中，并且添加相應的實現( 順便重構一下原來的代碼 :) )：
//  UIImage+Tint.h#import <UIKit/UIKit.h>@interface UIImage (Tint)- (UIImage *) imageWithTintColor:(UIColor *)tintColor;- (UIImage *) imageWithGradientTintColor:(UIColor *)tintColor;@end
//  UIImage+Tint.m#import "UIImage+Tint.h"@implementation UIImage (Tint)- (UIImage *) imageWithTintColor:(UIColor *)tintColor{    return [self imageWithTintColor:tintColor blendMode:kCGBlendModeDestinationIn];}- (UIImage *) imageWithGradientTintColor:(UIColor *)tintColor{    return [self imageWithTintColor:tintColor blendMode:kCGBlendModeOverlay];}- (UIImage *) imageWithTintColor:(UIColor *)tintColor blendMode:(CGBlendMode)blendMode{    //We want to keep alpha, set opaque to NO; Use 0.0f for scale to use the scale factor of the device’s main screen.    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);    [tintColor setFill];    CGRect bounds = CGRectMake(0, 0, self.size.width, self.size.height);    UIRectFill(bounds);    //Draw the tinted image in context    [self drawInRect:bounds blendMode:blendMode alpha:1.0f];    UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return tintedImage;}@end
完成，測試之…好吧，好尷尬，雖然顏色和周圍的光這次對了，但是透明度又沒了啊魂淡..一點不奇怪啊，因為kCGBlendModeOverlay本來就沒承諾給你保留原圖的透明度的說。
那么..既然我們用kCGBlendModeOverlay能保留灰度信息，用kCGBlendModeDestinationIn能保留透明度信息，那就兩個blendMode都用不就完事兒了么～嘗試之，如果在blend繪圖時不是kCGBlendModeDestinationIn模式的話，則再用kCGBlendModeDestinationIn畫一次：
//  UIImage+Tint.m#import "UIImage+Tint.h"@implementation UIImage (Tint)- (UIImage *) imageWithTintColor:(UIColor *)tintColor{    return [self imageWithTintColor:tintColor blendMode:kCGBlendModeDestinationIn];}- (UIImage *) imageWithGradientTintColor:(UIColor *)tintColor{    return [self imageWithTintColor:tintColor blendMode:kCGBlendModeOverlay];}- (UIImage *) imageWithTintColor:(UIColor *)tintColor blendMode:(CGBlendMode)blendMode{    //We want to keep alpha, set opaque to NO; Use 0.0f for scale to use the scale factor of the device’s main screen.    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);    [tintColor setFill];    CGRect bounds = CGRectMake(0, 0, self.size.width, self.size.height);    UIRectFill(bounds);    //Draw the tinted image in context    [self drawInRect:bounds blendMode:blendMode alpha:1.0f];    if (blendMode != kCGBlendModeDestinationIn) {        [self drawInRect:bounds blendMode:kCGBlendModeDestinationIn alpha:1.0f];    }    UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return tintedImage;}@end
結果如下：
已經很完美了，這樣的話只要在代碼里設定一下顏色，我們就能夠很輕易地使用同樣一套UI，將其blend為需要的顏色，來實現素材的重用了。唯一需要注意的是，因為每次使用UIImage+Tint的方法繪圖時，都使用了CG的繪制方法，這就意味著每次調用都會是用到CPU的Offscreen drawing，大量使用的話可能導致性能的問題（主要對于iPhone 3GS或之前的設備，可能同時處理大量這樣的繪制調用的能力會有不足）。關于CA和CG的性能的問題，打算在之后用一篇文章來介紹一下。對于這里的UIImage+Tint的實現，可以寫一套緩存的機制，來確保大量重復的元素只在load的時候blend一次，之后將其緩存在內存中以快速讀取。當然這是一個權衡的問題，在時間和空間中做出正確的平衡和選擇，也正是程序設計的樂趣所在。
這篇文章中作為示例的工程和UIImage+Tint可以在Github上找到，您可以隨意玩弄..我相信也會是個來研究每種blend的特性的好機會～