有时候如果想和iPad pro的画板一样涂鸦然后保存后发给朋友,这时候在iPhone上怎么实现呢,下面我就来一步一步的实现这个功能。
按照惯例,先上效果图:

原理
每当画笔在画布上有所动作,都会将画布上新的轨迹保存在一个全局的可变数组里,展示的时候进行渲染,如果选择了撤销,就清空数组,重新渲染页面。所以不可避免的要用到CGContextRef 上下文来实现这一功能。
关键代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| -(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 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| //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/wang-qiuyu/PrintView