涂鸦功能需求分析

发表于 | 分类于

涂鸦功能需求分析

  • 在短视频进入编辑界面的时候在视频预览播放层上用户点击涂鸦按钮调出涂鸦面板。

  • 在涂鸦面板为第一次响应的时候，编辑界面面板不响应。

  • 涂鸦过程中可以选择画笔颜色，同时可以调节画笔宽度。

  • 用户可以撤销涂鸦，进行清屏操作。

技术背景

  • 涂鸦功能涉及到iOS开发Cocoa框架中绘图操作。

解决方案

一、UIBezierPath 绘制画板方法

UIBerierPath的原理

1
2
3
4
5
6
7
8
9
10
11
12
13
1、 UIBezierPath使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。
2、UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径，都用直线和曲线去创建。我们使用直线段去创建矩形和多边形，使用曲线去创建圆弧（arc）、圆或者其他复杂的曲线形状。
3、使用UIBezierPath画图步骤：
创建一个UIBezierPath对象
调用-moveToPoint:设置初始线段的起点
添加线或者曲线去定义一个或者多个子路径
改变UIBezierPath对象跟绘图相关的属性。如，我们可以设置画笔的属性、填充样式等。

实现细节

1
2
3
4
5
创建一继承自UIBerierPath的子类，在子类中用两个属性分别记录画笔的颜色和是否为清除涂鸦路径操作。
   @property (nonatomic,copy) UIColor *lineColor; // 画笔的颜色
   @property (nonatomic,assign) BOOL isCleanScreen; // 是否撤销

需要实现的API

1
2
3
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;

最核心的API： **drawRect**方法的重写

1
2
3
4
5
6
- (void)drawRect:(CGRect)rect {
  // 设置画笔颜色
  // 设置画线模式
  
  [path stroke];
}

二、还有两种涂鸦实现方法：

1、系统绘图库 NSUndoManager + Quartz2D实现。

2、使用OpenGLES实现。

总结

  • 对于简单一次性绘制涂鸦需求，可以采用第一种方案，方案一API具有高度封装性使用成本比较低，如果不会重复绘制，不会有很大的性能问题产生。

  • 如果追求很流畅的绘制效率，采用第二种方案。方案二绘制效率高，偏底层，绘制速度快，但因为偏于底层，对于重复绘制会比较耗性能，计算频繁会出现延迟断点问题。

  • 方案三更偏底层，很多需求需要用OpenGL自定义开发，成本高，出现问题不容易解决，优点是绘制速度更快，更流畅。