多个画布上的paperjs事件

Question

我试图了解paperjs如何与多个画布一起工作。 我想同时使用两个不同的画布来处理两个不同的图像。 现在，我仍在关注事件的管理方式。

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

我对内联paperscript和javascript之间的区别仍然感到困惑。 我花了一段时间才能够使用外部js文件，而不是全部使用内联（未定义画布）。 现在，我希望每次单击鼠标按钮时都可以看到“鼠标”，但只能看到一次。 我希望能够使其与两个画布一起使用，并且我也希望能够一次定义每个功能，而不是为每个画布编写相同的代码。

一种不同的方法有效：

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


}
};

这个版本确实可以用，但是我无法用一种方法来管理所有鼠标。

编辑jsfiddle链接

Answer 1

在第一个代码示例中，尝试绑定事件处理程序时出错。
当您这样做时：

paper.view.onMouseUp = onMouseUp(event);

您实际上是将调用onMouseUp(event)的返回值分配给paper.view.onMouseUp属性。
这就是为什么您只在加载时看到控制台日志一次的原因，然后为什么什么也没有发生。
您要执行的操作是：

paper.view.onMouseUp = onMouseUp;

关于问题的另一部分，这是一个简化的示例，向您显示如何使用相同的命名函数通过不同的PaperScope实例处理不同画布上的事件。
单击两个画布，然后查看控制台日志。

 // 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>