如何在同一页面上并排放置 2 个单独的 PaperJS canvas 项运行？

Question

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

一个 canvas 有效，但当我尝试另一个时，只有最后调用的 canvas 会呈现。没有错误被抛出，据我所知，我正在使用 new PaperScope();

正确地确定它们的范围

看这里的例子： https://codepen.io/anon/pen/bWgEXN?editors=0010

我有 2 个函数（都相同）应该针对页面上的 2 个单独的 canvas 元素。

我正在尝试像这样设置范围：

全局对象存储在window:

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 时，您为 window 定义了 onload 方法。当您调用 pattern_2 时，您 覆盖了 window 的 onload 方法。这就是为什么只有您的第二个 canvas 收到更新。

您可以使用 addEventListener:

添加多个事件侦听器

function pattern_1(selector) {
  // code code code
  window.addEventListener("load", function () {
    // Etc etc, more code follows...
  });
}

function pattern_2(selector) {
  // code code code
  window.addEventListener("load", function () {
    // Etc etc, more code follows...
  });
}
pattern_1(...);
pattern_2(...);

这样，您的每个方法都会添加一个事件处理程序，因此它们都会收到该事件。

如何在同一页面上并排放置 2 个单独的 PaperJS canvas 项运行？

How to have 2 separate PaperJS canvas items running side by side on same page?

javascript

canvas

html5-canvas

paperjs

如何在同一页面上并排放置 2 个单独的 PaperJS canvas 项 运行？

How to have 2 separate PaperJS canvas items running side by side on same page?

javascript

canvas

html5-canvas

paperjs

如何在同一页面上并排放置 2 个单独的 PaperJS canvas 项运行？