多個畫布上的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>