在Canvas中将多边形线拟合到绘制像素的算法？

Question

假设我创建a JS tool，允许自由在画布上绘制任何我想要的东西，这样我就可以使用鼠标制作一幅写意画，这样简单：

是否有可用于将一系列多边形线拟合到这些绘制像素的算法？你显然需要能够选择你想要的精确度，例如折线可以有20个点，或者它可以有1000个点，这使得它非常准确。

此外，我不确定它是如何工作的，因为绘制的“线”的宽度/厚度超过1像素。就像你有一个直径为100px的大圆圈一样，算法如何才能适应“直线”。

这种类型的算法是否有特定名称，用于将点拟合到形状？

Answer 1

不是尝试从像素重新构造折线，而是在用户绘制线条时更容易保存每个鼠标移动位置。那些保存的位置就成了你的折线。

您正在寻找路径简化算法。

我见过的最常见的算法是使用Ramer-Douglas-Peucker算法来消除＆＃34; extra＆＃34;偏离理想线的距离太远了。

Mike Bostock（AMAZING d3库的创建者）做了一个很好的例子，展示了消除＆＃34;额外＆＃34;路径上的点：bost.ocks.org/mike/simplify

如果你正在使用nodeJS，Vladimir Agafonkin有一个简化算法，它也适用于NodeJS：https://github.com/mourner/simplify-js

祝你的项目好运！