Quartz 2D 之Gradients

Quartz 為顏色漸變提供兩種不透明的數(shù)據(jù)類型--------CGShadingRef 和 CGGradientRef谆棺。 一個(gè)用來創(chuàng)建軸向的漸變,一個(gè)用來創(chuàng)建徑向的漸變。

沿著兩個(gè)定義的短點(diǎn)軸向變化被稱作線性梯度。垂直于軸的線上所有的色值是一樣的澜掩。

徑向的漸變中叠聋,軸上的每個(gè)點(diǎn)形成的圓周上半徑相同的點(diǎn)的色值相同壹粟,沿著半徑線性變化愕乎,各個(gè)圓的圓心沿著徑向軸線性表變化崎坊。

需要注意的是:當(dāng)你使用透明度實(shí)現(xiàn)漸變時(shí)备禀,當(dāng)你在PDF內(nèi)容上繪制時(shí),你不能捕捉到漸變奈揍,基于這個(gè)原因曲尸,當(dāng)你在PDF上繪制漸變時(shí),你需要設(shè)置透明度為1男翰。

A Comparison of CGShading and CGGradient Objects 兩種數(shù)據(jù)類型的比較

CGShadingRef 教你控制在漸變中每個(gè)點(diǎn)的是如何計(jì)算的另患。在創(chuàng)建CGShadingRef之前,你需要?jiǎng)?chuàng)建一個(gè)CGFunction 的對象(CGFunctionRef)蛾绎,這個(gè)對象給了我們很大的自由去創(chuàng)建平滑的漸變和其他非傳統(tǒng)的漸變昆箕。當(dāng)你創(chuàng)建CGShadingRef時(shí),你可以指定它是線性的還是徑向的秘通。根據(jù)你的需求为严,是創(chuàng)建一個(gè)軸向的漸變還是徑向的漸變,你需要利用漸變的計(jì)算功能肺稀,這些功能都被封裝到了CGFuctionRef 這個(gè)對象第股,同時(shí)你也提供顏色空間,起始點(diǎn)或者半徑话原。在調(diào)用的時(shí)候夕吻,你只需要提供給上下文CGShadingRef對象,調(diào)用CGContextDrawShading即可繁仁。其他的事Quartz 2D會幫你做涉馅。

CGGradient對象 是基于設(shè)計(jì)易用性和使用性的一個(gè)子集。創(chuàng)建CGGradientRef對象不需要?jiǎng)?chuàng)建CGFunction對象黄虱,你只需要傳入一組位置和顏色稚矿。相比起CGShadingRef來說有個(gè)明顯的優(yōu)勢就是可以使用多個(gè)位置,CGShadingRef被限制使用兩個(gè)位置。當(dāng)你創(chuàng)建CGGradient對象時(shí)晤揣,你只需要設(shè)置顏色空間桥爽,位置,和每個(gè)位置的顏色昧识。當(dāng)你使用漸變對象繪制在上下文時(shí)钠四,你需要指定Quartz是軸向或者徑向的漸變。繪制的時(shí)候跪楞,你需要指定起點(diǎn)和終點(diǎn)或者半徑缀去。相反CGShading對象,它的幾何對象在創(chuàng)建的時(shí)候被定義甸祭,而不是在繪制的時(shí)候缕碎。

兩者的區(qū)別:

Using a CGGradient Object 使用CGGradient

只是一個(gè)對漸變的抽象的定義,簡單指定顏色和位置淋叶,而不是幾何阎曹。

步驟:1.創(chuàng)建一個(gè)CGGradient對象,體用亞瑟空間煞檩,和一組兩個(gè)或者更多的顏色成分处嫌,一組兩個(gè)或者兩個(gè)以上的位置。

? ? ? ? ? 2.通過調(diào)用CGContextDrawLinearGradientorCGContextDrawRadialGradient 提供上下文和一個(gè)CGGradient對象斟湃,繪制選擇熏迹,起始點(diǎn)。

???????? 3.不必要的時(shí)候釋放掉凝赛。

??????? location 是一個(gè)浮點(diǎn)數(shù) 在0-1之間注暗。

代碼8-1 片段介紹了怎么創(chuàng)建一個(gè)CGGradient對象,在聲明了必要的變量之后墓猎,代碼設(shè)置了位置捆昏,顏色組分?jǐn)?shù)量(位置 * 4),代碼里采用的是通用的RGB顏色毙沾,在iOS中必須通用RGB不可用骗卜,必須通過CGColorSpaceCreateDeviceRGB 來代替。然后把這些必須要參數(shù)傳遞給CGGradientCreateWithColorComponents.你可以使用CGGradientCreateWithColors 創(chuàng)建左胞,如果你的應(yīng)用程序中創(chuàng)建了一個(gè)CGColor對象的話會很便利寇仓。

在創(chuàng)建完CGGradient對象后,你可以使用它繪制一個(gè)軸向或者徑向的漸變烤宙。8-2的代碼片段展示了怎么為線性漸變設(shè)置起始點(diǎn)遍烦,然后進(jìn)行繪制。圖8-1 是展示了結(jié)果

代碼8-3 使用了上面的CGGradient對象創(chuàng)建了徑向的漸變躺枕。如圖8-9服猪,這個(gè)例子描述了使用堅(jiān)實(shí)顏色填充漸變的擴(kuò)展區(qū)域供填。

8-4圖 展示了使用8-4的代碼片段創(chuàng)建漸變的結(jié)果

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

Using a CGShading Object 使用CGShading 對象實(shí)現(xiàn)漸變

創(chuàng)建一個(gè)CGShading 對象可以調(diào)用CGShadingCreateAxialorCGShadingCreateRadial。需要的提供的參數(shù):

?1.一個(gè)顏色空間:CGColorSpace

2.起始點(diǎn) Starting and ending points.

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

4.一個(gè)CGFunction對象蔓姚,可以通過CGFunctionCreate創(chuàng)建捕虽。

5.一個(gè)BOOL值,只是是否在起始點(diǎn)使用堅(jiān)實(shí)顏色填充

創(chuàng)建一個(gè)CGShading對象最棘手的也許就是創(chuàng)建一個(gè)CGFunction對象坡脐。當(dāng)你調(diào)用方法CGFucntionCreate是,你需要提供下列的:

???? 指向回調(diào)需要數(shù)據(jù)的指針房揭。

???? 回調(diào)的輸入值的數(shù)量备闲。Quartz要求回調(diào)需要一個(gè)輸入值。

???? 一組浮點(diǎn)數(shù)捅暴。

??? 回調(diào)提供的輸出值的數(shù)量恬砂。

??? 一個(gè)浮點(diǎn)數(shù)組指定每個(gè)顏色成分和透明度。

??? 一個(gè)包含field字段的數(shù)據(jù)結(jié)構(gòu)蓬痒。

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

在你創(chuàng)建CGShading對象后泻骤,必要的話你可以設(shè)置裁剪區(qū)域。調(diào)用CGContextDrawShading使用漸變繪制上下文的裁剪區(qū)域梧奢。當(dāng)你不需要CGShading對象時(shí)狱掂,你需要釋放掉。

?? Painting an Axial Gradient Using a CGShading Object

軸向和徑向的漸變需要執(zhí)行相似的步驟亲轨。這個(gè)例子展示了怎么使用CGShading繪制軸向漸變趋惨,在上下文中創(chuàng)建一個(gè)同心圓的剪裁區(qū)域,然后在裁剪的上下文上繪制漸變惦蚊,如圖效果8-11

?? 步驟:1. 創(chuàng)建一個(gè)CGFunction對象計(jì)算色值

???????????? 2.針對軸向漸變創(chuàng)建一個(gè)CGShading對象

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

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

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

Listing 8-6展示了一個(gè)方法計(jì)算色值通過將數(shù)組里的常量與輸入值相乘器虾。

?在寫好了計(jì)算色值的回調(diào)后,將其打包作為CGFunction對象的一部分蹦锋。


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

裁剪上下文

最后繪制然后釋放

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

//6最后兩個(gè)false 表示起始點(diǎn)不需要填充

??Painting a Radial Gradient Using a CGShading Object?

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

? 不同的是計(jì)算方式不同,創(chuàng)建CGFunction的方法和上面是一樣的莉掂。

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

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


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末葛圃,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子巫湘,更是在濱河造成了極大的恐慌装悲,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尚氛,死亡現(xiàn)場離奇詭異诀诊,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)阅嘶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門属瓣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來载迄,“玉大人,你說我怎么就攤上這事抡蛙』っ粒” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵粗截,是天一觀的道長惋耙。 經(jīng)常有香客問我,道長熊昌,這世上最難降的妖魔是什么绽榛? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮婿屹,結(jié)果婚禮上灭美,老公的妹妹穿的比我還像新娘。我一直安慰自己昂利,他們只是感情好届腐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蜂奸,像睡著了一般犁苏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上窝撵,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天傀顾,我揣著相機(jī)與錄音,去河邊找鬼碌奉。 笑死短曾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的赐劣。 我是一名探鬼主播嫉拐,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼魁兼!你這毒婦竟也來了婉徘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤咐汞,失蹤者是張志新(化名)和其女友劉穎盖呼,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體化撕,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡几晤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了植阴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蟹瘾。...
    茶點(diǎn)故事閱讀 40,040評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡圾浅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出憾朴,到底是詐尸還是另有隱情狸捕,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布众雷,位于F島的核電站灸拍,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏砾省。R本人自食惡果不足惜株搔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望纯蛾。 院中可真熱鬧,春花似錦纵隔、人聲如沸翻诉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碰煌。三九已至,卻和暖如春绅作,著一層夾襖步出監(jiān)牢的瞬間芦圾,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工俄认, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留个少,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓眯杏,卻偏偏與公主長得像夜焦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子岂贩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容