帶背景圖片的畫板功能實(shí)現(xiàn)

1.實(shí)現(xiàn)效果圖

drawingBoard.gif

2.畫板主要功能:

1.畫線
2.撤銷上一步操作
3.清空當(dāng)前畫板
4.橡皮擦
5.保存所畫內(nèi)容

3.兩種畫板制作思路:

3.1 drawRect + Touch操作(TouchesBegan形耗、TouchesMoved以及TouchesEnd)

我們需要保存所有的線,假如用戶已經(jīng)畫了4條線,在畫第五條線的時(shí)候(第5條線TouchMoved的過程中)誊役,第5條線每畫一個(gè)點(diǎn)般堆,就要將前面4條線在drawRect方法里重繪一下剔猿,否則硕糊,前面的畫的線就會(huì)丟失峦嗤。
可能存在的問題:因?yàn)檫@些drawrect都是保存在內(nèi)存中的蕊唐,每次都疊加前面的繪圖操作,很容易引起內(nèi)存的爆炸烁设。所以使用時(shí)得格外注意替梨。

如何解決這個(gè)問題呢?我們可以看看CAShapeLayer方法

3.2 CAShapeLayer + UIBeizerPath +Touch操作(TouchesBegan装黑、TouchesMoved以及TouchesEnd)

使用CAShapeLayer+ UIBeizerPath 來繪圖副瀑,不需要用到drawRect,使用CAShapeLayer方法的本質(zhì)上就是創(chuàng)建了很多
子CAShapeLayer恋谭,每個(gè)子CAShapeLayer對象都單獨(dú)保存了一個(gè)path糠睡,所以最后在屏幕顯示時(shí),系統(tǒng)會(huì)將當(dāng)前view的layer以及它的所有子layer都渲染出來箕别。無形之中铜幽,其實(shí)我們創(chuàng)建了很多子CAShapeLayer對象滞谢,而這些CAShapeLayer據(jù)說時(shí)GPU管理的的(不懂串稀??)狮杨,對內(nèi)存優(yōu)化確實(shí)挺大母截。(大家可以測試了看看)


4.橡皮擦功能

設(shè)計(jì)思路:
1.在ViewController模塊,準(zhǔn)備一個(gè)ImageView橄教,并設(shè)置相應(yīng)的圖片清寇,imageView添加到self.view當(dāng)中喘漏。
2.在imageView添加一個(gè)子view(SCDrawingView),我們將要在這個(gè)子view上做一些touchesBegan华烟、TouchesMoved以及TouchedEnd操作翩迈。
3.創(chuàng)建SCStrokeLine對象,我們將要用這個(gè)對象存儲每次畫的path盔夜,以及每條path的一些屬性(線寬负饲、線條顏色、blendMode)

悲傷的是喂链,如果要用到橡皮擦功能返十,我們就不能用CAShapeLayer去畫線條了,至少暫時(shí)我沒找到解決方法椭微。

5.保存所畫內(nèi)容

按照步驟4可知洞坑,我們準(zhǔn)備了一個(gè)imageView,以及在imageView添加了子view(SCDrawingView)蝇率,最后我們要將所畫的內(nèi)容保存成一張圖片迟杂。
這時(shí)候,我們需要用到一個(gè)方法:

  • (void)renderInContext:(CGContextRef)ctx;
    注意本慕,我們應(yīng)該在imageView上去開一個(gè)圖形上下文逢慌,將imageView的layer渲染到當(dāng)前的上下文中,因?yàn)槲覀冊趇mageView中添加了子view(SCDrawingView)间狂,換句話說imageView的layer也包含了SCDrawingView對象的layer攻泼,因此我們需要將imageview的layer渲染到畫板上,這樣才能得到SCDrawingView所畫的帶背景的線條鉴象。

6.Demo下載

https://github.com/SmileYang966/drawingBoard

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忙菠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子纺弊,更是在濱河造成了極大的恐慌牛欢,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淆游,死亡現(xiàn)場離奇詭異傍睹,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)犹菱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門拾稳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人腊脱,你說我怎么就攤上這事访得。” “怎么了陕凹?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵悍抑,是天一觀的道長鳄炉。 經(jīng)常有香客問我,道長搜骡,這世上最難降的妖魔是什么拂盯? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮记靡,結(jié)果婚禮上磕仅,老公的妹妹穿的比我還像新娘。我一直安慰自己簸呈,他們只是感情好榕订,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蜕便,像睡著了一般劫恒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上轿腺,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天两嘴,我揣著相機(jī)與錄音,去河邊找鬼族壳。 笑死憔辫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仿荆。 我是一名探鬼主播贰您,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拢操!你這毒婦竟也來了锦亦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤令境,失蹤者是張志新(化名)和其女友劉穎杠园,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舔庶,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡抛蚁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惕橙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞧甩。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖吕漂,靈堂內(nèi)的尸體忽然破棺而出亲配,到底是詐尸還是另有隱情尘应,我是刑警寧澤惶凝,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布吼虎,位于F島的核電站,受9級特大地震影響苍鲜,放射性物質(zhì)發(fā)生泄漏思灰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一混滔、第九天 我趴在偏房一處隱蔽的房頂上張望洒疚。 院中可真熱鬧,春花似錦坯屿、人聲如沸油湖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乏德。三九已至,卻和暖如春吠昭,著一層夾襖步出監(jiān)牢的瞬間喊括,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工矢棚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留郑什,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓蒲肋,卻偏偏與公主長得像蘑拯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子兜粘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

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