多个画布上的paperjs事件

Question

I'm trying to understand how paperjs works with multiple canvases. I'd like to have two different canvases to work on two different images at the same time. Right now I'm stuck on how events are managed.

window.onload = function() {
    paper.install(window);
    var mypapers = [];

    initPaper(0, $("#canvas1")[0]);
    //initPaper(1, $("#canvas2")[0]);

    function initPaper(id, canvasElement) {
        mypapers[id] = new PaperScope();
        paper = mypapers[id];
        paper.activate();
        paper.setup(canvasElement);

        // Create a raster item using the image tag with id='mona'
        var raster = new paper.Raster('mona');
        raster.position = new paper.Point(raster.width / 2 + 2, raster.height / 2 + 2);

        var pointLayer = new Layer();
        pointLayer.activate(); 

        paper.view.onMouseUp = onMouseUp(event);

    }
    /////////////////////////////////////
    function onMouseUp(event) {
        console.log('mouseup');
    }
};

I am still confused on the difference between inline paperscript and javascript. It took me a while to be able to use an external js file instead of having all inline (canvas not defined). Right now I'd like to see the "mouseup" every time i click the mousebutton, but instead I see it only once. I'd like to be able to make it work with the two canvases and I also would like to be able to define each funtion once instead of writing the same code for every canvas.

A different approach works:

paper.install(window);

window.onload = function() {

var mypapers = [];

initPaper(0, $("#canvas1")[0]);
//initPaper(1, $("#canvas2")[0]);

function initPaper(id, canvasElement) {
    mypapers[id] = new paper.PaperScope();
    paper = mypapers[id];
    paper.setup(canvasElement);

    // Create a raster item using the image tag with id='mona'
    var raster = new paper.Raster('mona');
    raster.position = new paper.Point(raster.width / 2 + 2, raster.height / 2 + 2);

    paper.view.onMouseUp = function(event) { console.log('mouseup'+id);}


}
};

This version does indeed work but then I can't have a single method to manage all mouseups.

edit jsfiddle link

Answer 1

In your first code example, you are making an error when trying to bind the event handler.
When you do:

paper.view.onMouseUp = onMouseUp(event);

You are actually assigning the return value of the call onMouseUp(event) to paper.view.onMouseUp property.
That's why you only see the console log one time on load and why nothing happen then.
What you want to do instead is:

paper.view.onMouseUp = onMouseUp;

About the other part of your question, here is a simplified example showing you how you can use the same named function to handle events on different canvas through different PaperScope instances.
Click on both canvas and see the console logs.

 // install paper in the current scope so we can directly use PaperScope, Raster... paper.install(window); // init paper on both canvases initPaper('canvas1'); initPaper('canvas2'); function initPaper(canvasId) { // create a new scope var scope = new PaperScope(); // set it up on provided canvas scope.setup(canvasId); // activate it so that newly created items will be created within this scope scope.activate(); // create a raster var raster = new Raster('image'); // position it at view center raster.position = scope.view.center; // bind external handler to view mouse up event scope.view.onMouseUp = onMouseUp; } // external handler used for both canvases function onMouseUp(event) { console.log('mouseup'); } 

 html, body { margin: 0; overflow: hidden; height: 100%; } main { display: flex; height: 100vh; } canvas { flex: 1; border: 1px solid; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script> <main> <canvas id="canvas1" resize></canvas> <canvas id="canvas2" resize></canvas> </main> <img id="image" src="http://placehold.it/120x120&text=image1"></img>