我正在创建一个允许用户在画布上绘图的Web应用程序(使用鼠标或触摸事件)。
捕获用户使用鼠标或画布绘制的路径的方法与TLC演示的in this blog post非常接近。
现在我想做的不同就是:
存储绘制的捕获坐标 在数组中(并用于绘图)
“采样”捕获的数据,即仅 使用一些点来绘图 用户绘制的路径 屏
我目前确定的是如何“采样”点数组。
所以为了更好地解释自己,这就是我的想法:
用户在画布上绘制路径(用手指或鼠标)
mouseover / touchmove事件共捕获了20个点
如果我们要绘制使用全部20个点绘制的路径,那将是非常杂乱且不平滑的。所以我想要的是将点数从20减少到8,并使用贝塞尔曲线连接它们?
只是想看看是否有人实现了类似的东西。如果有人在ipad / iphone上播放飞行控制,当用户绘制飞机的路径时,他们通过使用一些touchmove点而不是所有这些来实现。也许他们使用计时器?
答案 0 :(得分:0)
我正在寻找的答案原来是Ramer–Douglas–Peucker algorithm。
如果有兴趣的话,这是算法的javascript实现 - https://gist.github.com/826148