[Xcode10 實際操作]九、實用進階-(17)使用CGBlendMode改變UIImage顏色,實現對圖片進行混合著色
阿新 • • 發佈:2018-12-09
本文將演示如何使用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 }
觀察原始影象分別和三個色彩混合影象之間的區別。