Quartz 2D编程指南 （十四） —— 位图图像和图像蒙版（二）

版本记录

版本号	时间
V1.0	2018.09.08

前言

Quartz 2D框架相信大家都知道，也都一直在使用。Quartz 2D的API是纯C语言的，它是一个二维绘图引擎，同时支持iOS和Mac系统。Quartz 2D的API来自于Core Graphics框架，数据类型和函数基本都以CG作为前缀，接下来几篇我们就一起来看一下这个框架。感兴趣可以看上面几篇文章。
1. Quartz 2D编程指南 （一） —— 简介（一）
2. Quartz 2D编程指南 （二） —— Quartz 2D概览（二）
3. Quartz 2D编程指南 （三） —— 图形上下文（三）
4. Quartz 2D编程指南 （四） —— Paths路径（一）
5. Quartz 2D编程指南 （五） —— Paths路径（二）
6. Quartz 2D编程指南 （六） —— 颜色和颜色空间（一）
7. Quartz 2D编程指南 （七） —— 变换（一）
8. Quartz 2D编程指南 （八） —— Patterns图案样式（一）
9. Quartz 2D编程指南 （九） —— 阴影（一）
10. Quartz 2D编程指南 （十） —— 渐变（一）
11. Quartz 2D编程指南 （十一） —— 透明层（一）
12. Quartz 2D编程指南 （十二） —— Quartz 2D中的数据管理（一）
13. Quartz 2D编程指南 （十三） —— 位图图像和图像蒙版（一）

Using Blend Modes with Images - 使用混合模式与图像

您可以使用Quartz 2D混合模式（请参阅Setting Blend Modes）来合成两个图像，或者将图像合成到已经绘制到图形上下文的任何内容上。 本节讨论在背景图上合成图像。

在背景上合成图像的一般过程如下：

• 1） 画背景。
• 2） 通过使用其中一个混合模式常量调用函数CGContextSetBlendMode来设置混合模式。 （混合模式基于PDF Reference, Fourth Edition, Version 1.5, Adobe Systems, Inc.）
• 3） 通过调用CGContextDrawImage函数绘制要在背景上合成的图像。

此代码片段使用“darken”混合模式在背景上合成一个图像：

CGContextSetBlendMode (myContext, kCGBlendModeDarken);
CGContextDrawImage (myContext, myRect, myImage2);

本节的其余部分使用Quartz中可用的每种混合模式在背景上绘制图11-17右侧所示的图像，该背景由图左侧显示的绘制矩形组成。 在所有情况下，矩形首先被绘制到图形上下文。 然后，通过调用函数CGContextSetBlendMode设置混合模式，传递适当的混合模式常量。 最后，跳跃者的图像被绘制到图形上下文中。

Figure 11-17 Background drawing (left) and foreground image (right)

1. Normal Blend Mode - 正常混合模式

正常混合模式在背景图像样本上绘制源图像样本。 普通混合模式是Quartz中的默认混合模式。 如果您当前正在使用其他混合模式并且想要切换到普通混合模式，则只需要显式设置正常混合模式。 您可以通过将常量kCGBlendModeNormal传递给函数CGContextSetBlendMode或通过使用函数CGContextRestoreGState恢复图形状态（假设先前的图形状态使用正常混合模式）来设置正常混合模式。

图11-18显示了使用普通混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。 在此示例中，使用alpha值1.0绘制图像，因此背景完全被图像遮挡。

Figure 11-18 Drawing an image over a background using normal blend mode

2. Multiply Blend Mode - 乘法混合模式

乘法混合模式将源图像样本与背景图像样本相乘。 所得图像中的颜色至少与两种样本颜色中的任何一种颜色一样深。

通过将常量kCGBlendModeMultiply传递给函数CGContextSetBlendMode来指定乘法混合模式。图11-19显示了使用乘法混合模式在同一图中所示的矩形上绘制图11-17所示的图像的结果。

Figure 11-19 Drawing an image over a background using multiply blend mode

3. Screen Blend Mode - 屏幕混合模式

屏幕混合模式将源图像样本的倒数与背景图像样本的倒数相乘，以获得至少与两个样本颜色中的任一个一样轻的颜色。

您可以通过将常量kCGBlendModeScreen传递给函数CGContextSetBlendMode来指定屏幕混合模式。 图11-20显示了使用屏幕混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-20 Drawing an image over a background using screen blend mode

4. Overlay Blend Mode - 叠加混合模式

叠加混合模式将源图像样本与背景图像样本相乘或screens，具体取决于背景样本的颜色。 结果是覆盖现有图像样本，同时保留背景的高光和阴影。 背景颜色与源图像混合以反映背景的亮度或暗度。

您可以通过将常量kCGBlendModeOverlay传递给函数CGContextSetBlendMode来指定叠加混合模式。 图11-21显示了使用叠加混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-21 Drawing an image over a background using overlay blend mode

5. Darken Blend Mode - 变暗混合模式

变暗混合模式通过从源图像或背景中选择较暗的样本来创建合成图像样本。 比背景图像样本更暗的源图像样本替换相应的背景样本。

您可以通过将常量kCGBlendModeDarken传递给函数CGContextSetBlendMode来指定变暗混合模式。 图11-22显示了使用变暗混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-22 Drawing an image over a background using darken blend mode

6. Lighten Blend Mode - 变浅混合模式

通过从源图像或背景中选择较亮的样本，“变浅混合”模式可创建合成图像样本。 比背景图像样本轻的源图像样本替换相应的背景样本。

您可以通过将常量kCGBlendModeLighten传递给函数CGContextSetBlendMode来指定lighten blend模式。 图11-23显示了使用淡化混合模式在同一图中所示的矩形上绘制图11-17中所示的图像的结果。

Figure 11-23 Drawing an image over a background using lighten blend mode

7. Color Dodge Blend Mode - 颜色Dodge混合模式

颜色Dodge混合模式增亮背景图像样本以反映源图像样本。 指定黑色的源图像样本值保持不变。

您可以通过将常量kCGBlendModeColorDodge传递给函数CGContextSetBlendMode来指定颜色dodge混合模式。 图11-24显示了使用颜色Dodge混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-24 Drawing an image over a background using color dodge blend mode

8. Color Burn Blend Mode - 彩色混合模式

彩色燃烧混合模式使背景图像样本变暗以反映源图像样本。 指定白色的源图像样本值保持不变。

您可以通过将常量kCGBlendModeColorBurn传递给函数CGContextSetBlendMode来指定颜色混合模式。 图11-25显示了使用彩色混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-25 Drawing an image over a background using color burn blend mode

9. Soft Light Blend Mode - 柔光混合模式

柔和光线混合模式可以使颜色变暗或变亮，具体取决于源图像样本颜色。 如果源图像样本颜色浅于50％灰色，则背景变亮，类似于dodging。 如果源图像样本颜色深于50％灰色，则背景变暗，类似于burning。 如果源图像样本颜色等于50％灰色，则背景不会改变。

等于纯黑色或纯白色的图像样本会产生较暗或较亮的区域，但不会产生纯黑色或白色。 整体效果类似于通过在源图像上照射漫反射聚光灯而实现的效果。

您可以通过将常量kCGBlendModeSoftLight传递给函数CGContextSetBlendMode来指定柔光混合模式。 图11-26显示了使用柔光混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-26 Drawing an image over a background using soft light blend mode

10. Hard Light Blend Mode - 硬光混合模式

硬光混合模式可以倍增或屏幕颜色，具体取决于源图像样本颜色。 如果源图像样本颜色浅于50％灰色，则背景会变亮，类似于screening。 如果源图像样本颜色深于50％灰色，则背景变暗，类似于multiplying。 如果源图像样本颜色等于50％灰色，则源图像不会更改。 等于纯黑色或纯白色的图像样本产生纯黑色或白色。 整体效果类似于通过在源图像上发出刺眼的聚光灯而实现的效果。

您可以通过将常量kCGBlendModeHardLight传递给函数CGContextSetBlendMode来指定硬光混合模式。 图11-27显示了使用硬光混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-27 Drawing an image over a background using hard light blend mode

11. Difference Blend Mode - 差异混合模式

差异混合模式从背景图像样本颜色中减去源图像样本颜色，或者相反，取决于哪个样本具有更大的亮度值。 黑色的源图像样本值不会产生任何变化；白色反转背景颜色值。

您可以通过将常量kCGBlendModeDifference传递给函数CGContextSetBlendMode来指定差异混合模式。 图11-28显示了使用差异混合模式在同一图中显示的矩形上绘制图11-17所示图像的结果。

Figure 11-28 Drawing an image over a background using difference blend mode

12. Exclusion Blend Mode - 排除混合模式

排除混合模式生成差异混合模式的低对比度版本。 黑色的源图像样本值不会产生变化；白色反转背景颜色值。

您可以通过将常量kCGBlendModeExclusion传递给函数CGContextSetBlendMode来指定排除混合模式。 图11-29显示了使用排除混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-29 Drawing an image over a background using exclusion blend mode

13. Hue Blend Mode - 色调混合模式

色调混合模式使用背景的亮度和饱和度值以及源图像的色调。 您可以通过将常量kCGBlendModeHue传递给函数CGContextSetBlendMode来指定色调混合模式。 图11-30显示了使用色调混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-30 Drawing an image over a background using hue blend mode

14. Saturation Blend Mode - 饱和度混合模式

饱和度混合模式使用背景的亮度和色调值以及源图像的饱和度。 纯灰色区域不会产生变化。 您可以通过将常量kCGBlendModeSaturation传递给函数CGContextSetBlendMode来指定饱和度混合模式。 图11-31显示了使用饱和度混合模式在同一图中所示的矩形上绘制图11-17中所示的图像的结果。

Figure 11-31 Drawing an image over a background using saturation blend mode

15. Color Blend Mode - 颜色混合模式

颜色混合模式使用背景的亮度值和源图像的色调和饱和度值。 此模式保留图像中的灰度级。 您可以通过将常量kCGBlendModeColor传递给函数CGContextSetBlendMode来指定颜色混合模式。 图11-32显示了使用颜色混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-32 Drawing an image over a background using color blend mode

16. Luminosity Blend Mode - 亮度混合模式

亮度混合模式使用背景的色调和饱和度以及源图像的亮度来创建与颜色混合模式创建的效果相反的效果。

您可以通过将常量kCGBlendModeLuminosity传递给函数CGContextSetBlendMode来指定光度混合模式。 图11-33显示了使用光度混合模式在同一图中所示的矩形上绘制图11-17所示图像的结果。

Figure 11-33 Drawing an image over a background using luminosity blend mode

后记

本篇主要讲述了位图图像和图像蒙版，感兴趣的给个赞或者关注~~~