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

记录Paper.js路径对象并稍后重新绘制

1 个答案: