画板
画板界面分析.
顶部是一个工具栏.有清屏,撤销,橡皮擦,照片功能.最右部是一个保存按钮
中间部分为画板区域
最下部拖动滑竿能够改变画笔的粗线.可以选颜色.
1.界面搭建
最上部为一个ToolBar,往ToolBar拖些item,使用ToolBar的好处.里面按钮的位置不需要我们再去管理.
给最上部的工具栏做自动布局.离父控件左,上,右都为0,保存工具条的高度不度
拖一个UIView当前下部的View.在下部的View当中拖累三个按钮,设置每一个按钮的背景颜色.
点击每一按钮时办到设置画笔的颜色.
其中三个按钮只间的间距始终保存等,每一个按钮的宽度和高度都相等.通过自动布局的方式办到.
先把这个UIView的自动布局设好, 让其左,右,下都是0,高度固定.
自动布局设置为:第一个按钮高度固定,与左,右,下都保存20个间距.
第二个按钮与第一个按钮,高度,宽度,centerY都相等.与右边有20个间距.
第三个按钮也是第一个按钮的高度,宽度,centerY都相等.与右边有20个间距,最右边也保存20个间距.
最后是中间的画板区域,画板区域只需要上距离上下左右都为0即可.
2.实现画板功能.
当手指移动的时候,在中间的画板区域当中进行绘制.由于每一个路径都有不同的状态.所以我们就不能用一条路径来做.
所以要弄一个数组记录住每一条路径.
实现画板功能.
1.监听手指在屏幕上的状态.在开始点击屏幕的时候,创建一个路径.并把手指当前的点设为路径的起点.
弄一个成员属性记录当前绘制的路径.并把当前的路径添加到路径数组当中.
2.当手指在移动的时候,用当前的路径添加一根线到当前手指所在的点.然后进行重绘.
3.在绘图方法当中.取出所有的路径.把所有的路径给绘制出来.
3.设置路径属性.
提供属性方法.
清屏功能:删除所有路径进行重绘
撤销功能:删除最后一条路径,进行重绘
设置线宽:
由于每一条线宽度都不样.所以要在开始创建路径的时,就要添加一个成员属性,设置一个默认值.
在把当前路径添加到路径数组之前,设置好线的宽度.然后重写线宽属性方法.
下一次再创建路径时,线的宽度就是当前设置的宽度.
设置线的颜色:
同样,由于每一条线的颜色也不一样.也需要记录住每一条路径的颜色.
由于UIBezierPath没有给我们直接提供设置颜色的属性.我们可以自定义一个UIBezierPath.
创建一个MyBezierPath类,继承UIBezierPath,在该类中添加一个颜色的属性.
在创建路径的时候,直接使用自己定义的路径.设置路径默认的一个颜色.方法给设置线宽一样.
在绘图过程中, 取出来的都是MyBezierPath,把MyBezierPath的颜色设置路径的颜色.
橡皮擦功能:橡皮擦功能其实就是把路径的颜色设为白色.
4.保存绘制的图片到相册.
保存相册的思路:就是把绘制的在View上的内容生成一张图片,保存到系统相册当中.
具体步骤:
开启一个跟View相同大小的图片上下文.
把View的layer上面内容渲染到上下文当中.
生成一张图片,把图片保存到上下文.
关闭上下文.
如何把一张图片保存到上下文?
调用方法:
参数说明:
第一个参数:要写入到相册的图片.
第二个参数:哪个对象坚听写入完成时的状态.
第三个参数:图片保存完成时调用的方法
UIImageWriteToSavedPhotosAlbum(newImage,
self,
@selector(image:didFinishSavingWithError: contextInfo:),nil);
注意:图片保存完成时调用的方法必须得是image:didFinishSavingWithError: contextInfo:
5.选择图片.
点击图片时弹出系统的相册.
如果弹出系统的相册?
使用UIImagePickerController控件器Modal出它来.
UIImagePickerController *pick = [[UIImagePickerController alloc] init];
设置照片的来源
pick.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
设置代码,监听选择图片,UIImagePickerController比较特殊,它需要遵守两个协议
<UINavigationControllerDelegate,UIImagePickerControllerDelegate>
pick.delegate = self;
modal出控件器
[self presentViewController:pick animated:YES completion:nil];
注意没有实现代码方法时,选择一张照片会自动的dismiss掉相册控制器.但是设置代码后,就得要自己去dismiss了
实现代理方法.
选择的照片就在这个方法第二个参数当中, 它是一个字典
-(void)imagePickerController:(nonnull UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(nonnull NSDictionary<NSString *,id> *)info{
获取当前选中的图片.通过UIImagePickerControllerOriginalImage就能获取.
UIImage *image = info[UIImagePickerControllerOriginalImage];
}
获取完图片后.图片是能够缩放,平移的,因此获取完图片后,是在画板板View上面添加了一个UIView.
只有UIView才能做平移,缩放,旋转等操作.
因此做法为.在图片选择完毕后,添加一个和画板View相同大小的UIView,这个UIView内部有一个UIImageView.
对这个UIImageView进行一些手势操作.操作完成时.长按图片,把View的内容截屏,生成一张图片.
把新生成的图片绘制到画板上面.
6.绘制图片.
在画板View当中提供一个UImage属性,供外界传递.重写属性的set方法,每次传递图片时进行重绘
画图片也有有序的,所以要把图片也添加到路径数组当中.
在绘图片过过程当中,如果发现取出来的是一个图片类型.那就直接图片绘制到上下文当中.
具体实现代码为:
-(void)drawRect:(CGRect)rect{
for (DrawPath *path in self.pathArray) {
if ([path isKindOfClass:[UIImage class]]) {
UIImage *image = (UIImage *)path;
[image drawInRect:rect];
}else{
[path.lineColor set];
[path stroke];
}
}
}
