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

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

另一种方法有效：

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 link

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>

多幅画布上的paperjs活动

1 个答案: