Quartz 2D 编程指南十一:位图和图像遮罩(2)

Creating an Image From Part of a Larger Image

The function CGImageCreateWithImageInRect
lets you create a subimage from an existing Quartz image. Figure 11-3 illustrates extracting an image that contains the letter “A” from a larger image by supplying a rectangle that specifies the location of the letter “A”.

我们可以使用CGImageCreateWithImageInRect函数从一个大图像中创建一个图像。图11-3演示了这一情形。

Figure 11-3 A subimage created from a larger image

A subimage created from a larger image

The image returned by the function CGImageCreateWithImageInRect retains a reference to the original image, which means you can release the original image after calling this function.

函数CGImageCreateWithImageInRect返回的图像保留了源图像的一个引用,这意味着我们在调用完这个函数后可以释放源图像。

Figure 11-4 shows another example of extracting a portion of an image to create another image. In this case, the rooster’s head is extracted from the larger image, and then drawn to a rectangle that’s larger than the subimage, effectively zooming in on the image.

图11-4是另外一个例子。在这种情况下,公鸡的头部从大图中被提取出来,然后绘制在一个大于子图像的矩形中。

Listing 11-1 shows code that creates and then draws the subimage. The rectangle that the function CGContextDrawImage draws the rooster’s head to has dimensions that are twice the dimensions of the extracted subimage. The listing is a code fragment. You’d need to declare the appropriate variables, create the rooster image, and dispose of the rooster image and the rooster head subimage. Because the code is a fragment, it does not show how to create the graphics context that the image is drawn to. You can use any flavor of graphics context that you’d like. For examples of how to create a graphics context, see Graphics Contexts.

代码清单11-1显示了创建并绘制子图像的过程。CGContextDrawImage函数绘制公鸡头部的矩形区域是多提取的自图像大小的四倍。清单中的只是一个代码片段。我们需要声明合适的变量来创建公鸡头像,并部署公鸡图像及公鸡头部子图像。因为只是代码片段,所以没有演示如何创建一个图形上下文。我们可以使用任何我们喜欢的图形上下文。创建图形上下文的例子可以参阅“图形上下文”一章。

Figure 11-4 An image, a subimage taken from it and drawn so it’s enlarged

An image, a subimage taken from it and drawn so it’s enlarged

Listing 11-1 Code that creates a subimage and draws it enlarged

myImageArea = CGRectMake (rooster_head_x_origin, rooster_head_y_origin,myWidth, myHeight);
mySubimage = CGImageCreateWithImageInRect (myRoosterImage, myImageArea);
myRect = CGRectMake(0, 0, myWidth*2, myHeight*2);
CGContextDrawImage(context, myRect, mySubimage);

Creating an Image from a Bitmap Graphics Context
To create an image from an existing bitmap graphics context, you call the function CGBitmapContextCreateImage
as follows:

为了从已存在的位图图形上下文中创建一个图像,我们可以调用函数CGBitmapContextCreateImage,如下:

CGImageRef myImage;
myImage = CGBitmapContextCreateImage (myBitmapContext);

The CGImage object returned by the function is created by a copy operation. Therefore any subsequent changes you make to the bitmap graphics context do not affect the contents of the returned CGImage object. In some cases the copy operation actually follows copy-on-write semantics, so that the actual physical copy of the bits occurs only if the underlying data in the bitmap graphics context is modified. You may want to use the resulting image and release it before you perform additional drawing into the bitmap graphics context so that you can avoid the actual physical copy of the data.

这个函数返回的CGImage对象时通过一个拷贝操作创建的。因此我们对位图图形上下文所做的修改不会影响到已返回的CGImage对象。在一些情况下,这个拷贝操作实际上沿用了copy-on-write语义,即只有当位图图形上下文中的数据被修改时才会去实际拷贝这些数据。我们可能需要在绘制额外数据到位图图形上下文之前使用结果数据或者释放它们,以便我们可以避免实际去拷贝这些数据。

For an example that shows how to create a bitmap graphics context, seeCreating a Bitmap Graphics Context.

Creating an Image Mask 创建图像遮罩

A Quartz bitmap image mask is used the same way an artist uses a silkscreen. A bitmap image mask determines how color is transferred, not which colors are used. Each sample value in the image mask specifies the amount that the current fill color is masked at a specific location. The sample value specifies the opacity of the mask. Larger values represent greater opacity and specify locations where Quartz paints less color. You can think of the sample value as an inverse alpha value. A value of 1
is transparent and 0 is opaque.

一个Quartz位图图像遮罩如同艺术家使用丝网印刷品(skillscreen)一样。一个位图图形遮罩定义了如何转换颜色,而不是使用哪些颜色。图像遮罩中的每个采样值指定了在特定位置中,当前填充颜色值被遮罩的数量。采样值指定了遮罩的不透明度。值越大,表示越不透明,Quartz在指定位置绘制的颜色越少。我们可以将采样值当成alpha值得反转。1表示透明的,而0表示不透明。

Image masks are 1, 2, 4, or 8 bits per component. For a 1-bit mask, a sample value of 1 specifies sections of the mask that block the current fill color. A sample value of 0 specifies sections of the mask that show the current fill color of the graphics state when the mask is painted. You can think of a 1-bit mask as black and white; samples either completely block paint or completely allow paint.

图像遮罩的每个分量可能是1,2,4或者8位。对弈1-bit的遮罩,采样值1指定遮罩的区域掩盖了当前的填充颜色。值为0表示当绘制遮罩时,显示单钱的填充颜色。我们可以将1-bit遮罩当成黑色和白色;要么完全遮挡,要么完全显示。

Image masks that have 2, 4, or 8 bits per component represent grayscale values. Each component maps to a range of 0 to 1 using the following formula:

每个分量中有2,4,8位的遮罩代表灰度值。每个分量使用一下公式将值映射到[0,1]之间的值:

One over two to the bits per component minus one.

For example, a 4-bit mask has values that range from 0 to 1
in increments of 1/15. Component values that are 0 or 1
represent the extremes—completely block paint and completely allow paint. Values between 0 and 1 allow partial painting using the formula 1 – MaskSampleValue. For example, if the sample value of an 8-bit mask scales to 0.7, color is painted as if it had an alpha value of (1 – 0.7), which is 0.3.

例如,一个4-bit的遮罩其值位于[0,1]之间,且增长的步长为1/15。0和1这两个值分别是最小值和最大值,分别表示完全遮盖或完全透明。0和1之间的值使用(1-MaskSampleValue)这个公式来处理局部绘制。例如,如果一个8-bit遮罩的采样值为0.7,则那些alpha值为(1-0.7),即0.3的颜色将会被绘制。

The function CGImageMaskCreate creates a Quartz image mask from bitmap image information that you supply and that is discussed in Bitmap Image Information. The information you supply to create an image mask is the same as what you supply to create an image, except that you do not supply color space information, a bitmap information constant, or a rendering intent, as you can see by looking at the function prototype in Listing 11-2.

函数CGImageMaskCreate从我们提供的位图图像信息中创建一个Quartz图像遮罩。我们提供额信息与创建图像所提供的信息是一样的,只是不需要提供颜色空间信息,位图信息常量或渲染意图,我们可以从代码清单11-2中看到这个函数原型:

Listing 11-2 The prototype for the function

CGImageMaskCreate
CGImageRef CGImageMaskCreate (
size_t width,
size_t height,
size_t bitsPerComponent,
size_t bitsPerPixel,
size_t bytesPerRow,
CGDataProviderRef provider,
const CGFloat decode[],
bool shouldInterpolate
);

Masking Images 遮罩图像

Masking techniques can produce many interesting effects by controlling which parts of an image are painted. You can:

  • Apply an image mask to an image. You can also use an image as a mask to achieve an effect that’s opposite from applying an image mask.
  • Use color to mask parts of an image, which includes the technique referred to as chroma key masking.
  • Clip a graphics context to an image or image mask, which effectively masks an image (or any kind of drawing) when Quartz draws the content to the clipped context.

遮罩技术可以让我们控制图像的绘制区域来生成很多有趣的效果,我们可以:

  • 在一个图像上使用图像遮罩。我们可以把一个图像作为这招图,以获取同使用图像遮罩相反的效果。
  • 使用颜色来遮罩图像的一部分,其中包含被称为颜色遮罩的技术
  • 将图形上下文剪切到一个图像或图像遮罩,当Quartz绘制内容到剪切的图形上下文时来遮罩一个图像。
Masking an Image with an Image Mask

The function CGImageCreateWithMask returns the image that’s created by applying an image mask to an image. This function takes two parameters:

  • The image you want to apply the mask to. This image can’t be an image mask or have a masking color (see Masking an Image with Color) associated with it.
  • An image mask created by calling the function CGImageMaskCreate. It’s possible to provide an image instead of an image mask, but that gives a much different result. See Masking an Image with an Image.

函数CGImageCreateWithMask通过将图像遮罩使用到一个图像上的方式来创建一个图像。这个函数带有两个参数:

  • 原始图像,遮罩将用于其上。这个图像不能是图像遮罩,也不能有与之相关的遮罩颜色。
  • 一个图像遮罩,通过调动CGImageMaskCreate函数创建的。也可以提供一个图像来替代图像遮罩,但这将给出非常不同的结果。这将在下面描述。

Source samples of an image mask act as an inverse alpha value. An image mask sample value (S):Equal to 1 blocks painting the corresponding image sample.

  • Equal to 0 allows painting the corresponding image sample at full coverage.
  • Greater than 0 and less 1 allows painting the corresponding image sample with an alpha value of (1 – S).

图像遮罩的采样如同一个反转的alpha值。一个图像遮罩采样值(s):

  • 为1时,则不会绘制对应的图像样本。
  • 为0时,则允许完全绘制对应的图像样本。
  • 0和1之间的值,则让对用的图像样本的alpha值为(1-s)。

Figure 11-5 shows an image created with one of the Quartz image-creation functions and Figure 11-6 shows an image mask created with the function CGImageMaskCreate. Figure 11-7 shows the image that results from calling the function CGImageCreateWithMask to apply the image mask to the image.

图11-5显示了一个由Quartz图像创建函数创建的图像,而图11-6显示了一个使用CGImageMaskCreate函数创建的图像遮罩。图11-7则显示了一个只用CGImageCreateWithMask函数将图像遮罩应用于一个图像的效果。

Figure 11-5 The original image

The original image

Figure 11-6 An image mask
An image mask

Note that the areas in the original image that correspond to the black areas of the mask show through in the resulting image (Figure 11-7). The areas that correspond to the white areas of the mask aren’t painted. The areas that correspond to the gray areas in the mask are painted using an intermediate alpha value that’s equal to 1 minus the image mask sample value.

注意,元图像与遮罩黑色区域对应的区域绘制出来,而与白色取悦对应的部分则没有绘制出来。而与遮罩灰色区域对应的区域则使用一个与(1-图像遮罩采样值)相同的alpha值来绘制。

Figure 11-7 The image that results from applying the image mask to the original image

The image that results from applying the image mask to the original image

Masking an Image with an Image

You can use the function CGImageCreateWithMask
to mask an image with another image, rather than with an image mask. You would do this to achieve an effect opposite of what you get when you mask an image with an image mask. Instead of passing an image mask that’s created using the function CGImageMaskCreate, you supply an image created from one of the Quartz image-creation functions.

我们可以使用函数CGImageCreateWithMask来用一个图像遮罩另一个图像,而不是使用一个图像遮罩。我们可以使用这种方式来达到与使用图像遮罩相反的效果。那此时我们传递给CGIamgeCreateWithMask函数的就不是一个图像遮罩了,而是传递一个通过Quartz图像创建函数创建的图像。

Source samples of an image that is used as a mask (but is not a Quartz image mask) operate as alpha values. An image sample value (S):

  • Equal to 1 allows painting the corresponding image sample at full coverage.
  • Equal to 0 blocks painting the corresponding image sample.
  • Greater than 0 and less 1 allows painting the corresponding image sample with an alpha value of S.

用于遮罩的图像采样也是操作alpha值。一个图像采样值(s):

  • 为1时,则允许完全绘制对应的图像样本。
  • 为0时,则不会绘制对应的图像样本。
  • 0和1之间的值,则让对应的图像样本的alpha的值为s。

Figure 11-8 shows the image that results from calling the function CGImageCreateWithMask to apply the image shown in Figure 11-6 to the image shown in Figure 11-5. In this case, assume that the image shown in Figure 11-6 is created using one of the Quartz image-creation functions, such as CGImageCreate. Compare Figure 11-8 with Figure 11-7 to see how the same sample values, when used as image samples instead of image mask samples, achieve the opposite effect.

图11-8显示了调用CGImageCreateWithMask函数将图11-6中的图像作为遮罩用用与图11-5中的图像上的效果。在这个例子中,我们假定图11-6中的图像是使用Quartz图像创建函数(如CGImageCreate)创建的。比较图11-8和图11-7,我们可以看出使用图像采样时,可以获取和使用图像遮罩采样相反的效果。

The areas in the original image that correspond to the black areas of the image aren’t painted in the resulting image (Figure 11-8). The areas that correspond to the white areas are painted. The areas that correspond to the gray areas in the mask are painted using an intermediate alpha value that’s equal to the masking image sample value.

图11-8中,原图像与图像的黑色区域对应的区域没有被绘制出来。UI白色区域对应额区域则被绘制出来了。在遮罩中与灰色区域对应的区域则使用与遮罩图像采样率相同的alpha值来绘制。

Figure 11-8 The image that results from masking the original image with an image

The image that results from masking the original image with an image
The image that results from masking the original image with an image

Masking an Image with Color

The function CGImageCreateWithMaskingColors
creates an image by masking one color or a range of colors in an image supplied to the function. Using this function, you can perform chroma key masking similar to what’s shown in Figure 11-9 or you can mask a range of colors, similar to what’s shown in Figure 11-11, Figure 11-12, and Figure 11-13.

函数CGImageCreateWithMaskingColors通过遮罩一种颜色或一个颜色范围内的颜色来创建一个图像。使用这个函数,我们可以执行如图11-9所示的颜色遮罩,当然也可以遮罩一个范围内的颜色,如图11-11,11-12,11-13所示的效果。

The function CGImageCreateWithMaskingColors
takes two parameters:

  • An image that is not an image mask and that is not the result of applying an image mask or masking color to another image.
  • An array of color components that specify a color or a range of colors for the function to mask in the image.

函数CGImageCreateWithMaskingColors有两个参数:

  • 一个图像,它不能是遮罩图像,也不能是使用过图像遮罩或颜色遮罩的图像。
  • 一个颜色分量数组,指定了一个颜色或一组颜色值,以用于遮罩图像。

Figure 11-9 Chroma key masking

Chroma key masking
Chroma key masking

The number of elements in the color component array must be equal to twice the number of color components in the color space of the image. For each color component in the color space, supply a minimum value and a maximum value that specifies the range of colors to mask. To mask only one color, set the minimum value equal to the maximum value. The values in the color component array are supplied in the following order:
{min[1], max[1], ... min[N], max[N]}, where N is the number of components.

颜色分量数组中元素的个数必须等于图像所在颜色空间的颜色分量数目的两倍。对于颜色空间中的每一个颜色分量,提供一个最小值和一个最大值来限定遮罩颜色的范围。如果只使用一个颜色,则设置最大值等于最小值即可。颜色分量数组中的值按一下顺序来提供:

{min[1], max[1], ... min[N], max[N]}, 其中N是分量的数目

If the image uses integer pixel components, each value in the color component array must be in the range [0 ..2^bitsPerComponent - 1] . If the image uses floating-point pixel components, each value can be any floating-point number that is a valid color component.

如果图像使用整型像素分量,则颜色分量数组中的每个值必须在[0..2bitsPerComponent-1] 范围之内。如果图像使用浮点像素分量,则值可以是任何有效的颜色分量值得浮点数。

An image sample is not painted if its color values fall in the range:{c[1], ... c[N]} where min[i] <= c[i] <= max[i] for 1 <= i <= N

一个图像采样如果其颜色值在一下范围内,则不会被绘制:

{c[1], ... c[N]} where min[i] <= c[i] <= max[i] for 1 <= i <= N

Anything underneath the unpainted samples, such as the current fill color or other drawing, shows through.

The image of two tigers, shown in Figure 11-10, uses an RGB color space that has 8 bits per component. To mask a range of colors in this image, you supply minimum and maximum color component values in the range of 0 to 255.

图11-10中两只老虎的图像使用了分量有8位的RGB颜色空间。为了在这个图像上屏蔽一组颜色,我们提供一组在[0,255]区间内的最大和最小颜色分量值。

Figure 11-10 The original image

The original image

Listing 11-3 shows a code fragment that sets up a color components array and supplies the array to the function CGImageCreateWithMaskingColors to achieve the result shown in Figure 11-11.

代码清单11-3演示了如何设置颜色分量数组,并将其提供给CGImageCreateWithMaskingColors函数以达到图11-11的效果。

Listing 11-3 Masking light to mid-range brown colors in an image

CGImageRef myColorMaskedImage;
const CGFloat myMaskingColors[6] = {124, 255, 68, 222, 0, 165};
myColorMaskedImage = CGImageCreateWithMaskingColors (image, myMaskingColors);
CGContextDrawImage (context, myContextRect, myColorMaskedImage);

Figure 11-11 An image with light to midrange brown colors masked out

An image with light to midrange brown colors masked out
An image with light to midrange brown colors masked out

Listing 11-4 shows another code fragment that operates on the image shown in Figure 11-10 to get the results shown in Figure 11-12. This example masks a darker range of colors.

代码清单11-14同样操作图11-10并得到图11-12的效果。这个例子遮罩了一组暗色。

Listing 11-4 Masking shades of brown to black

CGImageRef myMaskedImage;
const CGFloat myMaskingColors[6] = { 0, 124, 0, 68, 0, 0 };
myColorMaskedImage = CGImageCreateWithMaskingColors (image, myMaskingColors);
CGContextDrawImage (context, myContextRect, myColorMaskedImage);

Figure 11-12 A image after masking colors from dark brown to black

A image after masking colors from dark brown to black
A image after masking colors from dark brown to black

You can mask colors in an image as well as set a fill color to achieve the effect shown in Figure 11-13 in which the masked areas are replaced with the fill color. Listing 11-5 shows the code fragment that generates the image shown in Figure 11-13.

我们同样设置一个填充颜色来作为图像的遮罩颜色,以达到图11-13的效果,其中被遮罩区域使用了填充颜色。代码清单11-15演示了这一过程。

Listing 11-5 Masking a range of colors and setting a fill color and CGImageRef myMaskedImage;

const CGFloat myMaskingColors[6] = { 0, 124, 0, 68, 0, 0 };
myColorMaskedImage = CGImageCreateWithMaskingColors (image, myMaskingColors);
CGContextSetRGBFillColor (myContext, 0.6373,0.6373, 0, 1);
CGContextFillRect(context, rect);
CGContextDrawImage(context, rect, myColorMaskedImage);

Figure 11-13 An image drawn after masking a range of colors and setting a fill color

An image drawn after masking a range of colors and setting a fill color

Masking an Image by Clipping the Context

The function CGContextClipToMask maps a mask into a rectangle and intersects it with the current clipping area of the graphics context. You supply the following parameters:

  • The graphics context you want to clip.
  • A rectangle to apply the mask to.
  • An image mask created by calling the function CGImageMaskCreate. You can supply an image instead of an image mask to achieve an effect opposite of what you get by supplying an image mask. The image must be created with a Quartz image creation function, but it cannot be the result of applying a mask or masking color to another image.

函数CGContextClipToMask将遮罩映射为一个矩形并将其和图形上下文的当前裁剪区域求个交集。我们提供以下参数:

  • 需要裁剪的图形上下文
  • 要使用遮罩额矩形区域
  • 一个图像遮罩,其通过CGImageMaskCreate函数创建。我们可以使用图像来代替图像遮罩以达到相反的效果。但图像必须使用Quartz图像创建函数来创建,但不能是使用过图像遮罩或颜色遮罩的图像。

The resulting clipped area depends on whether you provide an image mask or an image to the function CGContextClipToMask. If you supply an image mask, you get results similar to those described in Masking an Image with an Image Mask, except that the graphics context is clipped. If you supply an image, the graphics context is clipped similar to what’s described in Masking an Image with an Image.

裁剪区域的结果依赖于是否提供了一个图像遮罩或图像给CGContextClipToMask函数。

Take a look at Figure 11-14. Assume it is an image mask created by calling the function CGImageMaskCreate and then the mask is supplied as a parameter to the function CGContextClipToMask. The resulting context allows painting to the black areas, does not allow painting to the white areas, and allows painting to the gray area with an alpha value of 1–S, where S is the sample value of the image masks. If you draw an image to the clipped context using the function CGContextDrawImage, you’ll get a result similar to that shown in Figure 11-15.

我们看看图11-14.假设它是通过调用CGImageMaskCreate函数创建的一个图像遮罩,然后将其作为CGContextClipToMask函数的参数。结果上下文允许绘制黑色取悦,而不是绘制白色区域,并使用(1-S)的alpha值老绘制灰色区域,其中S是图像遮罩的采样值。如果使用CGContextDrawImage函数来将一个图像绘制到裁剪上下文,则可以获取图11-15所示的结果。

Figure 11-14 A masking image

A masking image

Figure 11-15 An image drawn to a context after clipping the content with an image mask

An image drawn to a context after clipping the content with an image mask
An image drawn to a context after clipping the content with an image mask

When the masking image is treated as an image, you get the opposite result, as shown in Figure 11-16.

当遮罩图像被当成一个图像时,可以获得相反的结果,如图11-16所示:

Figure 11-16 An image drawn to a context after clipping the content with an image

An image drawn to a context after clipping the content with an image
An image drawn to a context after clipping the content with an image

Using Blend Modes with Images

You can use Quartz 2D blend modes (see Setting Blend Modes) to composite two images or to composite an image over any content that’s already drawn to the graphic context. This section discusses compositing an image over a background drawing.

我们可以使用Quartz 2D混合模式(见设置混合模式)来合成两幅图像,或者在已经绘制到图形上下文的任何内容上组合图像。本节讨论在背景图上合成图像。可参阅 Path 中设置混合模式。

The general procedure for compositing an image over a background is as follows:

  • Draw the background.
  • Set the blend mode by calling the function CGContextSetBlendMode with one of the blend mode constants. (The blend modes are based upon those defined in the PDF Reference, Fourth Edition, Version 1.5, Adobe Systems, Inc.)
  • Draw the image you want to composite over the background by calling the function CGContextDrawImage.

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

  • 画背景。
  • 通过在一个混合模式参数调用函数CGContextSetBlendMode设置混合模式。(混合模式是基于PDF参考,第四版,版本1.5,Adobe系统公司)中定义的。
  • 通过调用函数CGContextDrawImage在背景上画出你想复合的图像。

This code fragment composites one image over a background using the “darken” blend mode:

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

The rest of this section uses each of the blend modes available in Quartz to draw the image shown on the right side of Figure 11-17 over the background that consists of the painted rectangles shown on the left side of the figure. In all cases, the rectangles are first drawn to the graphics context. Then, a blend mode is set by calling the function CGContextSetBlendMode, passing the appropriate blend mode constant. Finally, the image of the jumper is drawn to the graphics context.

本节的其余部分使用每个可用Quartz画图像在图11-17右边的背景,包括画矩形在左边的图中所示的图像混合模式。在所有案例中,矩形首先被绘制到图形上下文中。然后,混合方式是通过调用函数CGContextSetBlendMode,并设置混合模式常量值。最后,将图像绘制到图形上下文中。

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

Background drawing (left) and foreground image (right)
Background drawing (left) and foreground image (right)

Normal Blend Mode

Normal blend mode paints source image samples over background image samples. Normal blend mode is the default blend mode in Quartz. You only need to explicitly set normal blend mode if you are currently using another blend mode and want to switch to normal blend mode. You can set normal blend mode by passing the constant kCGBlendModeNormal to the function CGContextSetBlendMode or by restoring the graphics state (assuming the previous graphics state used normal blend mode) using the function CGContextRestoreGState.

Figure 11-18 shows the result of using normal blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure. In this example, the image is drawn using an alpha value of 1.0, so the background is completely obscured by the image.

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

Drawing an image over a background using normal blend mode

Multiply Blend Mode

Multiply blend mode multiplies source image samples with background image samples. The colors in the resulting image are at least as dark as either of the two contributing sample colors.

You specify multiply blend mode by passing the constant kCGBlendModeMultiply to the function CGContextSetBlendMode. Figure 11-19 shows the result of using multiply blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using multiply blend mode
Drawing an image over a background using multiply blend mode

Screen Blend Mode

Screen blend mode multiplies the inverse of the source image samples with the inverse of the background image samples to obtain colors that are at least as light as either of the two contributing sample colors.

You specify screen blend mode by passing the constant kCGBlendModeScreen to the function CGContextSetBlendMode. Figure 11-20shows the result of using screen blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using screen blend mode

Overlay Blend Mode

Overlay blend mode either multiplies or screens the source image samples with the background image samples, depending on the color of the background samples. 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.

You specify overlay blend mode by passing the constant kCGBlendModeOverlay to the function CGContextSetBlendMode. Figure 11-21shows the result of using overlay blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using overlay blend mode
Drawing an image over a background using overlay blend mode

Darken Blend Mode

Darken blend mode creates composite image samples by choosing the darker samples from the source image or the background. Source image samples that are darker than the background image samples replace the corresponding background samples.

You specify darken blend mode by passing the constant kCGBlendModeDarken to the function CGContextSetBlendMode. Figure 11-22shows the result of using darken blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using darken blend mode
Drawing an image over a background using darken blend mode

Lighten Blend Mode

Lighten blend mode creates composite image samples by choosing the lighter samples from the source image or the background. Source image samples that are lighter than the background image samples replace the corresponding background samples.

You specify lighten blend mode by passing the constant kCGBlendModeLighten to the function CGContextSetBlendMode. Figure 11-23shows the result of using lighten blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using lighten blend mode
Drawing an image over a background using lighten blend mode

Color Dodge Blend Mode

Color dodge blend mode brightens background image samples to reflect the source image samples. Source image sample values that specify black remain unchanged.
You specify color dodge blend mode by passing the constant kCGBlendModeColorDodge to the function CGContextSetBlendMode. Figure 11-24 shows the result of using color dodge blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using color dodge blend mode
Drawing an image over a background using color dodge blend mode

Color Burn Blend Mode

Color burn blend mode darkens background image samples to reflect the source image samples. Source image sample values that specify white remain unchanged.

You specify color burn blend mode by passing the constant kCGBlendModeColorBurn to the function CGContextSetBlendMode. Figure 11-25 shows the result of using color burn blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using color burn blend mode
Drawing an image over a background using color burn blend mode

Soft Light Blend Mode

Soft light blend mode either darkens or lightens colors, depending on the source image sample color. If the source image sample color is lighter than 50% gray, the background lightens, similar to dodging. If the source image sample color is darker than 50% gray, the background darkens, similar to burning. If the source image sample color is equal to 50% gray, the background does not change.

Image samples that are equal to pure black or pure white produce darker or lighter areas, but do not result in pure black or white. The overall effect is similar to what you achieve by shining a diffuse spotlight on the source image.

You specify soft light blend mode by passing the constant kCGBlendModeSoftLight to the function CGContextSetBlendMode. Figure 11-26 shows the result of using soft light blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using soft light blend mode

Hard Light Blend Mode

Hard light blend mode either multiplies or screens colors, depending on the source image sample color. If the source image sample color is lighter than 50% gray, the background is lightened, similar to screening. If the source image sample color is darker than 50% gray, the background is darkened, similar to multiplying. If the source image sample color is equal to 50% gray, the source image does not change. Image samples that are equal to pure black or pure white result in pure black or white. The overall effect is similar to what you achieve by shining a harsh spotlight on the source image.

You specify hard light blend mode by passing the constant kCGBlendModeHardLight to the function CGContextSetBlendMode. Figure 11-27 shows the result of using hard light blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using hard light blend mode
Drawing an image over a background using hard light blend mode

Difference Blend Mode

Difference blend mode subtracts either the source image sample color from the background image sample color, or the reverse, depending on which sample has the greater brightness value. Source image sample values that are black produce no change; white inverts the background color values.

You specify difference blend mode by passing the constant kCGBlendModeDifference to the function CGContextSetBlendMode. Figure 11-28 shows the result of using difference blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using difference blend mode

Exclusion Blend Mode

Exclusion blend mode produces a lower-contrast version of the difference blend mode. Source image sample values that are black don’t produce a change; white inverts the background color values.

You specify exclusion blend mode by passing the constant kCGBlendModeExclusion to the function CGContextSetBlendMode. Figure 11-29 shows the result of using exclusion blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using exclusion blend mode
Drawing an image over a background using exclusion blend mode

Hue Blend Mode

Hue blend mode uses the luminance and saturation values of the background with the hue of the source image. You specify hue blend mode by passing the constant kCGBlendModeHue
to the function CGContextSetBlendMode. Figure 11-30 shows the result of using hue blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using hue blend mode
Drawing an image over a background using hue blend mode

Saturation Blend Mode

Saturation blend mode uses the luminance and hue values of the background with the saturation of the source image. Pure gray areas don’t produce a change. You specify saturation blend mode by passing the constant kCGBlendModeSaturation to the function CGContextSetBlendMode. Figure 11-31 shows the result of using saturation blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using saturation blend mode
Drawing an image over a background using saturation blend mode

Color Blend Mode

Color blend mode uses the luminance values of the background with the hue and saturation values of the source image. This mode preserves the gray levels in the image. You specify color blend mode by passing the constant kCGBlendModeColor to the function CGContextSetBlendMode. Figure 11-32 shows the result of using color blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

Drawing an image over a background using color blend mode

Luminosity Blend Mode

Luminosity blend mode uses the hue and saturation of the background with the luminance of the source image to create an effect that is inverse to the effect created by the color blend mode.

You specify luminosity blend mode by passing the constant kCGBlendModeLuminosity to the function CGContextSetBlendMode. Figure 11-33 shows the result of using luminosity blend mode to paint the image shown in Figure 11-17 over the rectangles shown in the same figure.

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

推荐阅读更多精彩内容