html - 记录 Paper.js 路径对象，稍后再重绘

Question

我用鼠标 Paper.js 绘制。我需要保留这些笔画并以与视频重播相同的速度重播它们。我怎样才能做到这一点？

Answer 1

在 paper.js 中，onFrame()函数每秒最多调用 60 次，而onMouseMove()函数“在鼠标在项目视图中移动时调用”，并包含鼠标的位置。通过使用这两个功能，您可以存储鼠标动作并稍后在位置之间几乎相同的时间重播它们。

var mousePosition = null;
function onMouseMove(event) {
    if (mousePosition != null) {
        var path = new Path();
        path.strokeColor = 'black';
        path.moveTo(mousePosition);
        path.lineTo(event.point);
    }
    mousePosition = event.point;
}

var recordedPositions = [];
var delayFrames = 60;
function onFrame(event) {
    if (mousePosition != null) {
        recordedPositions.push(mousePosition);
        if (recordedPositions.length > delayFrames) {
            var path = new Path();
            path.strokeColor = 'red';
            delayedPositionIndex = recordedPositions.length - delayFrames;
            path.moveTo(recordedPositions[delayedPositionIndex - 1]);
            path.lineTo(recordedPositions[delayedPositionIndex]);
        }
    }
}

我不知道 onFrame() 的计时精度/分辨率/可靠性。或者，您可以在此答案中使用 javascript 计时事件：如何使用 javascript 计时来控制鼠标停止和鼠标移动事件