从（Wacom）笔数据数组中绘制网页中的平滑曲线答案

【问题标题】：Draw smooth curve in webpage from array of (Wacom) pen data从（Wacom）笔数据数组中绘制网页中的平滑曲线
【发布时间】：2016-05-14 23:34:28
【问题描述】：

我需要在网页上绘制一条曲线以响应 Wacom Pen 生成的数据。所以 JavaScript 会收到一个 x,y,pressure 数据数组。

我可以加入这些点，但我想让它无标度。因此，即使您放大查看单个字形，它仍然看起来不错。

我想以某种方式平滑数据。因此，如果原始数据是 ... (10,5) (11,6) (12,6) (13,6) (14,5)，那么在平滑之后它可能看起来像 (10,5.8) (11,5.95 ) (12,6.15) (13,5.7) (14,5.2) 等当然取决于区间之外发生的事情。

我可以通过在点之间放置弹簧并设置张力来做到这一点。在一次通过中，每个点都会被拉向对齐。比如说，我可以在随后的 10 次传球中每一次减少 10% 的张力。

或者可能是某种低通滤波：pt_out[n] = .9*pt_out[n-1] + .1*pt_in[n]

而且我需要小心识别运动开始和停止的位置，这样它就不会尝试对笔不在纸上的点进行平均。

一旦我对平滑的点数据感到满意，我想我可以为每个点构造一个垂直向量，并在 + 和- 方向。

然后我可以从这些左右点构造一个三角形条带，并使用GL进行渲染。

但我猜这是必须解决的问题。我不想重新发明轮子。我要在这里问，以防有人不得不解决类似的问题。

【问题讨论】：

你提供了很多“我可以......”，所以：开始做所有这些事情，看看这是否会导致胜利？实际上，您的问题没有真正的问题，只是大声思考如何开始，这还不是涉及 Stackoverflow 的重点。 Stackoverflow 是在您开始编写代码之后出现的，尽管您确定它应该可以工作，但该代码仍然无法工作，并且您自己的调试并没有揭示它为什么会损坏。也许从en.wikipedia.org/wiki/… 开始？（或者，使用其他人已经编写的代码）

【解决方案1】：

我认为平滑数据点不会完全解决您的问题。如果您仍然通过用直线连接平滑的数据点来绘制曲线，那么当您放大到足够近时，曲线仍然看起来是锯齿形的。

如果你可以使用 SVG 来渲染曲线，你可以使用 SVG 路径，它可以绘制二次或三次贝塞尔曲线。当然，您必须根据数据点计算贝塞尔曲线的控制点，这可以通过 Catmull-Rom 样条线来完成。

【讨论】：