使用javascript存储用户的绘图

Question

我需要存储用户绘制的路径以及任何给定点的速度。基本上记录一条线是如何绘制的。之后，我必须能够操作/编辑绘图（路径和速度）。

像这样的事情，但也与转速/速度信息：

http://paperjs.org/examples/path-simplification

我不知道我应该如何存储速度是多少？比存储指针位置有更好的方法，例如每秒10次？

Answer 1

你可以将其存储在自己的定制对象。让事件侦听器监听到每个mousemove事件它被点击之后：

var pointArray = []; 

onMouseMove(event){ 
    var pointData = { 
     x: event.screenX, 
     y: event.screenY, 
     time: Date.now() 
    } 

    pointArray.push(pointData); 
} 

现在你有一个长pointArray充满位置&时间的信息！顺便说一下，每秒存储数据10次没有意义，因为如果鼠标不移动，只会获得冗余信息。最好只听mousemove。

Answer 2

任何行可以表示为个点的数目。如果您存储每个点的时间戳，则可以推断该线上任意两点之间的平均速度。

Paper.js上面链接的是一个有趣的JS代表路径的例子。我建议研究现有的库来创建和表示Javascript中的路径。从长远来看，与为自己的图书馆写入功能相比，它会节省您的时间。

这是一个相关的堆栈溢出答案有关Javascript绘图库的差异。

• Javascript Drawing Library