代码之家  ›  专栏  ›  技术社区  ›  Nick Retallack

从Tablet输入绘制平滑线

  •  2
  • Nick Retallack  · 技术社区  · 15 年前

    当用户在平板电脑上拖动触笔时,您将收到一系列坐标。您需要用一条平滑的线来近似笔的路径,在它后面只跟踪几个采样点。你会怎么做?

    换言之,当用户使用平板电脑绘制一条平滑、响应良好的线条时,您将如何渲染它?仅仅用直线连接点是不够的。真正的绘图程序在曲线绘制方面做得更好,不管采样点有多近或多远。有些人甚至让你给他们一个数字来表示要做的平滑处理的数量,这就解释了笔和手的抖动。我在哪里能学会做这些事情?

    2 回复  |  直到 11 年前
        1
  •  2
  •   Fgblanch    11 年前

    我知道这是一个老问题,但我也有同样的问题,我提出了两个不同的解决方案:

    • 第一种方法是使用两种分辨率:一种,当用户插入用直线连接的路径点时。第二,当用户完成笔画后,删除线条并在其上绘制和样条曲线。那应该比直线更平滑。

    • 第二种方法是用前一个采样点的加权平均值平滑新点。因此,每次您获得一个新的采样点[x1,y1]而不是直接绘制它时,您都会提取上一个采样点[x2,y2]并创建一个具有两个点加权平均值的新中间点。伪代码可能类似于:

      newpoint=[x1,y1]; oldpoint=[x2,y2];

      点2油漆=[(x1*0.3)+(x2*0.7),(y1*0.3)+(y2*0.7)] 旧点=新点;

      加权平均值的系数为0.7和0.3(您可以更改它们以获得所需的平滑度:)

    我希望这会有帮助

    更新12月13日:这里有一篇文章解释了不同的绘图方法,有一些好的概念可以应用(边缘平滑、贝塞尔曲线、平滑关节)

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

        2
  •  0
  •   nick2083    15 年前

    我从来没有必要实现这些(只是为了学术目的),但你可能想看看维基百科的 interpolation 文章。

    摘自文章:

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

    在工程和科学中,一个人常常有许多数据点,如通过抽样或实验获得的,并试图构造一个与这些数据点紧密匹配的函数。这被称为曲线拟合或回归分析。插值是曲线拟合的一种特殊情况,函数必须精确地通过数据点。

    希望它有帮助。