有時候如果想和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