版本記錄

前言

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

后記

本篇主要講述了位圖圖像和圖像蒙版，感興趣的給個贊或者關注~~~