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

Question

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

Answer 1

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