在畫布上涂鴉并截取畫筆軌跡保存到相冊

有時候如果想和iPad pro的畫板一樣涂鴉然后保存后發給朋友,這時候在iPhone上怎么實現呢,下面我就來一步一步的實現這個功能。

按照慣例,先上效果圖:


屏幕快照 2017-09-19 下午2.53.05.png

屏幕快照 2017-09-19 下午2.53.14.png



原理

每當畫筆在畫布上有所動作,都會將畫布上新的軌跡保存在一個全局的可變數組里,展示的時候進行渲染,如果選擇了撤銷,就清空數組,重新渲染頁面。所以不可避免的要用到CGContextRef 上下文來實現這一功能。

關鍵代碼

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //創建筆畫的數組
    NSMutableArray *arry=[[NSMutableArray alloc]init];
    //將顏色添加到筆畫數組中
    [arry addObject:color];
    [arry addObject:[NSNumber numberWithInt:font]];
    //得到觸摸對象
    UITouch *touch=[touches anyObject];
    //將觸摸對象裝化為觸摸點
    CGPoint point=[touch locationInView:self];
    //將point轉換為對象類型
    NSValue *pointValue=[NSValue valueWithCGPoint:point];
    //將得到的起點添加到數組里面
    [arry addObject:pointValue];
    //將筆畫數組放在子數組里面
    [ziArry addObject:arry];
    
}
- (void)drawRect:(CGRect)rect
{
    //循環一個字有多少筆畫
    for (int i=0; i<[ziArry count]; i++) {
        NSMutableArray *bihua=[ziArry objectAtIndex:i];
        //設置繪畫屬性、
        //拿到畫筆
        contex=UIGraphicsGetCurrentContext();
        //設置畫筆的粗細
        CGContextSetLineWidth(contex, [bihua[1] intValue]);
        //設置畫筆的顏色
        CGContextSetStrokeColorWithColor(contex, [bihua[0] CGColor]);
        //內層循環是用來處理每個筆畫有多少個點
        for (int j=2; j<[bihua count]-2; j++) {
            //將點連成線
            //將對象類型的點從數組中取出來
            NSValue *pointValue=[bihua objectAtIndex:j];
            //將對象類型轉換成point
            CGPoint first=[pointValue CGPointValue];
            //兩點畫線,取到后面的一個點
            CGPoint second=[[bihua objectAtIndex:j+1] CGPointValue];
            //設定線的起點和終點
            CGContextMoveToPoint(contex, first.x, first.y);
            //用點連接成線
            CGContextAddLineToPoint(contex, second.x, second.y);
            //提交畫筆
            CGContextStrokePath(contex);
            
        }
    }
}

如果想像微信表情一樣發送的都是有透明度的圖片的話,就必須要使用png格式的圖片了,所以一般的截圖方法就不能用了,因為那樣會把底部背景也帶上。我們使用另一種辦法UIGraphicsBeginImageContextWithOptions截圖。

//1、獲得圖片的畫布(上下文)
    //2、畫布的上下文
    //3、設置截圖的參數 截圖
    //4、關閉圖片的上下文
    //5、保存
    UIGraphicsBeginImageContext(self.frame.size);
    /**
     *  size :圖片尺寸
     * opaque: 是否不透明
     * scale :比例
     */
    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 1);
    //    [self addRound];
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    [self.layer renderInContext:ctx];
    
    //開始截圖
    UIImage *image =   UIGraphicsGetImageFromCurrentImageContext();
    //關閉截圖上下文
    UIGraphicsEndImageContext();

   //UIImage轉換成png
    NSData* imageData =  UIImagePNGRepresentation(image);
    UIImage* pngImage = [UIImage imageWithData:imageData];

github項目地址: https://github.com/hfq-wangqiuyu/PrintView

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,659評論 25 708
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協議。它實...
    香橙柚子閱讀 23,989評論 8 183
  • 2017.11.06 星期一 從昨天晚上看到他分享給我的那篇“當你丈夫處于爭戰時”的文章,心里一直非常震撼,波動也...
    Ezra的Glory閱讀 138評論 1 1
  • 文/熊大 2009年,我來到了魔都。 初到魔都,看到高樓林立,車水馬龍,心里無比的激動,并對未來充滿了希望。 終于...
    挪威的熊大閱讀 306評論 0 0
  • 如果說女人都是水做的,那么蘭妞、瑩妞、芳妞這三杯水,我會給她們統統標上37度。37度的水溫,無論是喝下還是用手捧著...
    冰島之鯨閱讀 376評論 0 3