首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >记录Paper.js路径对象并稍后重新绘制

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

Stack Overflow用户
提问于 2012-04-15 20:57:09
回答 1查看 1.3K关注 0票数 2

我用鼠标Paper.js画图。我需要保留这些笔画,并以与视频回放相同的速率回放它们。我如何才能做到这一点呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-16 11:38:39

在paper.js中,onFrame()函数每秒被调用高达60次,而onMouseMove()函数“当鼠标在项目视图内移动时被调用”,并且包含鼠标的位置。通过使用这两个功能,您可以存储鼠标运动,并在以后重新播放它们,位置之间的时间接近相同。

代码语言:javascript
复制
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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10162206

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档