使用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充满了位置＆amp;时间信息！顺便说一句，每秒存储数据10次是没有意义的，因为如果鼠标没有移动，你只会获得冗余信息。最好只听一下mousemove。

Answer 2

任何行都可以表示为多个点。如果存储每个点的时间戳，您将能够推断线上任意两点之间的平均速度。

上面链接的

Paper.js是一个在JS中表示路径的有趣示例。我建议研究现有的库来创建和表示Javascript中的路径。从长远来看，与为函数编写自己的库相比，它将节省您的时间。

这里是关于Javascript绘图库差异的相关Stack Overflow答案。

• Javascript Drawing Library