我用鼠标 Paper.js 画画。我需要保留这些笔画并以与视频重播相同的速率重播它们。我怎样才能做到这一点?
最佳答案
在 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
关于html - 记录Paper.js路径对象,稍后再重绘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10162206/