iOS 14:Quartz2D 的深入應(yīng)用:圖片操作、畫(huà)板

項(xiàng)目:圖片水印

  • 獲取上下文票摇,之前的上下文都是在view的drawRect 方法中獲染行(跟view的layer相關(guān)聯(lián)的上下文)
  • 怎么獲取位圖上下文,注意位圖上下文的獲取方式跟layer上下文不一樣矢门,需要我們手動(dòng)創(chuàng)建盆色。
  • 步驟:
    • 1.開(kāi)啟一個(gè)位圖上下文
    • 2.繪制原生的圖片
    • 3.給原生的圖片添加文字
    • 4.生成一張圖片給我們,從上下文中獲取圖片
    • 5.關(guān)閉上下文
    // 開(kāi)啟一個(gè)位圖上下文祟剔,注意位圖上下文跟view無(wú)關(guān)聯(lián)隔躲,所以不需要在drawRect.
    // size:位圖上下文的尺寸(新圖片的尺寸)
    // opaque: 不透明度 YES:不透明 NO:透明,通常我們一般都弄透明的上下文
    // scale:通常不需要縮放上下文物延,取值為0宣旱,表示不縮放
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);

圖片裁剪

把正方性圖片重新生產(chǎn)一張圓形的圖片
  • 初始的畫(huà)板上面沒(méi)有任何東西,是創(chuàng)建一個(gè)又一個(gè)路徑并往上面添加
  • 步驟:
    • 1.加載圖片
    • 2.開(kāi)啟位圖上下文叛薯,跟圖片尺寸一樣大
    • 3.設(shè)置原型裁剪區(qū)域浑吟,正切于圖片笙纤。創(chuàng)建原型的路徑,并把路徑設(shè)置為裁剪區(qū)域组力。
    • 4.繪制圖片
    • 5.從上下文中獲取圖片
    • 6.關(guān)閉上下文
  • 注意:在裁剪區(qū)域之前設(shè)置圓環(huán)省容。
  • 使用分類(lèi),抽取代碼方法:返回裁剪的圖片燎字⌒冉罚可為UIImage 類(lèi)增加額外的方法,將代碼封裝起來(lái)轩触,復(fù)用寞酿。

屏幕截圖

用于分享圖片內(nèi)容家夺,炫耀裝B
  • 步驟
    • 1.開(kāi)啟位圖上下文
    • 2.獲取上下文
    • 3.將控件上的圖層渲染到上下文脱柱,layer只能渲染,不能繪制拉馋。但是字符串以及圖片均可以繪制榨为。
    • 4.生成一張圖片
    • 5.關(guān)閉上下文
  • 將圖片保存到本地文件,并沒(méi)有直接的對(duì)象方法可以調(diào)用煌茴,需要將其轉(zhuǎn)化為NSData随闺,再寫(xiě)入文件,代碼如下
    // image轉(zhuǎn)data
    // compressionQuality: 圖片質(zhì)量 1:最高質(zhì)量
    // PNG的圖片質(zhì)量較為清晰蔓腐,JPEG次之矩乐。
    NSData *data = UIImageJPEGRepresentation(image,1);
    [data writeToFile:@"/Users/xiaomage/Desktop/view.png" atomically:YES];
  • 抽取代碼:返回屏幕截圖后的圖片,為UIImage 類(lèi)增加額外的功能回论。

圖片截取散罕、圖片擦除

  • 圖片截取步驟:
    • 給控制器的view 添加一個(gè) pan 手勢(shì)
    • pan 行為發(fā)生的時(shí)候進(jìn)入處理函數(shù)
    • 一開(kāi)始拖動(dòng)的時(shí)候
      • 獲取一開(kāi)始觸摸點(diǎn)
    • 一直拖動(dòng)的時(shí)候
      • 獲取結(jié)束點(diǎn)
      • 獲取截取范圍
      • 生成截屏的view,并將其添加至view中
    • 拖動(dòng)結(jié)束的時(shí)候
      • 開(kāi)啟上下文
      • 設(shè)置裁剪區(qū)域
      • 獲取上下文
      • 把控件上的內(nèi)容渲染到上下文
      • 生成一張新的圖片
      • 關(guān)閉上下文
      • 移除截屏的view
  • 圖片擦除代碼如下:
- (void)pan:(UIPanGestureRecognizer *)pan
{
    // 獲取當(dāng)前點(diǎn)
    CGPoint curP = [pan locationInView:self.view];
    // 獲取擦除的矩形范圍
    CGFloat wh = 100;
    CGFloat x = curP.x - wh * 0.5;
    CGFloat y = curP.y - wh * 0.5;
    CGRect rect = CGRectMake(x, y, wh, wh);
   // 開(kāi)啟上下文
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 控件的layer渲染上去
    [_imageView.layer renderInContext:ctx];
    // 擦除圖片
    CGContextClearRect(ctx, rect);
    // 生成一張圖片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    _imageView.image = image;
    
    // 關(guān)閉上下文
    UIGraphicsEndImageContext(); 
}

手勢(shì)解鎖

  • 按鈕的選中狀態(tài)與高亮狀態(tài)是不一樣的傀蓉。分別為:UIControlStateSelected\UIControlStateHighlighted欧漱。高亮狀態(tài)是按鈕點(diǎn)擊時(shí)候發(fā)生的,選擇狀態(tài)可以代碼設(shè)置葬燎。
  • 為什么要在- (void)layoutSubviews布局子控件误甚,因?yàn)橹灰徽{(diào)用這個(gè)方法,就表示父控件的尺寸確定谱净。
  • 從storyboard上也可以創(chuàng)建手勢(shì)窑邦,總共有7個(gè)。

項(xiàng)目:畫(huà)板

  • 搭建界面
    • 使用toolBar 控件壕探,添加UIBarButtonItem 模型冈钦。可以方便的對(duì)其內(nèi)容進(jìn)行布局管理浩蓉。
    • 使用Flexible Bar Button Item 放在 UIBarButtonItem 之前派继,在toolBar控件frame改變的時(shí)候宾袜,起到一個(gè)彈簧的作用。
  • 在 awakeFromNib:以及initWithFrame:都要進(jìn)行初始化設(shè)置驾窟,具有更好的擴(kuò)展性庆猫。
  • 在使用drawRect:方法重新繪制屏幕時(shí),可以將貝瑟爾路徑定義在外面绅络,然后在drawRect:中執(zhí)行:[path stroke]方法也可月培。
  • 只要調(diào)用drawRect:方法,就會(huì)把之前的內(nèi)容全部清空恩急。
  • UIImagePickerController 系統(tǒng)相冊(cè)控制器
    • 通過(guò)設(shè)置控制器的來(lái)源:可以有相冊(cè)集\照片庫(kù)\相機(jī)
    • 監(jiān)聽(tīng)用戶在系統(tǒng)相冊(cè)控制器的行為杉畜,需要設(shè)置delegate
  • 使用位圖上下文來(lái)進(jìn)行畫(huà)圖截屏
  • UIImageWriteToSavedPhotosAlbum:方法,可以將圖片寫(xiě)入至相冊(cè)衷恭,并可以監(jiān)聽(tīng)到是否保存完成此叠,保存完成的方法不能夠隨便亂寫(xiě),具體見(jiàn)官方說(shuō)明随珠。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末灭袁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子窗看,更是在濱河造成了極大的恐慌茸歧,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件显沈,死亡現(xiàn)場(chǎng)離奇詭異软瞎,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)拉讯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門(mén)涤浇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人遂唧,你說(shuō)我怎么就攤上這事芙代。” “怎么了盖彭?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵纹烹,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我召边,道長(zhǎng)铺呵,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任隧熙,我火速辦了婚禮片挂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己音念,他們只是感情好沪饺,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著闷愤,像睡著了一般整葡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上讥脐,一...
    開(kāi)封第一講書(shū)人閱讀 52,156評(píng)論 1 308
  • 那天遭居,我揣著相機(jī)與錄音,去河邊找鬼旬渠。 笑死俱萍,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的告丢。 我是一名探鬼主播枪蘑,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼芋齿!你這毒婦竟也來(lái)了腥寇?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤觅捆,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后麻敌,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體栅炒,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隧膏。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡淌喻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出祖秒,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布玩讳,位于F島的核電站,受9級(jí)特大地震影響嚼贡,放射性物質(zhì)發(fā)生泄漏熏纯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一粤策、第九天 我趴在偏房一處隱蔽的房頂上張望樟澜。 院中可真熱鬧,春花似錦、人聲如沸秩贰。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)毒费。三九已至吭服,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝗罗,已是汗流浹背艇棕。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留串塑,地道東北人沼琉。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像桩匪,于是被迫代替她去往敵國(guó)和親打瘪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

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

  • Quartz2D 簡(jiǎn)介 Quartz2D是二維(平面)的繪圖引擎(經(jīng)包裝的函數(shù)庫(kù)傻昙,方便開(kāi)發(fā)者使用闺骚。也就是說(shuō)蘋(píng)果幫我...
    iOS_Cqlee閱讀 633評(píng)論 0 2
  • Quartz2D以及drawRect的重繪機(jī)制字?jǐn)?shù)1487 閱讀21 評(píng)論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 775評(píng)論 0 3
  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開(kāi)發(fā)出絢麗的界面效果妆档,一方面得益于成功系統(tǒng)的設(shè)計(jì)僻爽,另一方面得益...
    韓七夏閱讀 2,734評(píng)論 2 10
  • 假若人生注定要定于蒼白, 那么愛(ài)我所愛(ài)贾惦, 便好胸梆。 假若宿命中的斷翼 再也不能飛翔, 那么掙扎著愛(ài)我所愛(ài)须板, 便好碰镜。 ...
    冰依潔穎閱讀 209評(píng)論 0 0
  • 【導(dǎo)讀】我們做一件事時(shí),比如每天見(jiàn)客戶习瑰,每天寫(xiě)文案等绪颖。每天做這件事時(shí),都追求一個(gè)很棒的結(jié)果甜奄,每天都有單出柠横,每個(gè)文案...
    君子小石閱讀 614評(píng)論 0 0