高級(jí)動(dòng)畫學(xué)習(xí)心得筆記(六)專用圖層

6.1 CAShapeLayer

CAShapeLayer是一個(gè)通過矢量圖形而不是bitmap來繪制的圖層子類科雳。指定諸如顏色和線寬等屬性骡男,用CGPath來定義想要繪制的圖形判导,最后CAShapeLayer就自動(dòng)渲染出來了稽亏。當(dāng)然疙筹,你也可以用Core Graphics直接向原始的CALayer的內(nèi)容中繪制一個(gè)路徑富俄,相比之下,使用CAShapeLayer有以下一些優(yōu)點(diǎn):

. 渲染快速而咆。CAShapeLayer使用了硬件加速霍比,繪制同一圖形會(huì)比用Core Graphics快很多。

. 高效使用內(nèi)存暴备。一個(gè)CAShapeLayer不需要像普通CALayer一樣創(chuàng)建一個(gè)寄宿圖形悠瞬,所以無論有多大,都不會(huì)占用太多的內(nèi)存涯捻。

. 不會(huì)被圖層邊界剪裁掉浅妆。一個(gè)CAShapeLayer可以在邊界之外繪制,你的圖層路徑不會(huì)像在使用Core Graphics的普通CALayer一樣被剪裁掉障癌。

. 不會(huì)出現(xiàn)像素化凌外。當(dāng)你給CAShapeLayer做3D變換時(shí),它不像一個(gè)有寄宿圖的普通圖層一樣變得像素化涛浙。

6.1.1 創(chuàng)建一個(gè)CGPath

CAShapeLayer可以用來繪制所有能夠通過CGPath來表示的形狀康辑。這個(gè)形狀不一定要閉合,圖層路徑也不一定要不可破轿亮,事實(shí)上你可以在一個(gè)圖層上繪制好幾個(gè)不同的形狀疮薇。你可以控制一些屬性比如lineWidth(線寬,用點(diǎn)表示單位)我注,lineCap(線條結(jié)尾的樣式),lineJoin(線條之間的結(jié)合點(diǎn)的樣子)惦辛;但是在圖層層面你只有一次機(jī)會(huì)設(shè)置這些屬性。如果你想用不同顏色或風(fēng)格來繪制多個(gè)形狀仓手,就不得不每個(gè)形狀準(zhǔn)備一個(gè)圖層了胖齐。

6.1.2 圓角

通過使用CAShapeLayer創(chuàng)建圓角有一個(gè)優(yōu)勢(shì)就是可以單獨(dú)制定每個(gè)角的形狀

我們創(chuàng)建圓角矩形其實(shí)就是人工繪制單獨(dú)的直線和弧度,但是事實(shí)上UIBezierPath有自動(dòng)繪制圓角矩形的構(gòu)造方法嗽冒。

如果我們可以通過這個(gè)圖層路徑繪制一個(gè)既有直角又有圓角的視圖呀伙。如果我們想依照此圖形來剪裁視圖內(nèi)容,我們可以把CAShapeLayer作為視圖的宿主圖層(即設(shè)置為圖層的mask屬性)添坊,而不是添加一個(gè)子圖層(圖層蒙版的詳細(xì)解釋見第四章中的“視角效果”);

CAShapeLayer Demo

6.2 CATextLayer

6.2.1 CATextLayer

Core Animation提供了一個(gè)CALayer的子類CATextLayer剿另,它以圖層的姓氏包含了UILabel幾乎所有的繪制特性,并且額外提供了一些新的特性。

CATextLayer要比UILabel渲染快得多雨女。在ios6以及之前的版本谚攒,UILabel其實(shí)是通過WebKit來實(shí)現(xiàn)繪制的,這樣就造成了當(dāng)有很多文字的時(shí)候就會(huì)有極大的性能壓力氛堕,而CATextLayer使用了Core Text馏臭,性能消耗小,并且渲染得非乘现桑快括儒。

若CATextLayer未設(shè)置contentsScale屬性,有可能會(huì)出現(xiàn)文本像素化的問題锐想,因?yàn)樗]有以Retina的方式渲染帮寻,contentsScale并不關(guān)心屏幕的拉伸因素默認(rèn)值為1.0。所以赠摇,我們?cè)赗eatina屏幕上顯示文字的時(shí)候固逗,需要手動(dòng)設(shè)置CATextLayer的contentsScale屬性,如下

textLayer.contentsScale = [UIScreen mainScreen].scale;

CATextLayer的font屬性不是一個(gè)UIFont類型藕帜,而是一個(gè)CFTypeRef類型烫罩,這樣可以根據(jù)你的具體需要來決定字體屬性應(yīng)該用CGFontRef類型還是CGFontRef類型(Core Text字體)。同時(shí)字體大小是用fontSize屬性單獨(dú)設(shè)置的耘戚,因?yàn)镃GFontRef和CGFontRef并不像UIFont一樣包含點(diǎn)大小嗡髓。

另外操漠,CATextLayer的string屬性并不是NSString類型收津,而是id類型。這樣你既可以用NSString也可以用NSAttributedString來指定文本了(注意浊伙,NSAttributedString并不是NSString的子類)撞秋。屬性花字符串是ios用來渲染字體風(fēng)格的機(jī)制,它以特定的方式來決定指定范圍內(nèi)的字符串的原始信息嚣鄙,比如字體吻贿、顏色、字重哑子、斜體等舅列。

6.2.2 富文本

ios6開始,Apple給UILabel和其它UIKit文本視圖添加了直接的屬性花字符串的支持卧蜓,應(yīng)該說這是一個(gè)很方便的特性帐要。但在這之前,ios3.2開始弥奸,CATextLayer就已經(jīng)支持屬性化字符串了榨惠,這樣的話,如果你想要支持更低版本的ios系統(tǒng),CATextLayer無疑是你向界面中增加富文本的好辦法赠橙,而且也不用去跟負(fù)責(zé)的Core Text打交道耽装,也省了用UIWebview的麻煩。

Demo中為了掩飾ios5及以下版本期揪,使用的是Core Text掉奄,所以需要把Core Text framework添加到項(xiàng)目中。

6.2.3 行距和字距

由于繪制的實(shí)現(xiàn)機(jī)制不同(Core Text和WebKit),用CATextLayer渲染和用UILabel渲染出的文本行距和字距也是不盡相同的横侦。

二者的差異程度(由使用的字體和字符決定)總體來說挺小挥萌,但是如果你想正確的顯示普通便簽和CATextLayer就一定要記住這一點(diǎn)

6.2.4 UILabel的替代品

由于CATextLayer有著比UILabel更好的性能表現(xiàn),我們可以使用CATextLayer作為UILabel的替代品枉侧,具體步驟如下:

(1).繼承于UILabel引瀑,并且實(shí)現(xiàn)awakeFromNib方法,這樣就可以使用Interface Builder創(chuàng)建榨馁;

(2).重寫+layerClass方法憨栽,返回一個(gè)CATextLayer類型的宿主圖層。

(3).重寫UILable中的各種屬性翼虫,將它們賦值給CATextLayer屑柔。

如demo中所示,我們的文本并沒有像素化珍剑,這是因?yàn)镃ATextLayer作為宿主圖層自動(dòng)設(shè)置了contentsScale屬性掸宛。

CATextLayerDemo?


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市招拙,隨后出現(xiàn)的幾起案子唧瘾,更是在濱河造成了極大的恐慌,老刑警劉巖别凤,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件饰序,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡规哪,警方通過查閱死者的電腦和手機(jī)求豫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诉稍,“玉大人蝠嘉,你說我怎么就攤上這事”蓿” “怎么了蚤告?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)舔箭。 經(jīng)常有香客問我罩缴,道長(zhǎng)蚊逢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任箫章,我火速辦了婚禮烙荷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘檬寂。我一直安慰自己终抽,他們只是感情好检盼,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布囚霸。 她就那樣靜靜地躺著色乾,像睡著了一般催训。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尽棕,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天薪寓,我揣著相機(jī)與錄音且改,去河邊找鬼女蜈。 笑死持舆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伪窖。 我是一名探鬼主播逸寓,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼覆山!你這毒婦竟也來了竹伸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤簇宽,失蹤者是張志新(化名)和其女友劉穎勋篓,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晦毙,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡生巡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年耙蔑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了见妒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甸陌,死狀恐怖须揣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情钱豁,我是刑警寧澤耻卡,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站牲尺,受9級(jí)特大地震影響卵酪,放射性物質(zhì)發(fā)生泄漏幌蚊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一溃卡、第九天 我趴在偏房一處隱蔽的房頂上張望溢豆。 院中可真熱鬧,春花似錦瘸羡、人聲如沸漩仙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽队他。三九已至,卻和暖如春峻村,著一層夾襖步出監(jiān)牢的瞬間麸折,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來泰國打工粘昨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留磕谅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓雾棺,卻偏偏與公主長(zhǎng)得像膊夹,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子捌浩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

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