高效的线路平滑和/或简化
我正在 Actionscript 中创建一个绘画应用程序（尽管我的问题与 Actionscript 无关）。基本思想是在按下鼠标时开始绘画并跟踪鼠标移动。我想要实现的是：
- 减少鼠标“噪音”并
- 创建更平滑的线条。
现在，(1) 是有问题的，因为我在几秒钟内收到了数千次鼠标移动。由于 (1)，线条可能看起来呈锯齿状。 目前的想法是：当用户完成绘制线条时，我将所有运动存储在一个数组中并减少它们（中值阈值），然后使用样条算法重新创建一条线条。
还有更好的方法吗？
I am creating a painting application in Actionscript (although my question is not Actionscript related). The basic idea is to start painting when the mouse is pressed and tracking the mouse movements. What I want to achieve is:
- reduce mouse "noise" and
- create more smoother looking lines.
Right now, (1) is problematic because I get thousands of mouse movements within a few seconds. Due to (1) the line can look jaggy.
What current idea: when the user finishes drawing the line, I store all movements in an array and reduce them (median threshold) and then use a spline algorithm to recreate a line.
Any better approaches?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
请参阅 Sarah Frisken 撰写的高效曲线拟合。也可在作者页面获取。
See Efficient Curve Fitting by Sarah Frisken. Also available at the author's page.
Mike Bostock 这里有一些很好的例子线路简化。他指出 Douglas-Peucker 算法众所周知。然而，Visvalingam 似乎更有效。
Mike Bostock has some good examples here Line Simplification. He points out that the Douglas-Peucker algorithm is well know. However Visvalingam appears to be more effective.
（在寻找相同的问题时遇到了你的问题，并且碰巧整理了我们自己的一些东西）
http://willowsystems.github.com/jSignature/#/about/linesmoothing/
（与 SEO 兼容的链接：
http://willowsystems.github.com/jSignature/%2523%252Fabout %252Flinesmoothing%252F.html）
您描述的问题有两个方面。
1. 您想要“简化”捕获数据。
2. 您想在点内画一条漂亮的线（“拟合曲线”）。
上面引用的 Simplify.js 确实不错，但它只给你加分。对于 jSignature，我们想要一种超高效、非滞后的曲线拟合算法。
请参阅上面的链接，了解一种（我们的）拟合点之间曲线（贝塞尔曲线，又名“三次曲线”）的方法的说明。它允许您保留用户绘制的线，而只是延迟连接最后 2 个坐标，或者您可以像这样简化并重新绘制整条线。
（我们发布该算法是有意为之，目的是为了建立“现有技术”并排除组合方法的可专利性。这意味着，我们没有将自己的专利枷锁放在该算法上，并且进行了艰苦的搜索，并没有发现它是当然，可能会有一些专利巨魔发现您实施该方法存在问题，但至少不是我们。所以，享受吧。）
演示链接在鼠标移动时使用 4 像素跳跃。这很粗糙，但对于数据的实时“简化”来说是可以的。如果您有能力捕获整个笔划并重新绘制全部内容，当然可以使用 simple.js。
(bumped into your question while looking for same, and happened to put together something of our own)
http://willowsystems.github.com/jSignature/#/about/linesmoothing/
(SEO-compatible link to same:
http://willowsystems.github.com/jSignature/%2523%252Fabout%252Flinesmoothing%252F.html)
The issue you describe is two-fold.
1. You want to 'simplify' the capture data.
2. You want to draw a nice-looking line ('fit a curve') within the points.
Simplify.js quoted above is indeed good, but it only gives you points. For jSignature we wanted to a super-efficient, non-lagging curve-fitting algorithm.
See link above for explanation of one (our) approach to fitting (Bezier aka 'cubic') curves between points. It allows you to keep the line the user drew and just lag on connecting the last 2 coordinates, or you can simplify and redraw the the whole line like that.
(Our publication of the algorithm was intentional, as to establish "prior art" and preclude petentability of the combined method. This means, we don't put our own patent yoke on the algorithm and, searched hard and did not find it to be patented elsewhere. Of course there can be some patent troll out there that may find an issue with you implementing the method, but, at least, not us. So, enjoy.)
The demo link is using 4-pixel skip on mouse movement. This is crude, but OK for real-time 'simplification' of data. If you have the luxury of capturing the whole stroke and redrawing it all, certainly, use simplify.js.