iOS繪制與渲染--圖層屬性

圖層屬性的渲染順序

在渲染處理期間,Core Animaiton持有圖層的不同屬性蒸辆,并按順序渲染這些屬性跟磨。該順序決定了圖層最終的呈現(xiàn)定罢。

幾何屬性

一個圖層的幾何屬性指定它相對于它的父圖層被顯示的方式。幾何屬性頁指定了圖層圓角的半徑以及應(yīng)用到圖層和它的子層的變換淳玩。圖A-1顯示了示例圖層的邊界矩形直撤。

圖層幾何

下面列出的CALayer屬性制定了一個圖層的幾何結(jié)構(gòu):

  • bounds
  • position
  • frame(根據(jù)bounds和position計算得出,該屬性是不是一個可動畫屬性)
  • anchorPoint
  • cornerRadius
  • transform
  • zPosition

注意:cornerRadius屬性僅在iOS 3.0及以上被支持蜕着。

背景屬性

Core Animation首先會渲染圖層的背景谋竖。你可以為背景指定一個顏色。在OS X中承匣,你也可以指定一個應(yīng)用到背景內(nèi)容的Core Image過濾器蓖乘。圖A-2顯示了2個示例圖層的版本。在左邊的圖層設(shè)置了backgroundColor屬性韧骗,而右邊的沒有設(shè)置背景顏色嘉抒。但有一個邊框和一個應(yīng)用在圖層backgroundFilters屬性上的擠壓變形濾鏡。

有背景顏色的圖層

背景濾鏡被應(yīng)用到位于圖層背后的內(nèi)容上袍暴。該內(nèi)容主要是由父圖層的內(nèi)容組成些侍。你可能使用一個背景濾鏡讓前景圖層內(nèi)容突出;比如說容诬,通過應(yīng)用一個模糊濾鏡娩梨。

下面的CALayer屬性會影響圖層的背景顯示:

  • backgroundColor

  • backgroundFilters(iOS不支持此屬性)

注意:在iOS中沿腰,backgroundFilters屬性在CALayer類中是被暴露的,但復(fù)制到該屬性的濾鏡是被忽略的览徒。

圖層內(nèi)容

如果圖層有任何的內(nèi)容,該內(nèi)容將被渲染在背景顏色的上面颂龙。你可以通過直接設(shè)置一副位圖提供圖層內(nèi)容习蓬,或使用一個代理指定內(nèi)容,或是子類化圖層并直接繪制內(nèi)容措嵌。并且你可以使用許多不同的繪圖技術(shù)(包括Quartz躲叼、OpernGL、Quartz合成器)提供內(nèi)容企巢。圖A-3顯示了一個示例圖層枫慷,它的內(nèi)容是通過直接設(shè)置一副位圖。位圖內(nèi)容由一個右下角是一個機(jī)器人圖標(biāo)的大透明空間構(gòu)成浪规。

圖層顯示一副位圖圖片

帶有圓角半徑的圖層不會自動裁剪它們的內(nèi)容或听;然而,設(shè)置圖層的masksToBounds屬性為YES將引起圖層裁減掉圓角以外的內(nèi)容笋婿。

下面的CALayer屬性影響一個圖層的內(nèi)容的顯示:

  • contents
  • contentsGravity
  • masksToBounds

子圖層的內(nèi)容

圖層可能包含一個或更多的孩子圖層誉裆,孩子圖層被稱為子圖層(sublayer)。子圖層被遞歸地渲染并相對于父圖層的邊界矩形進(jìn)行定位缸濒。另外足丢,Core Animation應(yīng)用父圖層的sublayerTransform給每一個子圖層粱腻,sublayerTransform相對于父圖層的錨點(diǎn)。你可以使用子圖層變換應(yīng)用透視斩跌,應(yīng)用于所有圖層的其他效果也是一樣的绍些。圖A-4顯示了一個含有2個子圖層的示例圖層。左邊的版本包含了背景顏色滔驶,右邊的版本沒有背景顏色遇革。

顯示子層內(nèi)容的圖層

設(shè)置圖層的masktSToBounds屬性為YES將引起超出圖層邊界的任何子圖層被裁減掉。

下面的CALayer屬性將影響一個圖層的子圖層的顯示:

  • sublayers
  • masksToBounds
  • sublayerTransform

邊框?qū)傩?/h4>

一個圖層可以使用一個指定的顏色和寬顯示一個可選的邊框揭糕。邊框按照圖層的邊界矩形萝快,并會將圓角半徑值考慮進(jìn)去。圖A-5顯示了一個添加了邊框的示例圖層著角。

顯示邊框?qū)傩詢?nèi)容的圖層

下面的CALayer屬性將影響圖層邊框的顯示

  • borderColor
  • borderWidth

平臺注意點(diǎn):borderColor和borderWidth屬性僅在iOS 3.0及以上得到支持

濾鏡屬性

在OS X平臺揪漩,或許你可能為圖層內(nèi)容應(yīng)用濾鏡效果。使用自定義的合成濾鏡指定圖層的內(nèi)容與它的底部圖層內(nèi)容的混合方法吏口。圖A-6顯示了一個應(yīng)用了Core Image的分色器濾鏡圖層奄容。

顯示濾鏡屬性的圖層

下面的CALayer屬性指定一個圖層內(nèi)容的濾鏡:

  • filters
  • compositingFilter

平臺注意點(diǎn):在iOS中,圖層忽略任何你賦值給他的濾鏡值

陰影屬性

圖層可以顯示陰影效果产徊,并且可以配置陰影的形狀昂勒、透明度、偏移舟铜、模糊半徑戈盈。如果你不指定一個自定義的陰影形狀,陰影是在圖層的部分基礎(chǔ)上谆刨,陰影并不是完全透明的塘娶。圖A-7顯示了相同圖層應(yīng)用紅色陰影的多種不同版本的結(jié)果。

左邊和中間的版本包含一個背景顏色痊夭,所以陰影僅是顯示在圖層邊框的周圍刁岸。然而,右邊的版本不包括背景顏色她我,在這種情況下虹曙,陰影將應(yīng)用于圖層的內(nèi)容、邊框以及子圖層番舆。

顯示陰影屬性的圖層

下面的CALayer屬性影響圖層陰影的顯示:

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius
  • shaodwPath

平臺注意點(diǎn):shadowColor酝碳、shadowOffest、shadowOpacity和shadowRedius屬性在iOS3.2+中才得到支持合蔽。shadowPath屬性在iOS3.2及以上得到支持击敌,OS X中10.7及以上得以支持。

不透明度屬性

一個圖層的不透明度屬性決定了多少背景內(nèi)容透過圖層被顯示拴事。圖A-8顯示了一個示例圖層沃斤,它的不透明度被設(shè)置為0.5圣蝎。這將允許部分背景圖片穿透顯示出來。

包含不透明度屬性的圖層

下面的CALyaer屬性指定圖層的不透明度:

  • opacity

蒙版屬性

你可以使用一個蒙版遮蔽所有或部分圖層內(nèi)容衡瓶。蒙版本身是一個圖層對象徘公,它的alpha通道被用于決定被遮蔽的內(nèi)容和被透射的內(nèi)容。蒙版圖層內(nèi)容的不透明區(qū)域允許下方的圖層內(nèi)容穿透顯示 而透明區(qū)域部分或完全地遮蔽了下方的內(nèi)容(類似于PS里面的蒙版白的為顯示區(qū)域哮针,黑的為隱藏區(qū)域)关面。圖A-9顯示了由一個蒙版圖層和兩個不同的背景合成的示例圖層。左邊的版本十厢,圖層的透明度設(shè)置為1.0等太。右邊的版本,涂層的透明度為0.5蛮放,導(dǎo)致穿透圖層蒙版部分的背景內(nèi)容數(shù)量減少缩抡。

合成蒙版屬性的圖層

下面的CALayer屬性用于指定一個圖層的蒙版

  • mask

平臺注意:蒙版屬性在iOS3.0及以上版本得以支持

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市包颁,隨后出現(xiàn)的幾起案子瞻想,更是在濱河造成了極大的恐慌,老刑警劉巖娩嚼,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蘑险,死亡現(xiàn)場離奇詭異,居然都是意外死亡岳悟,警方通過查閱死者的電腦和手機(jī)佃迄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來竿音,“玉大人和屎,你說我怎么就攤上這事拴驮〈核玻” “怎么了?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵套啤,是天一觀的道長宽气。 經(jīng)常有香客問我,道長潜沦,這世上最難降的妖魔是什么萄涯? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮唆鸡,結(jié)果婚禮上涝影,老公的妹妹穿的比我還像新娘。我一直安慰自己争占,他們只是感情好燃逻,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布序目。 她就那樣靜靜地躺著,像睡著了一般伯襟。 火紅的嫁衣襯著肌膚如雪猿涨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天姆怪,我揣著相機(jī)與錄音叛赚,去河邊找鬼。 笑死稽揭,一個胖子當(dāng)著我的面吹牛俺附,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播溪掀,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼昙读,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了膨桥?” 一聲冷哼從身側(cè)響起蛮浑,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎只嚣,沒想到半個月后沮稚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡册舞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年蕴掏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片调鲸。...
    茶點(diǎn)故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡盛杰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出藐石,到底是詐尸還是另有隱情即供,我是刑警寧澤,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布于微,位于F島的核電站逗嫡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏株依。R本人自食惡果不足惜驱证,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望恋腕。 院中可真熱鬧抹锄,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至车份,卻和暖如春谋减,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背扫沼。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工出爹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缎除。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓严就,卻偏偏與公主長得像,于是被迫代替她去往敵國和親器罐。 傳聞我的和親對象是個殘疾皇子梢为,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,606評論 2 350

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