Question

我在使用vanilla JS的网页上使用PaperJS。

一个画布可以工作，但是当我尝试另一个画布时，只会渲染最后一个被调用的画布。没有错误被抛出，据我所知，我使用new PaperScope();

正确地确定了它们的范围

查看此处的示例： https://codepen.io/anon/pen/bWgEXN?editors=0010

我有两个功能（两者都相同），应该在页面上定位2个独立的画布元素。

我试图像这样设置范围：

存储在窗口中的全局对象：

window.paper = {};

设置1：

function pattern_1(selector) {

  window.papers.paper_1 = new paper.PaperScope();

  const paperObj = window.papers.paper_1;
  const pattern = document.querySelector(selector);

  paperObj.install(window);

  window.onload = function () {
    paperObj.setup(pattern);
    // Etc etc, more code follows...
  }

}

设置2（相同但名称不同）：

function pattern_2(selector) {

  window.papers.paper_2 = new paper.PaperScope();

  const paperObj = window.papers.paper_2;
  const pattern = document.querySelector(selector);

  paperObj.install(window);

  window.onload = function () {
    paperObj.setup(pattern);
    // Etc etc, more code follows...
  }

}

然后如下调用它们：

pattern_1('#item_1');
pattern_2('#item_2');

HTML如下所示：

<canvas id="item_1"></canvas>
<canvas id="item_2"></canvas>

我不能为我的生活弄清楚我在哪里错了？

任何将这些作为单独项目确定范围的帮助都会很棒。他们不需要以任何方式彼此沟通。

谢谢。

Answer 1

您正在覆盖window.onload方法。您拥有的简化版本是：

function pattern_1(selector) {
  // code code code
  window.onload = function () {
    // Etc etc, more code follows...
  }
}

function pattern_2(selector) {
  // code code code
  window.onload = function () {
    // Etc etc, more code follows...
  }
}
pattern_1(...);
pattern_2(...);

当您致电pattern_1时，您为onload定义了window方法。当您致电pattern_2时，覆盖 onload的{{1}}方法。这就是为什么只有你的第二个画布正在接收更新。

您可以使用window添加多个事件监听器：

addEventListener

有了这个，你的每个方法都会添加一个事件处理程序，所以这两个都会收到事件。

如何在同一页面上并排运行2个单独的PaperJS画布项目？

1 个答案: