iOS 13:抽屜效果电湘、Quartz2D、圖形繪制實例

抽屜效果

  • 實現(xiàn)抽屜效果鹅经,盡量不要使用touchMoved:寂呛,因為touchMoved:不能添加到UITableView中,故盡量使用手勢pan瘾晃。
  • 經(jīng)過驗證贷痪,上下滑動實現(xiàn)UITableView表格cell的上下滑動。當(dāng)pan手勢有一定角度時候蹦误,會觸發(fā)抽屜效果劫拢。
  • KVO
    // 利用KVO時刻監(jiān)聽mainV的frame屬性
    // Observer:觀察者 誰想監(jiān)聽
    // KeyPath:監(jiān)聽的屬性
    // options:監(jiān)聽新值的改變
    [_mainV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
  • 設(shè)計原理:如果A控制器的view成為B控制View的子控件,注意A控制器一定要成為B控制器的子控制器强胰。使用addChildViewController:舱沧。

Quartz2D

  • 是一個二維繪圖引擎,MAC OSX 與 iOS 都能通用
  • Quartz2D的API是純C語言的
  • 圖形上下文偶洋,類似于畫板 - 內(nèi)存緩存
圖片 1.png
  • 圖形上下文(Graphics Context):是一個CGContextRef類型的數(shù)據(jù)熟吏。只能獲取引用,不能夠重新實例化。
// 繪圖的步驟: 1.獲取上下文 2.創(chuàng)建路徑(描述路徑) 3.把路徑添加到上下文 4.渲染上下文
// 通常在這個方法里面繪制圖形
// 為什么要再drawRect里面繪圖牵寺,只有在這個方法里面才能獲取到跟View的layer相關(guān)聯(lián)的圖形上下文
// 什么時候調(diào)用:當(dāng)這個View要顯示的時候才會調(diào)用drawRect繪制圖形悍引,
// 注意:rect是當(dāng)前控件的bounds
- (void)drawRect:(CGRect)rect {
    // 如何繪制曲線
    // 原生繪制方法
    // 獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 描述路徑
    // 設(shè)置起點
    CGContextMoveToPoint(ctx, 50, 50);
    // cpx:控制點的x
    CGContextAddQuadCurveToPoint(ctx, 150, 20, 250, 50);
    // 渲染上下文
    CGContextStrokePath(ctx);
}
  • 什么時候調(diào)用drawRect:只有需要顯示的時候才會調(diào)用,調(diào)用順序如下:

    • viewDidLoad:
    • viewWillAppear:
    • drawRect:
    • viewDidAppear:
  • drawRect:不能手動調(diào)用帽氓,因為圖形上下文創(chuàng)建不了趣斤,只能由系統(tǒng)幫我們創(chuàng)建,并且傳遞給我們黎休。系統(tǒng)調(diào)用drawRect:步驟:

    • 1.創(chuàng)建上下文
    • 2.調(diào)用drawRect:
    • 3.傳遞上下文給drawRect:
  • 但是在其他方法中可以調(diào)用:[self setNeedsDisplay]或者setNeedsDisplayInRect:浓领,此函數(shù)是等屏幕刷新的時候調(diào)用drawRect:

  • View之所以能顯示東西,完全是因為它內(nèi)部的layer奋渔。View內(nèi)部有個layer(圖層)屬性镊逝,drawRect:方法中取得的是一個Layer Graphics Context,因此嫉鲸,繪制的東西其實是繪制到view的layer上去了

項目:基本圖形繪制

  • 繪制方法3種

    • 1.C語言底層繪制
      • 獲取圖形上下文
      • 描述路徑:添加路徑,并設(shè)置路徑屬性歹啼、狀態(tài)
      • 將路徑添加至上下文中
      • 渲染上下文
    • 2.C語言快速繪制
      • 獲取上下文
      • 直接使用簡便函數(shù)描述路徑玄渗,省去了將路徑添加至上下文中,但是底層調(diào)用第1種方法狸眼。
      • 渲染上下文
    • 3.objc封裝繪制 貝瑟爾路徑
      • 創(chuàng)建貝瑟爾路徑
      • 描述路徑
      • 渲染路徑
  • 繪制曲線
    http://donbe.blog.163.com/blog/static/138048021201052093633776/

2313724308561861661.gif
  • 貝瑟爾路徑繪制方式:
    • 1.stroke 描邊藤树,如果有寬度,內(nèi)部則為空心
    • 2.fill 對于一個封閉的圖形拓萌,繪制一個實心
    • 3.closePath岁钓,連接首尾,成為一個封閉圖形

項目:畫餅圖微王、柱狀圖

  • rgb顏色屡限,正常情況下取值是: 0 ~ 255,但是在objc中取值是:0 ~ 1
  • 注意:一般的圖形都會有封裝好的框架炕倘,不需要自己手動從0使用Quartz2D 進行繪制钧大。

項目:繪制文字和圖片

  • 在UIKit framework的第一個文件 NSAttributedStrings.h,包含了富文本屬性罩旋。UILable具有attributedText屬性啊央,創(chuàng)建富文本字符串并賦予給attributeText,可以設(shè)置文字狀態(tài)涨醋。
  • [UILable * , sizeToFit]瓜饥,只能計算普通文本。
  • drawAtPoint 不會換行浴骂,drawAtRect乓土,在這個設(shè)置的Rect中可以換行。
  • UIRectClip 裁剪顯示區(qū)域Rect靠闭,渲染的路徑就放在裁剪的Rect中帐我。
  • 圖片本身也有尺寸坎炼,比如屬性:image.size.width。
  • 繪制圖形如下:
- (void)drawRect:(CGRect)rect {
    // 超出裁剪區(qū)域的內(nèi)容全部裁剪掉
    // 注意:裁剪必須放在繪制之前
    UIRectClip(CGRectMake(0, 0, 50, 50));
    
    UIImage *image = [UIImage imageNamed:@"001"];
    
    // 默認繪制的內(nèi)容尺寸跟圖片尺寸一樣大
//    [image drawAtPoint:CGPointZero];
//    [image drawInRect:rect];
    // 繪圖
    [image drawAsPatternInRect:rect];

項目:定時器(雪花)

  • 使用定時器每隔一段時間更新雪花的位置
  • 使用NSTimer拦键,流暢性不好谣光,因為調(diào)用優(yōu)先級不高,并不會準時調(diào)用芬为,手機CPU空閑時調(diào)度萄金。故很少用于繪圖。
  • 使用CADisplayLink媚朦,將其添加至主運行循環(huán)中氧敢,addToRunLoop:。每次屏幕刷新的時候調(diào)用询张,屏幕一般1S中刷新60次孙乖。
  • [self setNeedsDisplay];注意:這個方法并不會馬上調(diào)用drawRect,其實這個方法只是給當(dāng)前控件添加刷新的標(biāo)記,等下一次屏幕刷新的時候才會調(diào)用drawRect份氧。

項目:圖形上下文狀態(tài)棧唯袄、圖形上下文矩陣操作

  • 圖形上下文的路徑的部分狀態(tài),是一個棧蜗帜,設(shè)置一次恋拷,共同享有。有時需要一開始保存好最純凈的路徑狀態(tài)厅缺,當(dāng)再次使用時候restore還原蔬顾。
  • 貝瑟爾路徑的狀態(tài),屬于路徑單獨擁有的湘捎。
  • 路徑之間的相互轉(zhuǎn)化
    // 把路徑添加到上下文
    // .CGPath 可以UIkit的路徑轉(zhuǎn)換成CoreGraphics路徑
    CGContextAddPath(ctx, path.CGPath);
  • 圖形上下文诀豁,相當(dāng)于內(nèi)存緩沖區(qū)。
  • 矩陣操作:平移消痛、縮放且叁、旋轉(zhuǎn)
  • 注意:矩陣操作必須要在添加路徑之前。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末秩伞,一起剝皮案震驚了整個濱河市逞带,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纱新,老刑警劉巖展氓,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異脸爱,居然都是意外死亡遇汞,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來空入,“玉大人络它,你說我怎么就攤上這事⊥嵊” “怎么了化戳?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長埋凯。 經(jīng)常有香客問我点楼,道長,這世上最難降的妖魔是什么白对? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任掠廓,我火速辦了婚禮,結(jié)果婚禮上甩恼,老公的妹妹穿的比我還像新娘蟀瞧。我一直安慰自己,他們只是感情好媳拴,可當(dāng)我...
    茶點故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布黄橘。 她就那樣靜靜地躺著,像睡著了一般屈溉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抬探,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天子巾,我揣著相機與錄音,去河邊找鬼小压。 笑死线梗,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的怠益。 我是一名探鬼主播仪搔,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蜻牢!你這毒婦竟也來了烤咧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤抢呆,失蹤者是張志新(化名)和其女友劉穎煮嫌,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抱虐,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡昌阿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片懦冰。...
    茶點故事閱讀 40,444評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡灶轰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出刷钢,到底是詐尸還是另有隱情笋颤,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布闯捎,位于F島的核電站椰弊,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瓤鼻。R本人自食惡果不足惜秉版,卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茬祷。 院中可真熱鬧清焕,春花似錦、人聲如沸祭犯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沃粗。三九已至粥惧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間最盅,已是汗流浹背突雪。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留涡贱,地道東北人咏删。 一個月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像问词,于是被迫代替她去往敵國和親督函。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,455評論 2 359

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

  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果激挪,一方面得益于成功系統(tǒng)的設(shè)計辰狡,另一方面得益...
    韓七夏閱讀 2,734評論 2 10
  • 轉(zhuǎn)載:http://www.reibang.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,220評論 0 13
  • 每個UIView有一個伙伴稱為layer,一個CALayer灌灾。UIView實際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,113評論 0 17
  • Quartz2D以及drawRect的重繪機制字數(shù)1487 閱讀21 評論1 喜歡1一搓译、什么是Quartz2D Q...
    PurpleWind閱讀 775評論 0 3
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜锋喜,今天將帶大家一窺ios動畫全貌些己。在這里你可以看...
    每天刷兩次牙閱讀 8,514評論 6 30