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

Question

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

Answer 1

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

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 计时事件:How can I use javascript timing to control on mouse stop and on mouse move events