采集捕获的点数据

时间:2011-06-09 13:09:10

标签: html5 canvas

我正在创建一个允许用户在画布上绘图的Web应用程序(使用鼠标或触摸事件)。

捕获用户使用鼠标或画布绘制的路径的方法与TLC演示的in this blog post非常接近。

现在我想做的不同就是:

  • 存储绘制的捕获坐标 在数组中(并用于绘图)

  • “采样”捕获的数据,即仅 使用一些点来绘图 用户绘制的路径 屏

我目前确定的是如何“采样”点数组。

所以为了更好地解释自己,这就是我的想法:

  1. 用户在画布上绘制路径(用手指或鼠标)

  2. mouseover / touchmove事件共捕获了20个点

  3. 如果我们要绘制使用全部20个点绘制的路径,那将是非常杂乱且不平滑的。所以我想要的是将点数从20减少到8,并使用贝塞尔曲线连接它们?

  4. 只是想看看是否有人实现了类似的东西。如果有人在ipad / iphone上播放飞行控制,当用户绘制飞机的路径时,他们通过使用一些touchmove点而不是所有这些来实现。也许他们使用计时器?

1 个答案:

答案 0 :(得分:0)

我正在寻找的答案原来是Ramer–Douglas–Peucker algorithm

如果有兴趣的话,这是算法的javascript实现 - https://gist.github.com/826148