在iOS中使用OpenGL ES实现绘画板的方法

今天我们使用 OpenGL ES 来实现一个绘画板,主要介绍在 OpenGL ES 中绘制平滑曲线的实现方案。

首先看一下最终效果:

在 iOS 中,有很多种方式可以实现一个绘画板,比如我的另外一个项目 MFPaintView 就是基于 CoreGraphics 实现的。

然而,使用 OpenGL ES 来实现可以获得更多的灵活性,比如我们可以自定义笔触的形状,这是其他实现方式做不到的。

我们知道,OpenGL ES 中只有 点、直线、三角形 这三种图元。因此, 怎么在 OpenGL ES 中绘制曲线 ,是我们第一个要解决的问题,也是最复杂的问题。

我们会使用比较大的篇幅来讲解这个问题。至于绘画板的其他功能实现,并不是说不重要,只是说其他的绘画板实现方式,也会有类似的逻辑,所以这部分会放在最后再简单介绍一下。

一、怎么绘制曲线

在 OpenGL ES 中绘制曲线的方式,就是 将曲线拆分成点序列来绘制

因为要绘制点,所以我们采取的是 点图元 。即我们要把顶点数据当成 来绘制,并且每个点都要绘制出笔触的纹理。关键步骤如下:

指定图元类型:

glDrawArrays(GL_POINTS, 0, self.vertexCount);

顶点着色器:

attribute vec4 Position;

uniform float Size;

void main (void) {
  gl_Position = Position;
  gl_PointSize = Size;
}

片段着色器:

precision highp float;

uniform float R;
uniform float G;
uniform float B;
uniform float A;

uniform sampler2D Texture;

void main (void) {
  vec4 mask = texture2D(Texture, vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y));
  gl_FragColor = A * vec4(R, G, B, 1.0) * mask;
}

这里的关键点在于 gl_PointCoord 这个内置变量,当我们使用点图元的时候,可以通过这个变量获取到 当前像素在点图元中的归一化坐标

但是这个坐标的原点是在左上角,这和纹理坐标在竖直方向上是相反的。所以从纹理读取颜色的时候,要做一个 y 坐标的转换。

接下来,我们通过 UITouch 来获取触摸点的位置,然后算出归一化的顶点坐标。

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  [super touchesMoved:touches withEvent:event];

  [self addPointWithTouches:touches];
}

但是由于 iOS 系统触摸事件的派发频率有限,我们最终得到的只能是稀疏的点。如下图所示,每个触摸点之间的间隔会比较大。

二、怎么绘制密集的点

很容易想到,只需要在两个点之间,按照一定的密度进行插值,就可以绘制出连续的轨迹。

但是很明显,我们的绘制结果是折线,并不平滑。

三、怎么使曲线变平滑

解决点连接不平滑的问题,一般是使用贝塞尔曲线。这种方案在 MFPaintView 中也得到了很好的应用。

具体的做法是使用 两个顶点间的中点一个顶点 ,来构造一条贝塞尔曲线。如下图,图中的 3 个 红点 被用来构造一条贝塞尔曲线。

于是,我们的问题就变成了 怎么在 OpenGL ES 中绘制贝塞尔曲线 。相当于已知贝塞尔曲线的 3 个关键点,反向来求曲线上的点序列。

我们知道贝塞尔曲线的方程是 P = (1 - t)^2 * P0 + 2 * t * (1 - t) * P1 + t^2 * P2t 是唯一的变量,其取值范围是 0 ~ 1

所以我们可以采取线性取值的方式,每一条贝塞尔曲线取 n 个点( n 是个确定的常量)。只要依次往方程中代入 1 / n 、 2 / n 、 ... n / n ,就可以得到一个点序列。

先将 n 取一个比较小的值,这样比较容易看出存在的问题。我们发现, 点序列的间隔并不均匀 。原因有两个:

  • 不同贝塞尔曲线的长度不一样,使用同一个 n 值,算出来的点的疏密程度肯定不同。
  • 由于贝塞尔曲线随着 t 增长,曲线长度的增长并不是线性的。按照我们上面的算法,最终会得到的结果是 两头比较稀疏,中间比较密集

四、怎么生成均匀的点序列

贝塞尔曲线生成均匀的点序列,涉及到了一个经典的「贝塞尔曲线匀速运动」问题。

这个问题的推导和计算比较复杂。如果你有兴趣,可以阅读一下文末的两篇文章。由于我还不能完全领悟,就不在这里误导大家了。

简单来说,就是我们通过一系列的骚操作,封装了一个方法,只需要传入贝塞尔曲线的 3 个关键点和笔触尺寸,就可以获取均匀的点序列。

+ (NSArray <NSValue *>*)pointsWithFrom:(CGPoint)from
                  to:(CGPoint)to
                control:(CGPoint)control
               pointSize:(CGFloat)pointSize;

下面我们固定贝塞尔曲线的 起始点控制点 ,只移动 终止点 ,来验证一下这个方法是否可靠。

可以看到,在移动过程中,点和点的距离基本是保持一致的,并且是均匀的。通过这个「神奇」的方法,我们终于画出了平滑且均匀的曲线。

五、绘画板功能实现

终于讲完了最麻烦的部分,接下来简单介绍一下绘画板基本功能的实现。

1、颜色混合

在以往的例子中,我们在开始一次渲染之前,都会调用 glClear(GL_COLOR_BUFFER_BIT) 来清除画布,因为我们不希望保留上次的渲染结果。

但是对于一个绘画板来说,我们要不断地往画布上画东西,所以是希望保留上次结果的。因此,在绘制之前不能执行清除的操作。

另外,由于我们的画笔可能是半透明的,所以新绘制的颜色需要和画布上已经存在的颜色进行混合。因此在绘制开始之前,需要开启混合选项。

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

2、笔触调整

笔触有 3 个属性可以调整: 颜色、尺寸、形状 。它们本质上都是对点图元的调整,通过 uniform 变量的形式,将颜色、尺寸、纹理传入着色器并应用。

3、橡皮擦

GLPaintView 在初始化的时候,需要传入一个背景色参数,当用户切换到橡皮擦功能的时候,内部只是单纯地将画笔的颜色切换成背景色,于是就产生了橡皮擦的效果。

4、撤销重做

撤销重做功能需要依赖两个栈来实现。我们把用户的手指从 按下屏幕到离开屏幕 这一过程中产生的数据,定义为一个操作对象,这个操作对象保存了归一化后的点序列,以及点的属性。

@interface MFPaintModel : NSObject

/// 笔刷尺寸
@property (nonatomic, assign) CGFloat brushSize;
/// 笔刷颜色
@property (nonatomic, strong) UIColor *brushColor;
/// 笔刷模式
@property (nonatomic, assign) GLPaintViewBrushMode brushMode;
/// 笔触纹理图片文件名
@property (nonatomic, copy) NSString *brushImageName;
/// 点序列
@property (nonatomic, copy) NSArray<NSValue *> *points;

@end

撤销重做的代码实现大概像这样子:

- (void)undo {
  if ([self.operationStack isEmpty]) {
    return;
  }
  MFPaintModel *model = self.operationStack.topModel;
  [self.operationStack popModel];
  [self.undoOperationStack pushModel:model];

  [self reDraw];
}

- (void)redo {
  if ([self.undoOperationStack isEmpty]) {
    return;
  }
  MFPaintModel *model = self.undoOperationStack.topModel;
  [self.undoOperationStack popModel];
  [self.operationStack pushModel:model];

  [self drawModel:model];
}

需要注意的是,由于 撤销操作 需要先清除画布,所以每次都需要重绘。而 重做操作 可以利用上次绘制的结果,所以每次只需要绘制一个步骤即可。

源码

请到 GitHub上查看完整代码。

到此这篇关于在iOS中使用OpenGL ES实现绘画板的方法的文章就介绍到这了,更多相关iOS 绘画板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-03-13

iOS简单画板开发案例分享

最近在学习Quartz2D,学习了一个简单画板的实现,现在把实现过程记录一下. 主要用到的点就是画线,截屏,绘制图片,选择图片,以及保存所有绘制的线. 首先在storyboard上布局好控件,设置约束等等,最后的效果是这样: 自定义画板DrawView,使用时可能是从xib中加载,也可能是手动创建,所以创建对象的方法需要实现两个: #import <UIKit/UIKit.h> @interface DrawView : UIView /** 线宽 */ @property (nonatomi

iOS给图片添加滤镜&使用openGLES动态渲染图片详解及实例

iOS给图片添加滤镜&使用openGLES动态渲染图片 给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIFilter滤镜 #3.用CIContext将滤镜中的图片渲染出来 #4.导出渲染后的图片 参考代码: //导入CIImage CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage

分享一个iOS下实现基本绘画板功能的简单方法

代码部分 TouchView.h 复制代码 代码如下: #import <UIKit/UIKit.h>    @interface TouchView : UIView  {      NSMutableArray *points;      NSArray *points_all;      CGContextRef context;      UIColor *paint_clr;  }  @property (strong,nonatomic) NSMutableArray *point

IOS实现的简单画板功能

效果图 设计要求 1.画笔能设置大小.颜色 2.有清屏.撤销.橡皮擦.导入照片功能 3.能将绘好的画面保存到相册 实现思路 1.画笔的实现,我们可以通过监听用户的 平移手势 中创建 UIBezierPath 来实现线条的绘制 2.撤销功能,我们先来看下撤销功能,我们会想到用一个数组队列将用户的每一次的笔画都加入到数组中,然后撤销的时候只需要将最后添加进去的笔画pop掉,重新绘制就可以了 3.清屏功能就简单了,只需要将上面说到的那个数组清空重新绘制下就可以了 4.导入照片功能,可以用系统的 UII

Python基于opencv实现的简单画板功能示例

本文实例讲述了Python基于opencv实现的简单画板功能.分享给大家供大家参考,具体如下: import cv2 import numpy as np drawing = False # true if mouse is pressed ix,iy = -1,-1 def nothing(x): pass # mouse callback function def draw_circle(event,x,y,flags,param): global ix,iy,drawing g = par

iOS tableview实现简单搜索功能

本文实例为大家分享了tableview实现搜索功能的具体代码,供大家参考,具体内容如下 一.先用xcode创建好工程 通过xib文件来初始化视图控制器 二.编写代码 1.先为NSDictionary创建一个分类 实现字典的深拷贝 .h文件 #import <Foundation/Foundation.h> @interface NSDictionary (MutableDeepCopy) - (NSMutableDictionary *)mutableDeepCopy; @end .m文件 #

Android仿iOS侧滑退出当前界面功能

我们都知道在ios手机上面,有一个侧滑退出当前界面的功能,但是在安卓手机上系统没有给我们提供这样的功能,但是这依然阻挡不了强大的安卓的定制功能,我们完全可以自己定制一套这样的功能. 首先看下效果图: 分析: (1)要想模仿ios的这种效果,因为我们通过手指的滑动,所以这里肯定跟我们的滑动事件有关系(onInterceptTouchEvent,onTouchEvent这两个方法的关系,如果不清楚,请直接查阅事件传递机制原理) (2)我们要想直接拦截我们的所有触摸事件,我们可以在上层父级布局中进行拦

Android编程实现画板功能的方法总结【附源码下载】

本文实例讲述了Android编程实现画板功能的方法.分享给大家供大家参考,具体如下: Android实现画板主要有2种方式,一种是用自定义View实现,另一种是通过Canvas类实现.当然自定义View内部也是用的Canvas.第一种方式的思路是,创建一个自定义View(推荐SurfaceView),在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制:第二种方式的思路是,先用Canvas绘制一张空的Bitmap,通过ImageView的setImageBitmap()方

python+pygame简单画板实现代码实例

疑问:pygame已经过时了吗? 过没过时不知道,反正这玩意官方已经快四年没有更新了.用的人还是蛮多的(相对于其他同类项目),不过大家都是用来写写小东西玩一玩,没有人用这个做商业项目.pygame其实就是SDL的python绑定,SDL又是基于OpenGL,所以也有人用pygame+pyOpenGL做3D演示什么的.真的要写游戏的话pygame的封装比较底层,不太够用,很多东西都要自己实现(当然自由度也高).文档也不太好,好在前人留下了很多文章.拿来练手倒是很不错的选择,可以用来实践很多2D游戏

JS实现简单路由器功能的方法

本文实例讲述了JS实现简单路由器功能的方法.分享给大家供大家参考.具体实现方法如下: var wawa = {}; wawa.Router = function(){ function Router(){ } Router.prototype.setup = function(routemap, defaultFunc){ var that = this, rule, func; this.routemap = []; this.defaultFunc = defaultFunc; for (v

Java编程实现游戏中的简单碰撞检测功能示例

本文实例讲述了Java编程中的简单碰撞检测功能.分享给大家供大家参考,具体如下: 今天在家正在写一个坦克大战的小游戏来玩,遇到了一个简单的圆和圆的碰撞检测的小问题, 碰撞检测的过程处理主要有以下三步: 1.碰撞检测(Collision Detection):返回两个或多个物体是否发生碰撞的布尔判断. 2.碰撞确定(Collision Determination):找到物体之间实际相交位置. 3.碰撞响应(Collision Response):针对两个物体之间的碰撞决定采取何种操作. 下面是关于

IOS百度地图导航开发功能实现简述

以下通过图文并茂的方式给大家讲述百度地图导航开发功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioToolbox.framework.ImageIO.framework.CoreMotion.framework.CoreLocation.framework.CoreTelephony.framework.MediaPlayer.framework.AVFoundation.fr