使用javascript存储用户的绘图

时间:2017-02-28 19:06:06

标签: javascript canvas html5-canvas paperjs pixijs

我需要存储用户绘制的路径,以及任何给定点的速度。基本记录如何绘制线条。我必须能够在之后操纵/编辑绘图(路径和速度)。

这样的东西,还有速度/速度信息:

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

我想知道我该怎么存储速度?有没有比存储指针位置更好的方法,例如每秒10次?

2 个答案:

答案 0 :(得分:1)

您可以将其存储在自己定制的对象中。创建一个事件监听器,在每个mousemove事件被单击后监听它:

var pointArray = [];

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

    pointArray.push(pointData);
}

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

答案 1 :(得分:0)

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

上面链接的

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

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