ios自带画板（ios画图板）

效果图

设计要求

1、画笔能设置大小、颜色

2、有清屏、撤销、橡皮擦、导入照片功能

3、能将绘好的画面保存到相册

实现思路

1、画笔的实现，我们可以通过监听用户的 平移手势 中创建 uibezierpath 来实现线条的绘制

2、撤销功能，我们先来看下撤销功能，我们会想到用一个数组队列将用户的每一次的笔画都加入到数组中，然后撤销的时候只需要将最后添加进去的笔画pop掉，重新绘制就可以了

3、清屏功能就简单了，只需要将上面说到的那个数组清空重新绘制下就可以了

4、导入照片功能，可以用系统的 uiimagepickercontroller 选取照片得到uiimage，然后再将 uiimage 绘制到屏幕中就可以了

5、保存到相册功能，可以使用 uigraphicsgetimagefromcurrentimagecontext 获取当前的图片上下文，得到屏幕画面的 uiimage ,然后通过 uiimagewritetosavedphotosalbum 写入到相册

具体代码实现

1、先画个界面

2、因为我们绘制线条会用到 uibezierpath ，并且要能可设置颜色，但是uibezierpath是没有设置颜色的属性，所以我们这里需要简单扩展一下，创建一个继承于 uibezierpath 的子类 drawpath

?

1 2 3 4 5 6 7 8 9 10 11 12

// // drawpath.h // 画板 // // created by xgao on 16/4/13. // copyright © 2016年 xgao. all rights reserved. // #import <uikit/uikit.h> @interface drawpath : uibezierpath // 画笔颜色 @property(nonatomic,retain)uicolor* pathcolor; @end

这个子类只需要扩展一个属性，就是 pathcolor 用来保存画笔的颜色

?

1 2 3 4 5 6 7 8 9 10

// // drawpath.m // 画板 // // created by xgao on 16/4/13. // copyright © 2016年 xgao. all rights reserved. // #import "drawpath.h" @implementation drawpath @end

drawpath.m 里面不需要做其它功能

3、接到来我们对画板功能的实现封装一下，创建一个继承于uiview的 drawview子类

?

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

// // drawview.h // 画板 // // created by xgao on 16/4/13. // copyright © 2016年 xgao. all rights reserved. // #import <uikit/uikit.h> @interface drawview : uiview // 画线的宽度 @property(nonatomic,assign)cgfloat linewidth; // 线条颜色 @property(nonatomic,retain)uicolor* pathcolor; // 加载背景图片 @property(nonatomic,strong)uiimage* image; // 清屏 - (void)clear; // 撤销 - (void)undo; // 橡皮擦 - (void)eraser; // 保存 - (void)save; @end

?

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181

// // drawview.m // 画板 // // created by xgao on 16/4/13. // copyright © 2016年 xgao. all rights reserved. // #import "drawview.h" #import "drawpath.h" @interface drawview() @property(nonatomic,strong) drawpath* path; // 线的数组 @property(nonatomic,strong) nsmutablearray* paths; @end @implementation drawview - (void)awakefromnib{ [self setup]; } - (instancetype)initwithframe:(cgrect)frame { self = [super initwithframe:frame]; if (self) { [self setup]; } return self; } // 重绘ui - (void)drawrect:(cgrect)rect { for (drawpath* path in self.paths) { if ([path iskindofclass:[uiimage class]]) { // 画图片 uiimage* image = (uiimage*)path; [image drawinrect:rect]; }else{ // 画线 // 设置画笔颜色 [path.pathcolor set]; // 绘制 [path stroke]; } } } // 懒加载属性 - (nsmutablearray*)paths{ if (_paths == nil) { _paths = [nsmutablearray array]; } return _paths; } // 重写image属性 - (void)setimage:(uiimage *)image{ _image = image; // 将图片加入到线条数组中 [self.paths addobject:image]; [self setneedsdisplay]; } #pragma mark - init // 初始化 - (void)setup{ // 添加平移手势 uipangesturerecognizer* panges = [[uipangesturerecognizer alloc]initwithtarget:self action:@selector(panges:)]; [self addgesturerecognizer:panges]; // 默认值 self.linewidth = 1; self.pathcolor = [uicolor blackcolor]; } #pragma mark - event // 平移事件 - (void)panges:(uipangesturerecognizer*)ges{ // 获取当前点 cgpoint curpoint = [ges locationinview:self]; if (ges.state == uigesturerecognizerstatebegan) { // 开始移动 // 创建贝塞尔曲线 _path = [[drawpath alloc]init]; // 设置线条宽度 _path.linewidth = _linewidth; // 线条默认颜色 _path.pathcolor = _pathcolor; // 设置起始点 [_path movetopoint:curpoint]; [self.paths addobject:_path]; } // 连线 [_path addlinetopoint:curpoint]; // 重绘 [self setneedsdisplay]; } #pragma mark - method // 清屏 - (void)clear{ [self.paths removeallobjects]; [self setneedsdisplay]; } // 撤销 - (void)undo{ [self.paths removelastobject]; [self setneedsdisplay]; } // 橡皮擦 - (void)eraser{ self.pathcolor = [uicolor whitecolor]; [self setneedsdisplay]; } // 保存 - (void)save{ // ---- 截图操作 // 开启上下文 uigraphicsbeginimagecontextwithoptions(self.frame.size, no, 0); // 获取当前上下文 cgcontextref context = uigraphicsgetcurrentcontext(); // 渲染图层到上下文 [self.layer renderincontext:context]; // 从上下文中获取图片 uiimage* image = uigraphicsgetimagefromcurrentimagecontext(); // 关闭上下文 uigraphicsendimagecontext(); // ---- 保存图片 uiimagewritetosavedphotosalbum(image, self, @selector(image:didfinishsavingwitherror:contextinfo:), nil); } // 图片保存方法，必需写这个方法体，不能会保存不了图片 - (void)image:(uiimage *)image didfinishsavingwitherror:(nserror *)error contextinfo:(void *)contextinfo{ // 提示 uialertview* alert = [[uialertview alloc]initwithtitle:@"保存成功" message:nil delegate:nil cancelbuttontitle:@"ok" otherbuttontitles:nil, nil]; [alert show]; } @end

4、接下来就是如果使用这个画板类了，直接上代码吧

?

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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

// // viewcontroller.m // 画板 // // created by xgao on 16/4/13. // copyright © 2016年 xgao. all rights reserved. // #import "viewcontroller.h" #import "drawview.h" @interface viewcontroller ()<uiimagepickercontrollerdelegate,uinavigationcontrollerdelegate> // 画板 @property (weak, nonatomic) iboutlet drawview *drawview; @end @implementation viewcontroller - (void)viewdidload { [super viewdidload]; } #pragma mark - event // 线条宽度变化 - (ibaction)linewidthchange:(uislider*)sender { _drawview.linewidth = sender.value; } // 线条颜色变化 - (ibaction)pathcolorchange:(uibutton*)sender { _drawview.pathcolor = sender.backgroundcolor; } // 清屏 - (ibaction)clearaction:(id)sender { [_drawview clear]; } // 撤销 - (ibaction)undoaction:(id)sender { [_drawview undo]; } // 橡皮擦 - (ibaction)eraseraction:(id)sender { [_drawview eraser]; } // 照片 - (ibaction)pickerphotoaction:(id)sender { // 照片选择控制器 uiimagepickercontroller* picvc = [[uiimagepickercontroller alloc]init]; // 照片源 picvc.sourcetype = uiimagepickercontrollersourcetypephotolibrary; // 委托 picvc.delegate = self; [self presentviewcontroller:picvc animated:yes completion:nil]; } // 保存 - (ibaction)saveaction:(id)sender { [_drawview save]; } #pragma mark - uiimagepickercontrollerdelegate - (void)imagepickercontroller:(uiimagepickercontroller *)picker didfinishpickingimage:(uiimage *)image editinginfo:(nullable nsdictionary<nsstring *,id> *)editinginfo{ // 设置图片 _drawview.image = image; // 关闭窗口 [self dismissviewcontrolleranimated:yes completion:nil]; } @end

到这里就差不多了，这个小功能实现的基本思路与具体代码我都已经放上来了，大家如果还有哪里不清楚的可以留言喔～～

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持服务器之家！

原文链接：http://www.cnblogs.com/xgao/p/6650225.html