[Xcode 實際操做]9、實用進階-(17)使用CGBlendMode改變UIImage顏色，實現對圖片進行混合着色

目錄：[Swift]Xcode實際操做

本文將演示如何使用CGBlendMode改變UIImage顏色，實現對圖片進行混合着色。

在項目文件夾【DemoApp】上點擊鼠標右鍵

->【New File】建立一個擴展文件->模板選擇窗口：【Swift File】->【Next】

->【Save As】:ExtensionUIImage.swift->保存默認的存儲位置點擊【Create】

在【ExtensionUIImage.swift】添加一個針對UIImage類的擴展。

擴展能夠向一個已有的類、結構體或枚舉類型添加新功能，

包括在沒有獲取源代碼的狀況下，對類型進行功能擴展。

點擊編輯代碼文件【ExtensionUIImage.swift】

 1 import UIKit
 2 
 3 extension UIImage
 4 {
 5     //添加一個擴展方法，包括的參數：
 6     //1.混合顏色
 7     //2.混合模式
 8     //並返回一個渲染後的圖片
 9     func blendColor(_ color: UIColor, blendMode: CGBlendMode) -> UIImage
10     {
11         //建立一個位置在(0,0),尺寸與原始圖片相同的顯示區域
12         let rect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
13         
14         //建立一個基於位圖的圖形上下文，
15         //並分別設置上下文的尺寸、是否支持不透明度、以及縮放比例等信息。
16         //若是縮放比例爲0，則按屏幕寬高比進行縮放。
17         UIGraphicsBeginImageContextWithOptions(size, false, scale)
18         //在上文中，設置填充顏色
19         color.setFill()
20         //使用填充顏色，填充目標區域
21         UIRectFill(rect)
22         //將源圖片，以徹底不透明的方式，寫入目標區域，
23         //並使用指定的混合模式
24         draw(in: rect, blendMode: blendMode, alpha: 1.0)
25         
26         //從上下文中，得到最後薰染的圖片
27         let blendedImage = UIGraphicsGetImageFromCurrentImageContext()
28         //關閉圖形上下文環境，及時釋放資源
29         UIGraphicsEndImageContext()
30         
31         //返回最終渲染結果
32         return blendedImage!
33     }
34 }

在項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

如今調用上文的擴展方法，實現對圖片進行混合着色的功能。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4 
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         // Do any additional setup after loading the view, typically from a nib.
 8         
 9         //建立一個圖像視圖，並設置其位置在(128,80),尺寸爲(64,64).
10         //這個圖像視圖，將用來顯示圖片的原始效果。
11         let originalImage = UIImageView(frame: CGRect(x: 128, y: 80, width: 64, height: 64))
12         //從資源文件夾中，加載一張圖片，並賦予圖像視圖。
13         originalImage.image = UIImage(named: "star")
14         //將圖像視圖，添加到當前視圖控制器的根視圖
15         self.view.addSubview(originalImage)
16         
17         //建立第二個圖像視圖，並設置其位置在(128,80),尺寸爲(64,64).
18         //這個圖像視圖，將用來顯示與黃色進行混合後的圖片
19         let brownOne = UIImageView(frame: CGRect(x: 128, y: 180, width: 64, height: 64))
20         //調用擴展方法，得到圖像與黃色進行混合後的圖像，
21         //混合模式爲目標模式，即結果等於目標色與原色透明度的合成。
22         brownOne.image = UIImage(named: "star")?.blendColor(UIColor.yellow, blendMode: CGBlendMode.destinationIn)
23         //將第二個圖像視圖，添加到當前視圖控制器的根視圖。
24         self.view.addSubview(brownOne)
25         
26         //建立第三個視圖
27         let redOne = UIImageView(frame: CGRect(x: 128, y: 280, width: 64, height: 64))
28         //調用擴展方法，得到圖像與紅色進行混合後的圖像，
29         //混合模式爲目標模式，即結果等於目標色與原色透明度的合成。
30         redOne.image = UIImage(named: "star")?.blendColor(UIColor.red, blendMode: CGBlendMode.destinationIn)
31         //將第三個圖像視圖，添加到當前視圖控制器的根視圖。
32         self.view.addSubview(redOne)
33         
34         //建立第四個視圖
35         let greenOne = UIImageView(frame: CGRect(x: 128, y: 380, width: 64, height: 64))
36         //調用擴展方法，得到圖像與綠色進行混合後的圖像，
37         //混合模式爲目標模式，即結果等於目標色與原色透明度的合成。
38         greenOne.image = UIImage(named: "star")?.blendColor(UIColor.green, blendMode: CGBlendMode.destinationIn)
39         //將第四個圖像視圖，添加到當前視圖控制器的根視圖。
40         self.view.addSubview(greenOne)
41     }
42     
43     override func didReceiveMemoryWarning() {
44         super.didReceiveMemoryWarning()
45         // Dispose of any resources that can be recreated.
46     }
47 }

觀察原始圖像分別和三個色彩混合圖像之間的區別。