CODEWITHSUNDEEP
htmlcanvaspaperjs
igor
igor

Reputation: 85

Record Paper.js path object and redraw again later

I draw with a mouse Paper.js. I need to keep these strokes and replay them at the same rate as in the video replay. How can I accomplish this?

Upvotes: 2

Views: 1396

Answers (1)

beaslera
beaslera

Reputation: 863

In paper.js, the onFrame() function is called up to 60 times per second, while the onMouseMove() function "is called when the mouse moves within the project view", and contains the position of the mouse. By using both functions you can store the mouse motions and replay them later with close to the same time between positions.

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]);
        }
    }
}

I do not know the timing accuracy/resolution/dependability of onFrame(). Alternatively you could just use javascript timing events as in this answer: How can I use javascript timing to control on mouse stop and on mouse move events

Upvotes: 1

Related Questions