Core Graphics 之 Bitmap Images and Image Masks (十二)

Bitmap Images and Image Masks

位圖圖像和圖像掩碼類似于Quartz中的任何繪圖原語。Quartz中的圖像和圖像掩碼都由CGImageRef數據類型表示。正如您將在本章后面看到的,有許多函數可以用來創建圖像。其中一些需要數據提供程序或圖像源來提供位圖數據。其他函數通過復制映像或對映像應用操作從現有映像創建映像。無論您如何在Quartz中創建位圖圖像,您都可以根據圖形上下文繪制圖像。請記住,位圖圖像是具有特定分辨率的位的數組。如果您將位圖圖像繪制到與分辨率無關的圖形上下文(比如PDF圖形上下文),那么位圖會受到創建它的分辨率的限制。
有一種創建Quartz圖像掩碼的方法——通過調用CGImageMaskCreate函數。您將看到如何在創建圖像掩碼時創建一個掩碼。應用圖像掩碼并不是繪制掩碼的唯一方法。這些部分用顏色對圖像進行屏蔽,用圖像掩碼對圖像進行屏蔽,通過剪切上下文對圖像進行屏蔽,討論了Quartz中可用的所有屏蔽方法。

About Bitmap Images and Image Masks

位圖圖像(或采樣圖像)是像素陣列(或采樣)。每個像素代表圖像中的一個點。JPEG、TIFF和PNG圖形文件是位圖圖像的示例。應用程序圖標是位圖圖像。位圖圖像被限制為矩形。但是使用alpha組件,它們可以呈現出各種形狀,可以旋轉和裁剪,如圖11-1所示。


屏幕快照 2018-08-28 上午9.57.34.png

位圖中的每個示例在指定的顏色空間中包含一個或多個顏色組件,外加一個指定alpha值以表示透明度的附加組件。每個組件可以從1到32位。在Mac OS X中,Quartz還支持浮點組件。Mac OS X和iOS中支持的格式描述為“位圖圖形上下文支持的像素格式”。ColorSync為位圖圖像提供了顏色空間支持。

Quartz還支持圖像掩碼。圖像掩碼是位圖,指定要繪制的區域,但不指定顏色。實際上,圖像掩碼充當模板,指定在頁面上放置顏色的位置。Quartz使用當前填充顏色來繪制圖像掩碼。圖像掩碼的深度可以是1到8位。

Bitmap Image Information

Quartz支持各種各樣的圖像格式,并且具有幾種流行格式的內置知識。在iOS中,這些格式包括JPEG、GIF、PNG、TIF、ICO、GMP、XBM和CUR。您提供給CGImageCreate函數的圖像數據必須以每個像素為間隔,而不是以每個掃描行為基礎。Quartz不支持平面數據。

本節描述與位圖圖像相關的信息。當您創建和使用Quartz映像(使用CGImageRef數據類型)時,您將看到一些Quartz映像創建函數需要您指定所有這些信息,而其他函數則需要這些信息的子集。您提供的內容取決于用于位圖數據的編碼,以及位圖表示的是圖像還是圖像掩碼。
注意:為了在處理原始圖像數據時獲得最佳性能,請使用vImage框架。您可以使用vImageBuffer_InitWithCGImage函數從CGImageRef引用中導入圖像數據到vImage。有關詳細信息,請參閱加速發行說明。
Quartz在創建位圖圖像(CGImageRef)時使用以下信息:
1、位圖數據源,可以是Quartz數據提供程序或Quartz圖像源。Quartz 2D中的數據管理描述了這兩種功能,并討論了提供位圖數據源的功能。
2、可選的解碼陣列(解碼陣列)。
3、一個插值設置,它是一個布爾值,指定在調整圖像大小時Quartz是否應該應用插值算法。
4、指定如何映射位于圖形上下文的目標顏色空間中的顏色的呈現意圖。此信息不需要用于圖像掩碼。有關更多信息,請參見設置呈現意圖。
5、圖像尺寸
6、像素格式,包括每個組件的位、每個像素的位和每行的字節(像素格式)。
對于圖像,顏色空間和位圖布局(顏色空間和位圖布局)信息來描述alpha的位置和位7、圖是否使用浮點值。圖像掩碼不需要這些信息。

Decode Array

解碼數組將圖像的顏色值映射到其他顏色值,這對于消除圖像的飽和度或反轉顏色等任務非常有用。數組包含每個顏色組件的一對數字。當Quartz呈現圖像時,它應用線性變換將原始組件值映射到與目標顏色空間相適應的指定范圍內的相對數字。例如,RGB顏色空間中的圖像的decode數組包含6個條目,每個條目對應一個紅色、綠色和藍色組件。

像素格式

像素格式包含以下信息:

每個組件的比特數,也就是像素中每個顏色組件的比特數。對于圖像掩碼,此值是源像素中重要掩碼位的數量。例如,如果源映像是8位掩碼,則為每個組件指定8位。
每個像素的比特數,也就是源像素中比特的總數。這個值必須至少是每個組件的比特數乘以每個像素的組件數。
每一行的字節數。圖像中每一行的字節數。

Color Spaces and Bitmap Layout

為了確保Quartz正確地解釋每個像素的位,您必須指定:

位圖是否包含alpha通道。Quartz支持RGB、CMYK和灰色空間。它還支持alpha或透明度,盡管alpha信息在所有位圖圖像格式中不可用。當alpha分量可用時,它可以位于像素中最重要的位或最不重要的位。
對于具有alpha組件的位圖,顏色組件是否已經乘以alpha值。預乘阿爾法描述了一個源顏色,其組成部分已經乘以一個阿爾法值。預乘通過消除每個顏色組件的額外乘法操作,加速了圖像的呈現。例如,在RGB顏色空間中,使用預乘alpha繪制圖像消除了圖像中每個像素的三個乘法運算(紅色乘以alpha,綠色乘以alpha,藍色乘以alpha)。
整數或浮點值的數據格式。
當您使用CGImageCreate函數創建圖像時,您將提供一個bitmapInfo參數(類型為CGImageBitmapInfo)來指定位圖布局信息。下面的常量指定alpha組件的位置以及顏色組件是否被預乘:
alpha組件存儲在每個像素的最小有效位中,例如RGBA。
alpha組件存儲在每個像素中最重要的部分,例如ARGB。
alpha組件存儲在每個像素的最小有效位中,顏色組件已經被這個alpha值相乘。
kcgimagealphapremultipliedfirst - alpha組件存儲在每個像素的最重要的位上,顏色組件已經乘以這個alpha值。
沒有alpha組件。如果像素的總大小大于顏色空間中顏色組件數量所需的空間,則忽略最小有效位。
沒有alpha組件。如果像素的總大小大于顏色空間中顏色分量數目所需的空間,則忽略最重要的位元。
kCGImageAlphaNone-equivalent kCGImageAlphaNoneSkipLast。
使用常量kCGBitmapFloatComponents表示使用浮點值的位圖格式。對于浮點格式,在邏輯上或此常量與前面列表中的適當常量相同。例如,對于使用預乘alpha的每像素128位浮點格式(alpha位于每個像素的最小有效位),您向Quartz提供以下信息:

kCGImageAlphaPremultipliedLast|kCGBitmapFloatComponents

圖11-2直觀地描述了使用16位或32位整數格式的CMYK和RGB顏色空間中像素是如何表示的。32位整數像素格式每個組件使用8位。16位整數格式每個組件使用5位。Quartz 2D也支持128位浮點像素格式,每個組件使用32位元。圖中沒有顯示128位格式。


屏幕快照 2018-08-28 上午10.03.51.png
Creating Images

表11-1列出了Quartz為創建CGImage對象提供的函數。圖像創建函數的選擇取決于圖像數據的來源。最靈活的函數是CGImageCreate。它從任何類型的位圖數據中創建圖像。但是,它是最復雜的函數,因為必須指定所有位圖信息。要使用此函數,您需要熟悉位圖圖像信息中討論的主題。

如果你想創建一個CGImage對象從一個圖像文件,它使用一個標準的圖像格式如PNG和JPEG,最簡單的解決方案是調用函數CGImageSourceCreateWithURL來創建一個圖像源,然后調用函數CGImageSourceCreateImageAtIndex來創建一個圖像的圖像數據在一個特定的索引圖像源。如果原始圖像文件僅包含一個圖像,則提供0作為索引。如果圖像文件格式支持包含多個圖像的文件,則需要將索引提供給適當的圖像,記住索引值從0開始。

如果您已經將內容繪制到位圖圖形上下文,并且希望將該繪制捕獲到CGImage對象,請調用函數CGBitmapContextCreateImage。

有幾個函數是對現有圖像進行操作的實用程序,可以復制、創建縮略圖,也可以從較大圖像的一部分創建圖像。無論如何創建CGImage對象,都使用CGContextDrawImage函數將圖像繪制到圖形上下文。請記住,CGImage對象是不可變的。當您不再需要CGImage對象時,通過調用CGImageRelease函數來釋放它。


屏幕快照 2018-08-28 上午10.07.20.png

接下來的部分將討論如何創建:

現有圖像的子圖像
位圖圖形上下文中的圖像
你可以參考這些資源獲得更多信息:

Quartz 2D中的數據管理討論了如何讀寫圖像數據。
CGImage Reference、CGImageSource Reference和CGBitmapContext Reference,以進一步了解表11-1中列出的函數及其參數。

Creating an Image From Part of a Larger Image

CGImageCreateWithImageInRect函數允許從現有的Quartz映像創建子映像。圖11-3展示了通過提供指定字母“A”位置的矩形從較大的圖像中提取包含字母“A”的圖像。


屏幕快照 2018-08-28 上午10.07.14.png

函數CGImageCreateWithImageInRect返回的圖像保留對原始圖像的引用,這意味著您可以在調用該函數后釋放原始圖像。

圖11-4顯示了提取圖像的一部分以創建另一個圖像的另一個示例。在這種情況下,公雞的頭從更大的圖像中提取出來,然后繪制到一個比子圖像大的矩形,有效地放大了圖像。

清單11-1顯示了創建并繪制子映像的代碼。函數CGContextDrawImage將公雞的頭部吸引到的矩形具有的維數是所提取子圖像維數的兩倍。清單是一個代碼片段。您需要聲明適當的變量,創建rooster映像,并處理rooster映像和rooster head子映像。因為代碼是一個片段,所以它沒有顯示如何創建繪制圖像的圖形上下文。你可以使用任何你喜歡的圖形上下文。有關如何創建圖形上下文的示例,請參閱圖形上下文。


屏幕快照 2018-08-28 上午10.08.57.png

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

要從現有的位圖圖形上下文創建圖像,您可以調用下面的函數CGBitmapContextCreateImage:

CGImageRef myImage;
myImage = CGBitmapContextCreateImage (myBitmapContext);

函數返回的CGImage對象是通過復制操作創建的。因此,對位圖圖形上下文的任何后續更改都不會影響返回的CGImage對象的內容。在某些情況下,復制操作實際上遵循寫時復制的語義,因此只有在修改位圖圖形上下文中的基礎數據時,才會發生實際的位的物理副本。您可能希望使用生成的圖像并在向位圖圖形上下文執行額外繪圖之前釋放它,以便避免實際的數據副本。

例如一個演示如何創建位圖圖形上下文的示例,該示例設置位圖圖形上下文。

Creating an Image Mask

Quartz位圖圖像掩模的使用方式與藝術家使用絲網印刷相同。位圖圖像掩碼決定顏色的傳輸方式,而不是使用哪種顏色。圖像掩碼中的每個樣例值都指定當前填充顏色在特定位置被掩碼的數量。示例值指定掩碼的不透明度。較大的值表示更大的不透明度,并指定Quartz顏料較少的位置。你可以把樣本值看成是一個逆alpha值。值1是透明的,0是不透明的。

每個組件的圖像掩碼是1、2、4或8位。對于一個1位掩碼,樣本值為1指定了掩碼中阻塞當前填充顏色的部分。示例值為0,指定在繪制掩碼時顯示圖形狀態的當前填充顏色的掩碼部分。你可以把一個1位的面具想象成黑白的;樣品要么完全阻擋油漆,要么完全允許油漆。

每個組件有2、4或8位的圖像掩碼表示灰度值。使用以下公式,每個組件映射到0到1的范圍:


屏幕快照 2018-08-28 上午10.11.34.png

例如,4位掩碼的值在0到1之間,增量為1/15。0或1的組件值代表了極端-完全塊漆和完全允許油漆。0到1之間的值允許使用公式1 - MaskSampleValue進行部分繪制。例如,如果8位掩碼的樣本值縮放到0.7,顏色就會被繪制成alpha值(1 - 0.7),也就是0.3。

CGImageMaskCreate函數從您提供的位圖圖像信息中創建一個石英圖像掩碼,這將在位圖圖像信息中討論。用于創建圖像掩碼的信息與用于創建圖像的信息相同,只是不提供顏色空間信息、位圖信息常量或呈現意圖,如清單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

掩蔽技術可以產生許多有趣的效果,通過控制圖像的哪個部分被繪制。您可以:

*對圖像應用圖像掩碼。您還可以使用圖像作為掩碼來實現與應用圖像掩碼相反的效果。

*使用顏色來掩蓋圖像的部分,包括稱為色度關鍵掩蔽的技術。

*將一個圖形上下文剪輯到一個圖像或圖像掩碼,當Quartz將內容繪制到剪切上下文時,該掩碼有效地屏蔽了一個圖像(或任何類型的繪圖)。

Masking an Image with an Image Mask

函數CGImageCreateWithMask返回通過對圖像應用圖像掩碼創建的圖像。這個函數有兩個參數:

要應用掩碼的圖像。此圖像不能是圖像掩碼或具有與之關聯的掩蔽顏色(請參閱用顏色掩蔽圖像)。
通過調用函數CGImageMaskCreate創建的圖像掩碼。提供一個圖像而不是一個圖像掩碼是可能的,但結果卻大不相同。請參閱用圖像屏蔽圖像。
圖像掩碼的源樣本作為一個反alpha值。圖像掩模樣本值:

等于1塊繪制相應的圖像樣本。
= 0允許在全覆蓋范圍內繪制相應的圖像樣本。
大于0和小于1允許用alpha值(1 - S)繪制相應的圖像樣本。

圖11-5顯示了使用Quartz圖像創建函數之一創建的圖像,圖11-6顯示了使用CGImageMaskCreate函數創建的圖像掩碼。圖11-7顯示了調用CGImageCreateWithMask函數將圖像掩碼應用到圖像的結果。


屏幕快照 2018-08-28 上午10.14.26.png

請注意,原始圖像中對應于遮罩黑色區域的區域會在生成的圖像中顯示出來(圖11-7)。與面具的白色區域相對應的區域沒有被繪制。對應于掩模中灰色區域的區域使用中間alpha值繪制,該值等于1減去圖像掩模樣本值。


屏幕快照 2018-08-28 上午10.15.05.png
Masking an Image with an Image

您可以使用CGImageCreateWithMask函數用另一個圖像來屏蔽一個圖像,而不是用圖像掩碼。這樣做的目的是為了達到與用圖像掩模掩蓋圖像相反的效果。不傳遞使用CGImageMaskCreate函數創建的圖像掩碼,而是提供一個由Quartz圖像創建函數創建的圖像。

用作掩碼(但不是石英圖像掩碼)的圖像源樣本操作為alpha值。圖像樣本值:

等于1允許繪制相應的圖像樣本在全覆蓋。
等于0塊繪制相應的圖像樣本。
大于0和小于1允許用alpha值S繪制相應的圖像樣本。

圖11-8顯示了調用CGImageCreateWithMask函數將圖11-6所示的圖像應用于圖11-5所示的圖像的結果。在本例中,假設圖11-6所示的圖像是使用石英圖像創建函數(如CGImageCreate)創建的。將圖11-8與圖11-7進行比較,看看相同的樣本值在用作圖像樣本而不是圖像掩碼樣本時是如何達到相反的效果的。

原始圖像中對應于圖像黑色區域的區域不在生成的圖像中繪制(圖11-8)。與白色區域相對應的區域被涂上了顏色。與掩模中的灰色區域相對應的區域使用中間alpha值繪制,該值等于掩蔽圖像樣本值。


屏幕快照 2018-08-28 上午10.16.28.png
Masking an Image with Color

函數CGImageCreateWithMaskingColors通過在提供給函數的圖像中屏蔽一種顏色或一系列顏色來創建一個圖像。使用這個函數,您可以執行類似于圖11-9所示的chroma key屏蔽,或者您可以屏蔽一系列顏色,類似于圖11-11、圖11-12和圖11-13所示。

CGImageCreateWithMaskingColors函數有兩個參數:

不是圖像掩碼的圖像,并且不是對另一個圖像應用圖像掩碼或掩碼顏色的結果。
一組顏色組件,用于指定要在圖像中屏蔽的函數的顏色或顏色范圍。
顏色組件數組中的元素數量必須等于圖像顏色空間中顏色組件數量的兩倍。對于顏色空間中的每個顏色組件,提供一個最小值和一個最大值,指定要蒙版的顏色范圍。為了只屏蔽一種顏色,設置最小值等于最大值。顏色組件數組中的值按以下順序提供:

{min[1], max[1], ... min[N], max[N]}其中N是分量的個數。

如果圖像使用整數像素組件,顏色組件數組中的每個值必須在范圍[0 ..]2 ^ bitsPerComponent - 1)。如果圖像使用浮點像素組件,每個值可以是任何浮點數,該浮點數是有效的顏色組件。

如果圖像樣本的顏色值在以下范圍內,則不繪制:

{c[1], ... c[N]}

where min[i] <= c[i] <= max[i] for 1 <= i <= N

未繪制的樣品下面的任何東西,比如當前填充顏色或其他繪圖,都可以顯示出來。

如圖11-10所示,兩個老虎的圖像使用了一個RGB顏色空間,每個組件有8位。要在此圖像中屏蔽一系列顏色,您需要在0到255之間提供最小和最大的顏色組件值。


屏幕快照 2018-08-28 上午10.19.23.png

清單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);
屏幕快照 2018-08-28 上午10.20.23.png

清單11-4顯示了對圖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);
屏幕快照 2018-08-28 上午10.29.32.png

您可以對圖像中的顏色進行遮罩,也可以設置填充顏色,以實現如圖11-13所示的效果,其中用填充顏色替換了掩蔽區域。清單11-5顯示了生成圖11-13所示圖像的代碼片段。
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);
屏幕快照 2018-08-28 上午10.30.42.png
Masking an Image by Clipping the Context

函數CGContextClipToMask將掩碼映射到一個矩形中,并與當前圖形上下文的剪切區域相交。您提供以下參數:

要剪輯的圖形上下文。
應用蒙版的矩形。
通過調用函數CGImageMaskCreate創建的圖像掩碼。您可以提供圖像而不是圖像掩碼,以達到與提供圖像掩碼相反的效果。圖像必須使用石英圖像創建函數創建,但它不能是對另一個圖像應用掩碼或掩蔽顏色的結果。

產生的剪切區域取決于您是向CGContextClipToMask函數提供圖像掩碼還是圖像。如果您提供了一個圖像掩碼,您將得到與使用圖像掩碼對圖像進行掩碼時所描述的結果類似的結果,但圖形上下文是剪切的。如果您提供了一個圖像,圖形上下文將被裁剪,類似于用圖像掩蓋圖像所描述的內容。

看看圖11-14。假設它是通過調用函數CGImageMaskCreate創建的圖像掩碼,然后將掩碼作為參數提供給函數CGContextClipToMask。結果上下文允許繪制到黑色區域,不允許繪制到白色區域,允許繪制到灰色區域,alpha值為1-S,其中S是圖像蒙版的樣本值。如果您使用CGContextDrawImage函數將圖像繪制到修剪后的上下文,您將得到類似于圖11-15所示的結果。


屏幕快照 2018-08-28 上午10.31.58.png

當掩蔽圖像被當作圖像處理時,會得到相反的結果,如圖11-16所示。


屏幕快照 2018-08-28 上午10.32.38.png
Using Blend Modes with Images

您可以使用Quartz 2D混合模式(請參閱設置混合模式)來合成兩個圖像,或將圖像與任何已經繪制到圖形上下文的內容合成。本節討論在背景圖上合成圖像。

在背景上合成圖像的一般程序如下:

畫的背景。
通過使用混合模式常量調用函數CGContextSetBlendMode來設置混合模式。(混合模式基于PDF參考,第四版,1.5版,Adobe Systems, Inc.)中定義的模式。)
通過調用CGContextDrawImage函數,在背景上繪制要合成的圖像。
這段代碼片段復合了一個圖像背景使用“暗”混合模式:

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

本節的其余部分使用Quartz中可用的每種混合模式來繪制圖11-17右側所示的圖像,背景由圖左側所示的繪制矩形所組成。在所有情況下,矩形首先被繪制到圖形上下文。然后,通過調用函數CGContextSetBlendMode來設置混合模式,并傳遞適當的混合模式常量。最后,將跳線的圖像繪制到圖形上下文。


屏幕快照 2018-08-28 上午10.33.52.png
Normal Blend Mode

普通混合模式在背景圖像樣本上繪制源圖像樣本。普通混合模式是Quartz中的默認混合模式。如果您目前正在使用另一種混合模式,并且希望切換到普通混合模式,則只需要顯式地設置普通混合模式。可以通過將常量kcgblendmodennormal傳遞給函數CGContextSetBlendMode來設置普通混合模式,或者使用函數cgcontext - trestoregstate來恢復圖形狀態(假設之前的圖形狀態使用普通混合模式)。

圖11-18顯示了使用普通混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。在本例中,圖像使用alpha值1.0繪制,因此背景完全被圖像遮擋。


屏幕快照 2018-08-28 上午10.37.49.png
Multiply Blend Mode

多重混合模式將源圖像樣本與背景圖像樣本相乘。生成的圖像中的顏色至少與兩個生成的示例顏色一樣暗。

通過將常量kcgblendmodemulply傳遞給函數CGContextSetBlendMode,可以指定多重混合模式。圖11-19顯示了使用multiblend mode繪制圖11-17中矩形的結果。


屏幕快照 2018-08-28 上午10.38.33.png
Screen Blend Mode

屏幕混合模式將源圖像樣本的反方向與背景圖像樣本的反方向相乘,以獲得至少與兩個產生的樣本顏色一樣輕的顏色。

通過將常量kCGBlendModeScreen傳遞給函數CGContextSetBlendMode,可以指定屏幕混合模式。圖11-20顯示了使用屏幕混合模式繪制圖11-17中所示矩形的結果。


屏幕快照 2018-08-28 上午10.39.24.png
Overlay Blend Mode

疊加混合模式可以使用背景圖像樣本復制源圖像樣本,也可以根據背景樣本的顏色對源圖像樣本進行篩選。結果是覆蓋現有的圖像樣本,同時保留背景的高光和陰影。背景顏色與源圖像混合以反映背景的明度或暗度。

通過將常量kCGBlendModeOverlay傳遞給CGContextSetBlendMode函數,可以指定疊加混合模式。圖11-21顯示了使用疊加混合模式將圖11-17所示的圖形覆蓋在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.40.16.png
Darken Blend Mode

暗混合模式通過從源圖像或背景中選擇較暗的樣本來創建復合圖像樣本。比背景圖像顏色深的源圖像樣本替換相應的背景樣本。

通過將常量kCGBlendModeDarken傳遞給函數CGContextSetBlendMode,可以指定混合模式為暗。圖11-22顯示了使用darken blend模式繪制圖11-17中矩形的結果。


屏幕快照 2018-08-28 上午10.41.24.png
Lighten Blend Mode

通過從源圖像或背景中選擇較輕的樣本來創建復合圖像樣本。比背景圖像樣本輕的源圖像樣本替換相應的背景樣本。

通過將常量kcgblendmodeliallymode傳遞給函數CGContextSetBlendMode,您可以指定減輕混合模式。圖11-23顯示了使用變淡混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.42.04.png
Color Dodge Blend Mode

顏色減淡混合模式照亮背景圖像樣本,以反映源圖像樣本。指定黑色的源圖像樣本值保持不變。

通過將常量kCGBlendModeColorDodge傳遞給函數CGContextSetBlendMode,可以指定顏色減淡混合模式。圖11-24顯示了使用顏色減淡混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.42.49.png
Color Burn Blend Mode

顏色燒傷混合模式使背景圖像樣本變暗以反映源圖像樣本。指定白色的源圖像樣本值保持不變。

通過將常量kCGBlendModeColorBurn傳遞給函數CGContextSetBlendMode,可以指定顏色燒傷混合模式。圖11-25顯示了使用color burn blend模式繪制圖11-17中矩形的結果。


屏幕快照 2018-08-28 上午10.43.34.png
Soft Light Blend Mode

柔和的光混合模式或暗或淡的顏色,取決于源圖像樣本的顏色。如果源圖像的樣本顏色小于50%的灰度,背景會變淺,類似于躲避。如果源圖像的樣本顏色比50%的灰度深,背景會變暗,類似于燃燒。如果源圖像的樣本顏色等于50%的灰度,背景不會改變。

與純黑或純白相等的圖像樣本會產生較暗或較淺的區域,但不會產生純黑或純白。整體效果類似于在源圖像上使用漫射聚光燈的效果。

通過將常量kCGBlendModeSoftLight傳遞給函數CGContextSetBlendMode,可以指定軟光混合模式。圖11-26顯示了使用柔光混合模式在相同的矩形上繪制圖11-17所示的圖像的結果。


屏幕快照 2018-08-28 上午10.44.49.png
Hard Light Blend Mode

強光混合模式可以是多重或屏幕顏色,取決于源圖像樣本顏色。如果源圖像的樣本顏色小于50%的灰色,背景會變亮,類似于篩選。如果源圖像的樣本顏色比50%的灰度深,背景會變暗,類似于相乘。如果源圖像的樣本顏色等于50%的灰度,則源圖像不會改變。等于純黑或純白的圖像樣本結果是純黑或純白。整體效果類似于你通過在源圖像上發出強烈的聚光燈而獲得的效果。

通過將常量kCGBlendModeHardLight傳遞給函數CGContextSetBlendMode,可以指定強光混合模式。圖11-27顯示了使用強光混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.45.39.png
Difference Blend Mode

差分混合模式將源圖像樣本顏色從背景圖像樣本顏色中減去,或者相反,這取決于哪個樣本的亮度值更大。黑色的源圖像樣本值不會產生變化;白色反轉背景顏色的值。

通過將常量kCGBlendModeDifference傳遞給函數CGContextSetBlendMode,可以指定差異混合模式。圖11-28顯示了使用差異混合模式繪制圖11-17中所示的圖形在相同圖形中所示矩形上的結果。


屏幕快照 2018-08-28 上午10.46.27.png
Exclusion Blend Mode

排除混合模式產生一個不同混合模式的低對比度版本。黑色的源圖像樣本值不會產生變化;白色反轉背景顏色的值。

通過將常量kCGBlendModeExclusion傳遞給函數CGContextSetBlendMode,可以指定排除混合模式。圖11-29顯示了使用排除混合模式將圖11-17所示的圖像繪制到相同圖中所示矩形上的結果。


屏幕快照 2018-08-28 上午10.47.24.png
Hue Blend Mode

色調混合模式使用背景的亮度和飽和度值與源圖像的色調。通過將常量kCGBlendModeHue傳遞給函數CGContextSetBlendMode,可以指定色調混合模式。圖11-30顯示了使用色調混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.48.08.png
Saturation Blend Mode

飽和度混合模式使用背景亮度和色調值與源圖像的飽和度。純灰色區域不會產生變化。通過將常量kCGBlendModeSaturation傳遞給函數CGContextSetBlendMode,可以指定飽和度混合模式。圖11-31顯示了使用飽和度混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.48.52.png
Color Blend Mode

顏色混合模式使用背景的亮度值和源圖像的色調和飽和度值。這種模式保留了圖像中的灰度。通過將常量kCGBlendModeColor傳遞給函數CGContextSetBlendMode,可以指定顏色混合模式。圖11-32顯示了使用顏色混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.49.42.png
Luminosity Blend Mode

光度混合模式使用背景的色相和飽和度與源圖像的亮度來創建與顏色混合模式產生的效果相反的效果。

通過將常數kcgblendmodelescence傳遞給函數CGContextSetBlendMode,可以指定光度混合模式。圖11-33顯示了使用光度混合模式將圖11-17所示的圖像繪制在相同圖形所示矩形上的結果。


屏幕快照 2018-08-28 上午10.50.23.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容

  • 位圖圖像和圖像蒙板就像Quartz中的任何圖形圖元。 Quartz中的圖像和圖像蒙板都由CGImageRef數據類...
    權宜平和閱讀 1,715評論 0 3
  • 在Quartz中位圖圖像和圖像掩模更像是初級的。圖像和圖像掩模在Quartz中都是CGImageRef 數據類型。...
    雪_晟閱讀 725評論 1 3
  • Paths path定義了一個或多個形狀或子路徑。子路徑可以由直線、曲線或兩者組成。它可以是打開的路徑可以是關閉的...
    Niko_peng閱讀 515評論 0 0
  • 路徑定義一個或多個形狀或子路徑。 子路徑可以由直線,曲線或兩者組成。 它可以打開或關閉。 子路徑可以是簡單的形狀,...
    權宜平和閱讀 840評論 0 1
  • Graphics Contexts 圖形上下文表示繪圖目的地。它包含繪圖參數和繪圖系統執行任何后續繪圖命令所需的所...
    Niko_peng閱讀 629評論 0 0