Quartz 2D編程指南之七:陰影

本文轉(zhuǎn)載自:http://southpeak.github.io/2014/12/05/quartz2d-7/

陰影是繪制在一個(gè)圖形對(duì)象下的且有一定偏移的圖片皆愉,它用于模擬光源照射到圖形對(duì)象上所形成的陰影效果嗜价,如果7-1所示。文本也可以有陰影幕庐。陰影可以讓一幅圖像看上去是立體的或者是浮動(dòng)的久锥。

Figure 7-1 A shadow

陰影有三個(gè)屬性:

x偏移值,用于指定陰影相對(duì)于圖片在水平方向上的偏移值异剥。

y偏移值瑟由,用于指定陰影相對(duì)于圖片在豎直方向上的偏移值。

模糊(blur)值冤寿,用于指定圖像是有一個(gè)硬邊(hard edge歹苦,如圖7-2左邊圖片所示),還是一個(gè)漫射邊(diffuse edge督怜,如圖7-1右邊圖片所示)

本章將描述陰影是如何工作的及如何用Quartz 2D API來(lái)創(chuàng)建陰影暂氯。

Figure 7-2 A shadow with no blur and another with a soft edge

陰影是如何工作的

Quartz中的陰影是圖形狀態(tài)的一部分。我們可以調(diào)用函數(shù)CGContextSetShadow來(lái)創(chuàng)建亮蛔,并傳入一個(gè)圖形上下文、偏移值及模糊值擎厢。陰影被設(shè)置后究流,任何繪制的對(duì)象都有一個(gè)陰影,且該陰影在設(shè)備RGB顏色空間中呈現(xiàn)出黑色的且alpha值為1/3动遭。換句話說(shuō)芬探,陰影是用RGBA值{0, 0, 0, 1.0/3.0}設(shè)置的。

我們可以調(diào)用函數(shù)CGContextSetShadowWithColor來(lái)設(shè)置彩色陰影厘惦,并傳遞一個(gè)圖形上下文偷仿、 偏移值哩簿、模糊值有CGColor顏色對(duì)象。顏色值依賴于顏色空間酝静。

如何在調(diào)用CGContextSetShadow或CGContextSetShadowWithColor之前保存了圖形狀態(tài)节榜,我們可以通過(guò)恢復(fù)圖形狀態(tài)來(lái)關(guān)閉陰影。我們也可以通過(guò)設(shè)置陰影顏色為NULL來(lái)關(guān)閉陰影别智。

基于圖形上下文的陰影繪制慣例

偏移值指定了陰影相對(duì)于相關(guān)圖像的位置宗苍。這些偏移值由圖形上下文來(lái)描述,并用于計(jì)算陰影的位置:

一個(gè)正值的x偏移量指定陰影位于圖形對(duì)象的右側(cè)薄榛。

在Mac OS X中讳窟,正值的y指定陰影位于圖形對(duì)象的上邊,這與Quartz 2D默認(rèn)的坐標(biāo)值匹配敞恋。

在iOS中丽啡,如果我們用Quartz 2D API來(lái)創(chuàng)建PDF或者位圖圖形上下文,則正值的y指定陰影位于圖形對(duì)象的上邊硬猫。

在iOS中补箍,如果圖形上下文是由UIKit創(chuàng)建的,則正值的y指定陰影位于圖形對(duì)象的下邊浦徊。這與UIKit坐標(biāo)系統(tǒng)相匹配馏予。

陰影繪制慣例不受CTM影響

繪制陰影

按照如下步驟來(lái)繪制陰影

保存圖形狀態(tài)

調(diào)用函數(shù)CGContextSetShadow,傳遞相應(yīng)的值

使用陰影繪制所有的對(duì)象

恢復(fù)圖形狀態(tài)

按照如下步驟來(lái)繪制彩色陰影

保存圖形狀態(tài)

創(chuàng)建一個(gè)CGColorSpace對(duì)象盔性,確保Quartz能正確地解析陰影顏色

創(chuàng)建一個(gè)CGColor對(duì)象來(lái)指定陰影的顏色

調(diào)用CGContextSetShadowWithColor霞丧,并傳遞相應(yīng)的值

使用陰影繪制所有的對(duì)象

恢復(fù)圖形狀態(tài)

圖7-3顯示了兩個(gè)帶有陰影的矩形,其中一個(gè)是彩色陰影冕香。

Figure 7-3 A colored shadow and a gray shadow

列表清單顯示了如何創(chuàng)建圖7-3中的圖像蛹尝。

Listing 7-1 A function that sets up shadows

void MyDrawWithShadows(CGContextRef myContext,floatwd,floatht);

{

CGSize? ? ? ? ? myShadowOffset = CGSizeMake (-15,20);

floatmyColorValues[] = {1,0,0,.6};

CGColorRef? ? ? myColor;

CGColorSpaceRef myColorSpace;

CGContextSaveGState(myContext);

CGContextSetShadow (myContext, myShadowOffset,5);

// Your drawing code here

CGContextSetRGBFillColor (myContext,0,1,0,1);

CGContextFillRect (myContext, CGRectMake (wd/3+75, ht/2, wd/4, ht/4));

myColorSpace = CGColorSpaceCreateDeviceRGB ();

myColor = CGColorCreate (myColorSpace, myColorValues);

CGContextSetShadowWithColor (myContext, myShadowOffset,5, myColor);

// Your drawing code here

CGContextSetRGBFillColor (myContext,0,0,1,1);

CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));

CGColorRelease (myColor);

CGColorSpaceRelease (myColorSpace);

CGContextRestoreGState(myContext);

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市悉尾,隨后出現(xiàn)的幾起案子突那,更是在濱河造成了極大的恐慌,老刑警劉巖构眯,帶你破解...
    沈念sama閱讀 221,576評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件愕难,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡惫霸,警方通過(guò)查閱死者的電腦和手機(jī)猫缭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)壹店,“玉大人猜丹,你說(shuō)我怎么就攤上這事」杪” “怎么了射窒?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,017評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵藏杖,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我脉顿,道長(zhǎng)蝌麸,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,626評(píng)論 1 296
  • 正文 為了忘掉前任弊予,我火速辦了婚禮祥楣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘汉柒。我一直安慰自己误褪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,625評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布碾褂。 她就那樣靜靜地躺著兽间,像睡著了一般。 火紅的嫁衣襯著肌膚如雪正塌。 梳的紋絲不亂的頭發(fā)上嘀略,一...
    開(kāi)封第一講書(shū)人閱讀 52,255評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音乓诽,去河邊找鬼帜羊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鸠天,可吹牛的內(nèi)容都是我干的讼育。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼稠集,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼奶段!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起剥纷,我...
    開(kāi)封第一講書(shū)人閱讀 39,729評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤痹籍,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后晦鞋,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蹲缠,經(jīng)...
    沈念sama閱讀 46,271評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,363評(píng)論 3 340
  • 正文 我和宋清朗相戀三年悠垛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了线定。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,498評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鼎文,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出因俐,到底是詐尸還是另有隱情拇惋,我是刑警寧澤周偎,帶...
    沈念sama閱讀 36,183評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站撑帖,受9級(jí)特大地震影響蓉坎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胡嘿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,867評(píng)論 3 333
  • 文/蒙蒙 一蛉艾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧衷敌,春花似錦勿侯、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,338評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至面氓,卻和暖如春兵钮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背舌界。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,458評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工掘譬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人呻拌。 一個(gè)月前我還...
    沈念sama閱讀 48,906評(píng)論 3 376
  • 正文 我出身青樓葱轩,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親柏锄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子酿箭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,507評(píng)論 2 359

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