用javascript存储用户的绘图[关闭]答案

【问题标题】：Store user's drawing with javascript [closed]用javascript存储用户的绘图[关闭]
【发布时间】：2017-07-19 21:37:26
【问题描述】：

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

类似的东西，但也有速度/速度信息：

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

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

【问题讨论】：

标签： javascript canvas html5-canvas paperjs pixi.js

【解决方案1】：

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

var pointArray = [];

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

    pointArray.push(pointData);
}

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

【讨论】：

有道理。我会考虑的。
为什么在所有鼠标事件都具有高分辨率时间戳时使用 Date 对象。 event.timeStamp 以毫秒为单位，精确到 1 微秒
我刚刚在 FFox 中测试了您的方法，我得到了 124 个console.logs，在值更改之前读取了18446744072697221000。 Date.now() 效果更好。
@Blindman67 您将如何使用高分辨率时间戳？ DOM 计时器仅以毫秒为单位运行，您不能使用雇用时间戳“重播”记录。
@Blindman67 你没有回答这个问题。您将如何使用该高分辨率时间戳？ requestAnimationFrame() 上限为 60fps，setTimeout() 上限为 1 毫秒...

【解决方案2】：

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

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

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

Javascript Drawing Library

【讨论】：

时间戳是个好主意！恐怕平均速度还不够，所以可能行不通。无论如何，我会进一步调查这种方法......