从平板电脑输入绘制平滑线

Question

当用户在平板电脑上拖动触控笔时，您会收到一系列坐标。你想用一条平滑的线来近似画笔的路径，只在它后面拖几个采样点。你会怎么做呢？

换句话说，当用户使用平板电脑绘制时，您将如何呈现出流畅的响应式线条？简单地用直线连接点是不够的。真正的绘图程序在弯曲线方面做得更好，无论样本点有多近或多远。有些甚至让你给他们一个数字来表示要完成的平滑量，考虑到笔和手的抖动。我在哪里可以学做这些东西？

Answer 1

我知道这是一个老问题，但我遇到了同样的问题，我提出了 2 个不同的解决方案：

• 第一种方法是使用两种分辨率：一种，当用户插入用直线连接它们的路径点时。二，当用户完成笔画时，删除线条并绘制样条线。那应该比直线更平滑。

• 第二种方法是使用采样点的加权平均值来平滑新点。所以每次你得到一个新点 [x1,y1] 而不是直接绘制它，你取之前的点 [x2,y2] 并用两个点的加权平均值创建一个新的中间点。伪代码可能是这样的：

  newPoint = [x1,y1];
   oldPoint = [x2,y2];
  
   point2Paint = [(x1*0.3) + (x2*0.7), (y1*0.3) + (y2*0.7)];
   oldPoint= newPoint;
  

加权平均值的系数分别为 0.7 和 0.3（您可以更改它们以获得所需的平滑：）

我希望这会有所帮助

12 月 13 日更新：这是一篇解释不同绘图方法的文章，有一些很好的概念可以应用（边缘平滑、贝塞尔曲线、平滑关节）

http://perfectionkills.com/exploring-canvas-drawing-techniques

Answer 2

我从来不需要实现这些（仅用于学术目的），但您可能想看看维基百科的 interpolation 文章。

摘自文章：

插值是一种在一组离散的已知数据点范围内构造新数据点的方法。

在工程和科学领域，人们通常拥有许多通过抽样或实验获得的数据点，并尝试构建一个与这些数据点紧密匹配的函数。这称为曲线拟合或回归分析。插值是曲线拟合的一种特殊情况，其中函数必须完全通过数据点。

希望对你有帮助。