我需要在网页上绘制一条曲线以响应 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 进行渲染。
但我猜这必须解决问题。我不想重新发明轮子。我要在这里问,以防有人不得不解决类似的问题。