html - Paper.jsパスオブジェクトを記録し、後で再描画します

Question

マウスPaper.jsで描画します。これらのストロークを維持し、ビデオ再生と同じ速度で再生する必要があります。どうすればこれを達成できますか？

Answer 1

paper.js では、onFrame()関数は 1 秒あたり最大 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 タイミング イベントを使用することもできます: How can I use javascript timing to control on mouse stop and on mouse move events