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

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

三、怎么使曲线变平滑

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

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

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

我们知道贝塞尔曲线的方程是 P = (1 - t)^2 * P0 + 2 * t * (1 - t) * P1 + t^2 * P2 ， t 是唯一的变量，其取值范围是 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;

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

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