Quartz 2D 之Gradients

Quartz 為顏色漸變提供兩種不透明的數據類型--------CGShadingRef 和 CGGradientRef。 一個用來創建軸向的漸變,一個用來創建徑向的漸變。

沿著兩個定義的短點軸向變化被稱作線性梯度。垂直于軸的線上所有的色值是一樣的。

徑向的漸變中,軸上的每個點形成的圓周上半徑相同的點的色值相同,沿著半徑線性變化,各個圓的圓心沿著徑向軸線性表變化。

需要注意的是:當你使用透明度實現漸變時,當你在PDF內容上繪制時,你不能捕捉到漸變,基于這個原因,當你在PDF上繪制漸變時,你需要設置透明度為1。

A Comparison of CGShading and CGGradient Objects 兩種數據類型的比較

CGShadingRef 教你控制在漸變中每個點的是如何計算的。在創建CGShadingRef之前,你需要創建一個CGFunction 的對象(CGFunctionRef),這個對象給了我們很大的自由去創建平滑的漸變和其他非傳統的漸變。當你創建CGShadingRef時,你可以指定它是線性的還是徑向的。根據你的需求,是創建一個軸向的漸變還是徑向的漸變,你需要利用漸變的計算功能,這些功能都被封裝到了CGFuctionRef 這個對象,同時你也提供顏色空間,起始點或者半徑。在調用的時候,你只需要提供給上下文CGShadingRef對象,調用CGContextDrawShading即可。其他的事Quartz 2D會幫你做。

CGGradient對象 是基于設計易用性和使用性的一個子集。創建CGGradientRef對象不需要創建CGFunction對象,你只需要傳入一組位置和顏色。相比起CGShadingRef來說有個明顯的優勢就是可以使用多個位置,CGShadingRef被限制使用兩個位置。當你創建CGGradient對象時,你只需要設置顏色空間,位置,和每個位置的顏色。當你使用漸變對象繪制在上下文時,你需要指定Quartz是軸向或者徑向的漸變。繪制的時候,你需要指定起點和終點或者半徑。相反CGShading對象,它的幾何對象在創建的時候被定義,而不是在繪制的時候。

兩者的區別:

Using a CGGradient Object 使用CGGradient

只是一個對漸變的抽象的定義,簡單指定顏色和位置,而不是幾何。

步驟:1.創建一個CGGradient對象,體用亞瑟空間,和一組兩個或者更多的顏色成分,一組兩個或者兩個以上的位置。

? ? ? ? ? 2.通過調用CGContextDrawLinearGradientorCGContextDrawRadialGradient 提供上下文和一個CGGradient對象,繪制選擇,起始點。

???????? 3.不必要的時候釋放掉。

??????? location 是一個浮點數 在0-1之間。

代碼8-1 片段介紹了怎么創建一個CGGradient對象,在聲明了必要的變量之后,代碼設置了位置,顏色組分數量(位置 * 4),代碼里采用的是通用的RGB顏色,在iOS中必須通用RGB不可用,必須通過CGColorSpaceCreateDeviceRGB 來代替。然后把這些必須要參數傳遞給CGGradientCreateWithColorComponents.你可以使用CGGradientCreateWithColors 創建,如果你的應用程序中創建了一個CGColor對象的話會很便利。

在創建完CGGradient對象后,你可以使用它繪制一個軸向或者徑向的漸變。8-2的代碼片段展示了怎么為線性漸變設置起始點,然后進行繪制。圖8-1 是展示了結果

代碼8-3 使用了上面的CGGradient對象創建了徑向的漸變。如圖8-9,這個例子描述了使用堅實顏色填充漸變的擴展區域。

8-4圖 展示了使用8-4的代碼片段創建漸變的結果

圖8-10 展示了代碼8-5的效果

Using a CGShading Object 使用CGShading 對象實現漸變

創建一個CGShading 對象可以調用CGShadingCreateAxialorCGShadingCreateRadial。需要的提供的參數:

?1.一個顏色空間:CGColorSpace

2.起始點 Starting and ending points.

3.起始點的半徑(針對于徑向漸變)

4.一個CGFunction對象,可以通過CGFunctionCreate創建。

5.一個BOOL值,只是是否在起始點使用堅實顏色填充

創建一個CGShading對象最棘手的也許就是創建一個CGFunction對象。當你調用方法CGFucntionCreate是,你需要提供下列的:

???? 指向回調需要數據的指針。

???? 回調的輸入值的數量。Quartz要求回調需要一個輸入值。

???? 一組浮點數。

??? 回調提供的輸出值的數量。

??? 一個浮點數組指定每個顏色成分和透明度。

??? 一個包含field字段的數據結構。

??? 比如這樣: ??? void? myCalculateShadingValues (void *info, const CGFloat *in, CGFloat *out)

在你創建CGShading對象后,必要的話你可以設置裁剪區域。調用CGContextDrawShading使用漸變繪制上下文的裁剪區域。當你不需要CGShading對象時,你需要釋放掉。

?? Painting an Axial Gradient Using a CGShading Object

軸向和徑向的漸變需要執行相似的步驟。這個例子展示了怎么使用CGShading繪制軸向漸變,在上下文中創建一個同心圓的剪裁區域,然后在裁剪的上下文上繪制漸變,如圖效果8-11

?? 步驟:1. 創建一個CGFunction對象計算色值

???????????? 2.針對軸向漸變創建一個CGShading對象

???????????? 3.裁剪上下文

???????????? 4.使用漸變對象繪制軸向漸變

???????????? 5.釋放對象

Listing 8-6展示了一個方法計算色值通過將數組里的常量與輸入值相乘。

?在寫好了計算色值的回調后,將其打包作為CGFunction對象的一部分。


?? 然后我們就可以創建一個CGShading對象了(軸向漸變)

裁剪上下文

最后繪制然后釋放

總結下:完整的繪制軸向漸變CGShading 對象的程序是:

//6最后兩個false 表示起始點不需要填充

??Painting a Radial Gradient Using a CGShading Object?

? 步驟和繪制軸向漸變是一樣的。效果圖:

? 不同的是計算方式不同,創建CGFunction的方法和上面是一樣的。

?總結下:繪制完整的徑向漸變的程序是:

? demo地址:軸向與徑向漸變?


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容