介绍：学了quartz2D的绘图知识后,我根据它的一些功能制作了一个小项目:涂鸦画板。
功能：绘制各种图形,还可以选取相册上的照片做涂鸦,然后保存到相册中。其中，还包括功能有：颜色的选取、线宽的选取、橡皮擦除、撤销上一次绘制痕迹、清除所有痕迹。
用到的自定义控件：工具栏控件(UIToolBar)、工具栏上的按钮控件(UIBarButtonItem)、警告框控件(UIAlertView、UIActionSheet)、图像选择器控制器控件(UIImagePickerController)等。
需要的类：除了应用程序代理类AppDelegate和控制器类ViewController外，还需要一个自定义的视图类DemoView和一个自定义的绘制路径类MyPath。MyPath类是用来封装绘制路径的,因为路径是结构体,所以不能直接动作对象使用,封装后可以将路径保存数组中,用来连续绘图。
具体操作如下：
1、创建如上介绍的类的截图为：
2、将自定义的视图类DemiView与控制器的视图关联起来：
3、下面就是具体针对每一个类的代码了：
<1>在MyPath.h文件中
#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> #define PHOTO_RECT (CGRectMake(0,0,375,667))//绘制照片局域宏定义 @interface MyPath : NSObject @property (assign,nonatomic)CGMutablePathRef path; //可变的路径 @property (strong,nonatomic)UIColor *color; //颜色 @property (assign,nonatomic)NSInteger lineWidth; //线宽 @property (strong,nonatomic)UIImage *image;//图像 @end
<2>在Application.m文件中：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //设置偏好 NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; [userDefaults setBool:YES forKey:@"isDefualtColor"]; [userDefaults setBool:YES forKey:@"isDefualtLine"]; [userDefaults synchronize]; return YES; }
<3>在DemoView类中
DemoView.h文件
#import <UIKit/UIKit.h> @interface DemoView : UIView @property (strong,nonatomic)UIColor *color; //颜色 @property (assign,nonatomic)NSInteger lineWidth; //线宽 @property (strong,nonatomic)NSMutableArray *paths; //可变数组,用来保存路径 @property(assign,nonatomic)BOOL isUndo; //标示符 @property (strong,nonatomic)UIImage *image; //图像 @property (assign,nonatomic)CGMutablePathRef path; //可变的路径 @end
DemoView.m文件
//懒加载
-(NSMutableArray*)paths { if (!_paths) { _paths = [NSMutableArray array]; } return _paths; }
//画图
- (void)drawRect:(CGRect)rect { //1.获取绘制图上下文 CGContextRef context = UIGraphicsGetCurrentContext(); //4.添加保存的路径到上下文 for (MyPath *myPath in self.paths) { CGContextAddPath(context, myPath.path); if(myPath.image) { [myPath.image drawInRect:PHOTO_RECT]; } //设置绘图属性 [myPath.color set]; CGContextSetLineWidth(context, myPath.lineWidth); //绘制路径 CGContextDrawPath(context, kCGPathStroke); } //如果是清除或撤销,就不执行当前绘图 if (!self.isUndo) { if(self.image) { [self.image drawInRect:PHOTO_RECT]; } //添加当前路径 CGContextAddPath(context, _path); //5.设置当前绘图属性 [self.color set]; CGContextSetLineWidth(context, self.lineWidth); //6.绘制路径 CGContextDrawPath(context, kCGPathStroke); } }
//开始触摸事件(设置绘制属性)
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { self.isUndo = NO; NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; if ([userDefaults boolForKey:@"isDefualtColor"]) { //设置默认颜色 self.color = [UIColor blackColor]; } if ([userDefaults boolForKey:@"isDefualtLine"]) { //设置默认线宽 self.lineWidth = 1.0; } //接收颜色通知 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(seclectColor:) name:@"ColorNitification" object:nil]; //接收线宽通知 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(selectedWidth:) name:@"WidthNitification" object:nil]; //创建路径 _path = CGPathCreateMutable(); //创建起始点 UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; CGPathMoveToPoint(_path, nil, location.x, location.y); }
//获取通知中的颜色和线宽数据
//从通知中获取颜色 -(void)seclectColor:(NSNotification*)notification { self.color = notification.object; if (self.color == NULL) { self.color = [UIColor blackColor]; } } //从通知中获取线宽 -(void)selectedWidth:(NSNotification*) notification { NSNumber *number = notification.object; self.lineWidth = [number integerValue]; if (self.lineWidth == 0) { self.lineWidth = 1.0; } }
//触摸移动(添加新路径,刷新视图)
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { if (_path) { //向路径添加新的直线 UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; CGPathAddLineToPoint(_path, nil, location.x, location.y); //让视图刷新 [self setNeedsDisplay]; } }
//触摸结束(封装路径并保存到数组中)
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { if (_path) { //保存路径 MyPath *myPath = [[MyPath alloc]init]; myPath.path = self.path; myPath.color = self.color; myPath.lineWidth = self.lineWidth; if(self.image) { myPath.image = self.image; self.image = nil; }
//保存路径 [self.paths addObject:myPath]; } }
//清理路径
-(void)dealloc { //清理保存的路径 for (MyPath *myPath in self.paths) { CGPathRelease(myPath.path); } }
<4>在ViewController.m文件中
//设置属性
@interface ViewController ()<UIAlertViewDelegate,UIActionSheetDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate> @property (strong,nonatomic)UIToolbar *toolBar; @property (strong,nonatomic)NSMutableDictionary *DicM; @end
//初始化和创建控件
- (void)viewDidLoad { [super viewDidLoad]; //初始化 self.DicM = [NSMutableDictionary dictionary]; ((DemoView *)self.view).isUndo = NO; //创建工具栏对象 self.toolBar = [[UIToolbar alloc]init]; self.toolBar.barTintColor = [UIColor brownColor]; self.toolBar.frame = CGRectMake(0, 0, 375, 40); //创建工具栏项目 UIBarButtonItem *colorItem = [[UIBarButtonItem alloc]initWithTitle:@"颜色" style:UIBarButtonItemStylePlain target:self action:@selector(SelectColor:)]; UIBarButtonItem *lineWidthItem = [[UIBarButtonItem alloc]initWithTitle:@"线宽" style:UIBarButtonItemStylePlain target:self action:@selector(SelectWidth:)]; UIBarButtonItem *clearpartItem = [[UIBarButtonItem alloc]initWithTitle:@"橡皮" style:UIBarButtonItemStylePlain target:self action:@selector(ClearPart:)]; UIBarButtonItem *backdoneItem = [[UIBarButtonItem alloc]initWithTitle:@"撤销" style:UIBarButtonItemStylePlain target:self action:@selector(BackDone:)]; UIBarButtonItem *clearallItem = [[UIBarButtonItem alloc]initWithTitle:@"清空" style:UIBarButtonItemStylePlain target:self action:@selector(ClearAll:)]; UIBarButtonItem *photoItem = [[UIBarButtonItem alloc]initWithTitle:@"照片" style:UIBarButtonItemStylePlain target:self action:@selector(selectPhoto:)]; UIBarButtonItem *saveItem = [[UIBarButtonItem alloc]initWithTitle:@"保存" style:UIBarButtonItemStylePlain target:self action:@selector(Save:)]; UIBarButtonItem *flexibleItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; [self.toolBar setItems:@[colorItem,flexibleItem,lineWidthItem,flexibleItem,clearpartItem,flexibleItem,backdoneItem,flexibleItem,clearallItem,flexibleItem,photoItem,flexibleItem,saveItem]]; [self.view addSubview:self.toolBar];
//开始时隐藏工具栏 self.toolBar.hidden = YES; //创建点击手势(双击时显示和隐藏工具栏) UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(showToolBar:)]; //设置点击次数 tap.numberOfTapsRequired = 2; //添加手势 [self.view addGestureRecognizer:tap]; }
//设置颜色选项
//选择颜色 -(void)SelectColor:(UIBarButtonItem *)sender { UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:nil message:@"可选颜色" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"红色",@"绿色",@"紫色",@"黄色",@"黑色",@"白色",@"蓝色",@"灰色",@"棕色",nil]; [self.DicM setObject:[UIColor redColor] forKey:@"红色"]; [self.DicM setObject:[UIColor greenColor] forKey:@"绿色"]; [self.DicM setObject:[UIColor purpleColor]forKey:@"紫色"]; [self.DicM setObject:[UIColor yellowColor]forKey:@"黄色"]; [self.DicM setObject:[UIColor blackColor] forKey:@"黑色"]; [self.DicM setObject:[UIColor whiteColor] forKey:@"白色"]; [self.DicM setObject:[UIColor blueColor] forKey:@"蓝色"]; [self.DicM setObject:[UIColor grayColor] forKey:@"灰色"]; [self.DicM setObject:[UIColor brownColor] forKey:@"棕色"]; [alertView show]; }
//设置线宽选项
//选择线宽 -(void)SelectWidth:(UIBarButtonItem *)sender { UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:@"可选线宽" delegate:self cancelButtonTitle:@"取消" destructiveButtonTitle:nil otherButtonTitles:@"1号",@"2号",@"3号",@"4号",@"5号",@"6号",@"7号",@"8号",@"9号",@"10号",nil]; [self.DicM setObject:[NSNumber numberWithInteger:1] forKey:@"1号"]; [self.DicM setObject:[NSNumber numberWithInteger:2] forKey:@"2号"]; [self.DicM setObject:[NSNumber numberWithInteger:3] forKey:@"3号"]; [self.DicM setObject:[NSNumber numberWithInteger:4] forKey:@"4号"]; [self.DicM setObject:[NSNumber numberWithInteger:5] forKey:@"5号"]; [self.DicM setObject:[NSNumber numberWithInteger:6] forKey:@"6号"]; [self.DicM setObject:[NSNumber numberWithInteger:7] forKey:@"7号"]; [self.DicM setObject:[NSNumber numberWithInteger:8] forKey:@"8号"]; [self.DicM setObject:[NSNumber numberWithInteger:9] forKey:@"9号"]; [self.DicM setObject:[NSNumber numberWithInteger:10] forKey:@"10号"]; [actionSheet showInView:self.view]; }
//实现UIAlertView警告框协议
#pragma mark -<UIAlertViewDelegate> -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex { NSString *key = [alertView buttonTitleAtIndex:buttonIndex]; UIColor *selectedcolor = [self.DicM objectForKey:key]; //发送通知附带颜色数据 [[NSNotificationCenter defaultCenter]postNotificationName:@"ColorNitification" object:selectedcolor]; //重设偏好 [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isDefualtColor"]; [[NSUserDefaults standardUserDefaults] synchronize]; }
//实现UIActionSheet警告框协议
#pragma mark -<UIActionSheetDelegate> -(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex { NSString *key = [actionSheet buttonTitleAtIndex:buttonIndex]; NSNumber *number = [self.DicM objectForKey:key]; //发送通知附带线宽数据 [[NSNotificationCenter defaultCenter]postNotificationName:@"WidthNitification" object:number]; //重设偏好 [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isDefualtLine"]; [[NSUserDefaults standardUserDefaults] synchronize]; }
//擦除功能
//橡皮擦除(其实就是用白色重绘) -(void)ClearPart:(UIBarButtonItem *)sender { UIColor *selectedcolor = [UIColor whiteColor]; [[NSNotificationCenter defaultCenter]postNotificationName:@"ColorNitification" object:selectedcolor]; NSNumber *number = [NSNumber numberWithInteger:10]; [[NSNotificationCenter defaultCenter]postNotificationName:@"WidthNitification" object:number]; //重设偏好 [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isDefualtColor"]; [[NSUserDefaults standardUserDefaults] synchronize]; [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"isDefualtLine"]; [[NSUserDefaults standardUserDefaults] synchronize]; }
//撤销功能
//撤销 -(void)BackDone:(UIBarButtonItem *)sender { //先做清理工作 MyPath *path = [((DemoView *)self.view).paths lastObject]; CGPathRelease(path.path); //删除最后一个路径 [((DemoView *)self.view).paths removeLastObject]; ((DemoView *)self.view).image = nil; ((DemoView *)self.view).isUndo = YES; //让视图重绘 [self.view setNeedsDisplay]; }
//清空功能
//清空绘图 -(void)ClearAll:(UIBarButtonItem *)sender { //先做清理工作 for(MyPath *path in ((DemoView *)self.view).paths) { CGPathRelease(path.path); } //删除所有 [((DemoView *)self.view).paths removeAllObjects]; ((DemoView *)self.view).image = nil; ((DemoView *)self.view).isUndo = YES; //让视图重绘 [self.view setNeedsDisplay]; }
//保存绘图功能
//保存绘图 -(void)Save:(UIBarButtonItem *)sender { [self didSelectedSave]; } -(void)didSelectedSave { //开始图像绘制上下文 UIGraphicsBeginImageContext(self.view.bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); // 先画保存的path for(MyPath *myPath in ((DemoView *)self.view).paths) { if(myPath.image) { [myPath.image drawInRect: PHOTO_RECT ]; } CGContextAddPath(context, myPath.path); [myPath.color set]; CGContextSetLineWidth(context, myPath.lineWidth); CGContextStrokePath(context); } //获取绘制的图片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); //结束图像绘制上下文 UIGraphicsEndImageContext(); //保存图片 UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL); } - (void)image: (UIImage *) image didFinishSavingWithError: (NSError *) error contextInfo: (void *) contextInfo { NSString *msg = nil; if(error) { msg = @"图片保存失败"; } else { msg = @"图片保存成功"; } UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"保存图片" message:msg delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; }
//选取照片功能
//选取照片 -(void)selectPhoto:(UIBarButtonItem*)sender { [self didSelectedPhoto]; } -(void)didSelectedPhoto { //显示照片选择窗口 UIImagePickerController *picker = [[UIImagePickerController alloc]init]; //图片来源是相册 picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; picker.delegate = self; //以模态窗口的形式显示图片 [self presentViewController:picker animated:YES completion:nil]; }
//图像选择器控制器协议方法
#pragma mark - imagePikerController 代理方法 //选取图片 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { //取出图片 UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage]; ((DemoView *)self.view).image = image; ((DemoView *)self.view).isUndo = NO; //创建路径 ((DemoView *)self.view).path = CGPathCreateMutable(); //关闭模态窗口 [picker dismissViewControllerAnimated:YES completion:nil]; //刷新视图 [self.view setNeedsDisplay]; }
//手势事件,是否显示工具栏
//按钮事件是否显示工具栏 -(void)showToolBar:(UIButton *)sender { self.toolBar.hidden = !self.toolBar.hidden; }
演示截图如下：
开始时： 双击显示工具栏：
(使用默认颜色和线宽)绘制直线 选颜色绘制直线 ,选红色
接着选择线宽绘制直线：选10号
点击橡皮擦除： 点击撤销，被擦除部分还原
点击清空，什么都没有了： 点击照片，打开相册
任意选取一张照片,选取X
绘制图片并保存到相册：
查看保存的图片
可以再双击隐藏工具栏：
