用 javascript 存储用户的绘图

Question

我需要存储用户绘制的路径以及任意给定点的速度。基本上记录一条线是怎么画的。之后我必须能够manipulate/edit绘图（路径和速度）。

类似的东西，但也有 speed/velocity 信息：

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

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

Answer 1

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

Paper.js 正如您上面链接的那样，这是一个用 JS 表示路径的有趣示例。我建议研究现有的库以在 Javascript 中创建和表示路径。在长运行中，与编写自己的功能库相比，它会节省您的时间。

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

Javascript绘图图书馆

Answer 2

您可以将其存储在您自己定制的对象中。创建一个事件侦听器，在单击后侦听每个 mousemove 事件：

var pointArray = [];

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

    pointArray.push(pointData);
}

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

用 javascript 存储用户的绘图

Store user's drawing with javascript

javascript

canvas

html5-canvas

paperjs

pixi.js