CODEWITHSUNDEEP
canvaspathpaperjs
Ben Trono
Ben Trono

Reputation: 79

Why does paper.js path.onFrame not stop when changed from function to null

I am trying to use path.onFrame to animate the writing of a path, where segments are added during each frame. I need to be able to stop the specific frame event for that path after it is finished, without removing the path. Here is what I have:

path.onFrame = function(event) {

    if(pathSegs.length > 0) {
        if(pathSegs[0].length > 0) {
            path.add(pathSegs[0].shift());
        }
        else {
            pathSegs.shift();
            path = new Path(pathAttrs);
        }
    }
    else {
        console.log('chalkboard finished - should only call once');
        path.onFrame = null;
        //writeText1();
    }
}

pathSegs is an array of arrays of path segments and this writes one segment to the canvas on each frame until the outer array is empty. When I set path.onFrame = null I'd expect to overwrite the original function, however my console log continues to print on each frame. If I were to set path.onFrame = otherFunction() instead of null both functions would execute on each frame.

Why is this? I know I could work around my issue but I want to understand what is happening that won't let this version work.

note: the end goal will be to trigger another animation at the end of this one, i.e. writeText1()

paper sketch

Upvotes: 0

Views: 144

Answers (1)

sasensi
sasensi

Reputation: 4650

This is because you are reassigning a new Path instance to the path variable, each time a new letter starts, without reseting its onFrame property.
So the onFrame callback is actually reseted only for the last letter.

What you should do instead of using the Path onFrame property which is misleading in your case, is using the View onFrame property which will work the same.

Here is the corrected sketch.

view.onFrame = function(event) {

    if(pathSegs.length > 0) {
        if(pathSegs[0].length > 0) {
            path.add(pathSegs[0].shift());
        }
        else {
            pathSegs.shift();
            path = new Path(pathAttrs);
        }
    }
    else {
        console.log('chalkboard finished - should only call once');
        view.onFrame = null;
        //writeText1();
    }
}

Upvotes: 1

Related Questions