zoukankan      html  css  js  c++  java
  • [Xcode 实际操作]九、实用进阶-(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,  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,  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,  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,  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,  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 }

    观察原始图像分别和三个色彩混合图像之间的区别。

  • 相关阅读:
    11 Vue3 UI Framework Card 组件
    12 Vue3 UI Framework 打包发布
    15 Vue3 UI Framework 完工部署
    【译】使用 Visual Studio 调试外部源代码
    IntelliJ JSP 格式化问题
    JSP 学习笔记 | 五、MVC模式和三层架构 & JSP 案例实战
    JSP使用MySQL数据库报错java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
    通过Navicate for MySQL导入SQL文件
    MAVEN 配置和基本使用
    JSP 学习笔记 | 二、JSP 脚本 & 案例实现 & 缺点分析
  • 原文地址:https://www.cnblogs.com/strengthen/p/10090339.html
Copyright © 2011-2022 走看看