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