绘图-简单手绘板的实现

前言

本文实现一个简单的手绘画板的效果,主要是记录下实现原理,虽然很简单,但是这可以是实现复杂效果的基础。毕竟t他山之石可以攻玉。

手绘板.gif

原理思路

  • 在touchesBegan 方法中,每次都创建一个CAShapeLayer加载在当前视图的layer上,在touchesMoved方法中改变该 CAShapeLayer 基于UIBezierPath 的路径,即可实现绘制路径的效果。
  • 创建两个容器,lines用来盛放每次创建的CAShapeLayer,canceledLines 用来盛放每次删除的layer。
  • 清屏操作:移除当前视图layer上的所有子图层。并清空lines。
  • 撤销操作:移除当前视图layer上的lines最后的那个图层。并移除lines最后一个图层。把这个layer放入canceledLines中。
  • 恢复操作:当前视图layer加载上canceledLines中最后一个layer。移除canceledLines 中的最后一个layer,并加入到lines中。

源码实现

文件结构

自定义一个UIBezierPath的子类 LGPaintpath,下面是它的初始化方法

 + (instancetype)paintPathWithLineWidth:(CGFloat)width
                        startPoint:(CGPoint)startP
  {
    LGPaintPath * path = [[self alloc] init];
    path.lineWidth = width;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineCapRound; 
    [path moveToPoint:startP];
    return path;
}

LGDrawer中的实现

  • touchesBegan 事件 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { CGPoint startP = [self pointWithTouches:touches]; if ([event allTouches].count == 1) { LGPaintPath *path = [LGPaintPath paintPathWithLineWidth:_width startPoint:startP]; _path = path; CAShapeLayer * slayer = [CAShapeLayer layer]; slayer.path = path.CGPath; slayer.backgroundColor = [UIColor clearColor].CGColor; slayer.fillColor = [UIColor clearColor].CGColor; slayer.lineCap = kCALineCapRound; slayer.lineJoin = kCALineJoinRound; slayer.strokeColor = self.lineColor.CGColor; slayer.lineWidth = path.lineWidth; [self.layer addSublayer:slayer]; _slayer = slayer; [[self mutableArrayValueForKey:@"canceledLines"] removeAllObjects]; [[self mutableArrayValueForKey:@"lines"] addObject:_slayer]; } } - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { // 获取移动点 CGPoint moveP = [self pointWithTouches:touches]; if ([event allTouches].count == 1) { [_path addLineToPoint:moveP]; _slayer.path = _path.CGPath; } } - (CGPoint)pointWithTouches:(NSSet *)touches { UITouch *touch = [touches anyObject]; return [touch locationInView:self]; }
  • 清屏操作 - (void)clearScreen { if (!self.lines.count) return ; [self.lines makeObjectsPerformSelector:@selector(removeFromSuperlayer)]; [[self mutableArrayValueForKey:@"lines"] removeAllObjects]; [[self mutableArrayValueForKey:@"canceledLines"] removeAllObjects]; }
  • 撤销操作 - (void)undo { //当前屏幕已经清空,就不能撤销了 if (!self.lines.count) return; [[self mutableArrayValueForKey:@"canceledLines"] addObject:self.lines.lastObject]; [self.lines.lastObject removeFromSuperlayer]; [[self mutableArrayValueForKey:@"lines"] removeLastObject]; }
  • 恢复操作 - (void)redo { //当没有做过撤销操作,就不能恢复了 if (!self.canceledLines.count) return; [[self mutableArrayValueForKey:@"lines"] addObject:self.canceledLines.lastObject]; [[self mutableArrayValueForKey:@"canceledLines"] removeLastObject]; [self drawLine]; } // 画线 - (void)drawLine{ [self.layer addSublayer:self.lines.lastObject]; }
  • 截取某部分的视图 顺序不可以错 UIGraphicsBeginImageContext(_drawer.bounds.size); [_drawer.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); //render的意思是渲染 //会使图片和背景图层在结合的地方更自然
  • 保存图片到相册中 - (void)loadImageFinished:(UIImage *)image{ UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), (__bridge void *)self); } - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{ NSLog(@"image = %@, error = %@, contextInfo = %@", image, error, contextInfo); }

小结

这篇记录实现的手绘板效果,很简单,但是挺有趣。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发面面观

React Native的列表显示

1594
来自专栏向治洪

React Native之StyleSheet样式表

概述 在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在V...

1827
来自专栏冰霜之地

Weex 事件传递的那些事儿

在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块,那就是Native产生...

2304
来自专栏游戏杂谈

as3与php 上传多张图片demo

2、在一次添加的图片中如果超出最大上传数,忽略本次选中的所有图片(又得重新选一次,此现象普通存在于目前各大网站的flash批量上传中)

2032
来自专栏程序员维他命

MJRefresh 源码解析

MJRefresh是李明杰老师的作品,到现在已经有1w+颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎...

1832
来自专栏ios 技术积累

iOS 根据UIView获取所在的UIViewController

本文将讲述在iOS开发中如何根据某个UIView来获取所属的UIViewController

5002
来自专栏一“技”之长

iOS中UIImageView用法总结 原

- (instancetype)initWithImage:(UIImage *)image;

621
来自专栏非典型技术宅

iOS中手势的应用1. 四类事件的主要方法2. 响应者链3. 手势识别功能(Gesture Recognizer)4. 手势的使用

1384
来自专栏coding...

swift3.0 CoreGraphics绘图-实现画板Demo地址

设置触摸时间,开始时记录第一个点并重绘(不重绘就没有只画一个点得效果),移动时不断记录并重绘。

1264
来自专栏一“技”之长

iOS中UITextView方法解读 原

@property(nonatomic,assign) id<UITextViewDelegate> delegate;

974

扫码关注云+社区

领取腾讯云代金券