手写笔迹还原算法（InkCanvas）

最新推荐文章于 2024-10-14 12:30:10 发布

Fighting Horse

最新推荐文章于 2024-10-14 12:30:10 发布

阅读量4.7k

点赞数 5

分类专栏：图像算法杂编 C/C++ 文章标签：算法

本文链接：https://blog.csdn.net/luansxx/article/details/120960073

版权

C/C++ 同时被 2 个专栏收录

23 篇文章

订阅专栏

图像算法杂编

9 篇文章

订阅专栏

因产品需求，我们打造了自主的画笔组件InkCanvas，在我们的项目纸笔课堂、晓课堂中得到了很好的应用。同时我们也通过技术输出，在直播云项目中集成了组件的核心算法，升级了其涂鸦功能中的笔迹展示效果，在多类终端（Windows、Mac、Iphone/IPad、Android Phone/Pad）中，都有不错的表现。

我们今天就来分享一下画笔组件的核心算法之一 —— 手写笔迹还原算法。

手写笔迹还原是将一系列有序的坐标采样点，转换为连续的笔划线条曲线的过程。

比如我们用直线线段将这些点逐个连接起来，就实现了一个最简单的笔迹还原算法。但是这种算法效果肯定不会太好，比如不够光滑（当输入点比较稀疏时），连接点周边的曲线不连续。

所以我们需要一个更强大的算法，针对笔迹采样点做更进一步的特征提取，做更细致的处理，用更好的方案去定义、计算其几何轮廓，这样才能够还原出一些“原汁原味”的效果，也就是我们常说的体现书写风格。

1、笔迹输入设备

在讨论具体的还原算法之前，我们先要介绍一下笔迹点输入相关一些知识。

画笔笔迹输入来源于各种各样的设备，比如手写板，触摸屏，甚至于普通的鼠标也可以作为笔迹的输入设备。不管什么设备，其输出的都是一系列带元数据的坐标点，有些设备能够感知手写压力（比如通过电感线圈），还有些设备能够识别笔尖的粗细（接触面积）。设备的采样率也会不同，每秒10~200个点都有。

因此一个坐标点，其元数据可能包含：压力、接触面积、时间戳等。我们的画笔组件主要处理压力值，根据压力改变笔迹的粗细。

2、笔迹还原算法结构

通过尝试我们发现，手写笔迹还原最关键的两个效果是平滑和笔锋，有了这两个效果，差不多能够很好的体现书写风格。

要做到平滑，我们需要对输入的笔迹进行一些整理，我们会合并一些点，也会补充一些点，其中最关键的是 Bezier 插值算法的应用。

要还原笔锋，主要是对压力值做细致的处理，能够还原出笔划的粗细变化，同时让这种粗细变化尽量平滑。

当然，性能要求也是很关键的，毕竟实时书写的场景是在教学中是最常见的，所以算法本身也不能太过复杂，输出的图形不能对渲染模块有太高的要求和太大的压力。

最终，我们的笔迹还原方案使用的下面这样的算法结构。整个算法主要分为“路径整理”和“路径转换”两部分，每个部分又分别包含一些小的步骤，下面我们逐个介绍。

3、路径整理

针对输入的原始路径，我们需要做两方面的整理。

一方面，如果输入某一段路径的笔迹点比较稠密，并且路径也比较连续，那么我们可以用简化的路径来代替这部分路径，这样能够提升计算及渲染的性能，也减少了采样噪声（局部的轻微凸出点）、采样精度带来的影响。

另一方面，如果某一段路径的笔迹点比较稀疏，我们就需要在该路径上补充一些点，以达到减少曲率，增加圆滑度的效果。

需要说明的是，这里的算法需要在物理尺寸的分辨率下进行，这样还原出来的笔迹更贴近自然效果。实际上，所有经验参数都是基于物理尺寸实验确定的。

下面的对比图可以看出路径整理的效果。

这组数据来源于某个型号的手写板。左图是原始输入路径，右图是处理后的笔迹路径，通过插值补充了一些点，使得曲线变得更平滑。

下面我们详细介绍其中的算法过程。

3.1、预处理

在预处理阶段，需要做下列工作：

去除掉一些重复点

当相邻两个点的距离很小时，可以认为是重复点，去除其中一个。去重后的点保存于点数组 P 中。

转换为物理尺寸

将点的坐标转换到以Himetric（缇）为单位的值上，Himetric=0.001cm，采用常见的96dpi屏幕密度，这个转换就是乘以（2540/96）。

P[i] = P[i] * (2540.0 / 96.0)

计算路径累计长度 N

n[0] = 0；n[i]= n[i - 1] + length(P[i] - P[i - 1])；其中 length 为二维矢量长度，整个路径累计长度我们记为 l。

3.2、关键点分析（岐点）

岐点是笔迹路径上不连续的点，也是路径上关键特征点，在路径整理过程中，岐点是保留不做变动的。

首先我们计算所有点的包围矩形 R

R 的半周长为 d，结合之前计算的路径累计长度 l，点的总个数 c，我们计算出一个关键参数 s：

$s = 0.75 * l * l / (c * d)$

这个 s 怎么理解呢？首先 l / c 是相邻两点之间的平均距离， l / d 是可以看作是图形的分形维数。所以 s 描述的是最小可分辨路径长度，小于该长度的路径作为一个整体处理，不再还原其内部细节。

在上面的例子里面，这些数值为：

c = 36

d=1983.813 (约2cm）

l = 3582.698（约3.6cm）

s = 134.796 （约1.35mm）

在有了 s 之后，我们接下来寻找岐点。

首先需要计算路径上每一点的曲率，方法如下：对路径的每一个点，分别找出前后两个到该点的累计距离不小于 s 的第一个点，然后计算三点夹角的曲率（1 - 余弦cos）。

当三点在一条直线上，且方向一致时，曲率为0，三点形成直角时，曲率为1，但方向相反时，曲率为2。所以曲率越大，说明在该点的路径方向变化越大。

当曲率大于 0.8 时（78°），再找出附近所有点中曲率最大的点，这个点就是一个岐点。

为了加快计算，当曲率小于 0.035 时（15°）时，直接跳过附近（距离小于s）的点。

在上面的例子中，我们找到了6各岐点（包括两个端点，分别为第0，7，16，22，29，35个点）。

3.3、路径分段及方向计算

在这一步，我们对两个相邻岐点之间的路径切割为小段，并计算出路径在分段起点和终点的方向，为下一步的曲线拟合做准备。

分段的依据如下：

1、至少包含4个点（包含端点），除非碰到了岐点，有可能小于3

2、可以包含更多的点，只要这些点的方差小于某个值。

方差的计算方法如下：

取这些点中的5个点（包括两个端口，其他点均匀发布）p[i]，i=0,1,2,3,4,5

令矢量 $P = \sum (c(i) * p[i])$ ，其中 $c(i)=\prod ( (n[4] - n[0]) / (n[i] - n[j]) | j != i )$

则方差 $c = P \cdot P$

因为路径累计距离n是有方向性的，所以c[1]、c[3]是负数。

当这5个点中所有相邻点的距离都相等时，c=[32/3, -128/3, 64, -128/3, 32/3]，如果进一步这5个点在一条直线上，那么 c = 0。

完成分段后，还需要计算分段起点和终点的方向（切线）。

对于一个点P的切线方向，其切线 T 的计算方法如下：

如果该点是岐点：考虑后续（对于终点，则是前面）两个点：A、B， $T = A + 0.5 * B - 1.5 * P$
如果是中间点，考虑前面两个点 A、B 及后续一个点 C， $T = P + A + 0.5 * B - 2.5 * C$ ，并且下一个分段起点的切线与上一个分段终点的切线相反。

这里的方向都是指向内部的，所以在同一个点，前后两个分段的方向是相反的。

3.4、曲线拟合

曲线拟合就是用样条曲线来替代原先的分段路径。采用3阶 Bezier 拟合，每个曲线除了两个端点，还需要计算两个控制点。根据分段点的个数不同，计算的方式也不一样，具体为：

2个点：实际上退化为直线，控制点为连线的两个3等分点
3个点：退化为二次抛物线，假设二级 Bezier 的三个控制点为 A、B、C，且参数为 t 时，对应到中间点 P，即：

$P = s^2A + 2stB + t^2C$ ，其中 $s = 1 - t$

那么：

$B = (P - s^2A - t^2C) / 2st$

提升为3阶，则：

$B1 = 2B/3 + A/3 = (P/(st) - Ct/s + A(-s/t + 1)) / 3$

$B2 = 2B/3 + C/3 = (P/(st) + C(-t/s + 1) - As/t) / 3$

超过3个点：通过最小方差拟合为3阶曲线，同时还需要结合端点的切线，具体算法略过。

3.5、曲线展开

曲线展开就是将3阶Bezier曲线离散化，这里关键的问题是要离散到多少个点。

计算点的个数，取决于两个参数：t 和 c。

t 与笔迹粗细对数级相关，粗细为一个像素时，t 大概在3.98 缇（0.03mm）；

c 与曲线的曲率有关，它是 Bezier 4个控制点组成的 2 组相邻三角形的中线长度中的较大者。

但 $c < 0.5 * t$ 时，只展开为一个点（终点），否则展开为 sqrt(c / t) + 3 个点。可以看出，笔迹越粗，曲线越平直，展开的点越少。

最后将点的坐标转换为像素单位乘以（96/2540），就完成了我们整个笔迹点整理的过程。

4、路径转换

在这个阶段，我们将笔迹点的路径转换为可渲染的路径。过程中需要处理压力值，还有考虑各节点连接的平滑性。在生成渲染路径后，就可以交由渲染模块去展示了。

路径渲染通常有“轮廓”和“填充”两种模式，我们采用填充模式，因为“轮廓”渲染会涉及到各种线形样式配置，且各个渲染实现也不一致；相反“填充”模式就显得简单、明确，这也是文字字体系统使用的渲染方式。

渲染路径通常是有一系列作图命令组成，命令有下列类型：

MoveTo(A)，移动当前点P，开始一段新路径
LineTo(A)，画线到指定点A，连接P和A，完成作图后，当前点 P 变为 A
ArcTo(R, A)，以指定半径画椭圆弧到指定点 A，当前点 P 也在弧上，完成作图后，当前点 P 变为 A
QuadraticBezierTo(A, B)，以控制点 A 和端点 B，画一段二级 Bezier 曲线，当前点 P 是曲线的起点，完成作图后，当前点 P 变为 A
BezierTo(A, B, C)，以控制点 A、B 和端点 C，画一段三级 Bezier 曲线，当前点 P 是曲线的起点，完成作图后，当前点 P 变为 A

所以我们最终生成的渲染路径是一个长条包围区域，如下图：左边是轮廓示意图，右边是最终渲染效果。