0

我需要在网页上绘制一条曲线以响应 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]

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

一旦我对平滑的点数据感到满意,我想我可以为每个点构造一个垂直向量,并沿 + 和 - 方向创建一个左点和右点,比如 3px(如果我想要 6px 画笔)。

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

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

4

1 回答 1

0

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

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

于 2016-05-16T01:36:15.277 回答