javascript - Paperscope 和 paperjs

Question

所以我试图创建一个包含两个 Canvas 元素的项目，每个元素都有自己的 paperscript，每个元素的外部都有按钮，用于控制两者中的某些功能。

在 Paperscript 下的文档下，它说:

Please note: When including more than one PaperScript in a page, each script will run >in its own scope and will not see the objects and functions declared in >the others. For PaperScript to communicate with other PaperScript or >JavaScript code, see the tutorial about PaperScript Interoperability.

...这很不幸，因为该教程内容如下:

Coming very soon!

我很快就陷入了这个过程。我试过将函数放在全局范围内，从 Canvas 外部调用它们，然后看到它们打印在错误的 Canvas 上。我试过通过模块导出函数，它似乎运行函数(？!？!)。最糟糕的是，“paper.projects”对象是一个包含一个(!)项目的数组，第一个 Canvas 。

所以我很难过。

有人知道怎么做吗？

编辑:显然有 this answer但我不明白这如何让我能够从全局范围脚本调用 PaperScript 范围内的函数。

这看起来像是在 PaperScope 中调用全局函数的脚本，如果我试图让外部按钮执行操作，它对我不起作用。

显然我遗漏了一些东西。

第二次编辑:我玩过各种全局函数，要么在 window.global 中，要么只是自己坐着，没有 var 声明……但似乎发生的是，当我尝试调用我定义的函数时, 表示为:

globals.makecircle = function () {
    var o = new Path.Circle({
        radius: 50,
        center: new Point (200,200)
    })
}

在主作用域中，它会在错误的窗口中运行，就像在正确的窗口中运行一样快。在它运行之前还有一个令人难以置信的延迟，我无法弄清楚。

第三次编辑:为清楚起见。

我的 HTML 中有 firstcanvas.js 附加到 canvas1，我有 secondcanvas.js 附加到 canvas2。两者都被引用为 paperscript 类型，如:

<script type="text/paperscript" src="scripts/firstcanvas.js" canvas="canvas1"></script>
        <script type="text/paperscript" src="scripts/secondcanvas.js" canvas="canvas2"></script>

我按照 Jurg 的建议创建了 window.globals 对象。我用一个按钮从 main.js 调用它，例如:

window.globals = {}
`$('document').ready($('#dfs').on('click', window.globals.makecircle))`

如上所述，我将此函数添加到 firstcanvas.js 中的全局变量中。

如果我最近点击了 canvas2，点击带有 id='DFS' 的按钮将导致函数在 canvas2 上运行，非常延迟。

并且 paper.projects 没有列出这两个项目，所以我不能使用 activate() 函数。

Answer 1

好的! 已解决!!!

以下是如何从全局范围引用/激活 PaperScript 创建的范围。尽管没有用户可访问的范围数组(据我所知)，PaperScope.get(id) 将检索它们。出于某种原因，我发现 PaperScope.get(0) 已经填充，并且我的两个 Canvas /PaperScript 元素实际上引用了 ID 为 1 和 2 的范围。

因此:

pscope1 = PaperScope.get(1)
pscope2 = PaperScope.get(2)

然后，在我想在我的第一个 Canvas 上做某事的任何函数中:

pscope1.activate()

// cool paper.js graphics stuff

pscope1.view.update()

最后一行是因为 paper.js 不会自动更新用户未与之交互的 View 。

感谢 Jurg Lehni 提示使用 .activate()。

PS 确保在使用 PaperScope.get 之前创建了您的 paperscript 对象。我为此使用了很好的 'ol JQuery $('document').ready()...

PPS Jurg Lehni 本人的另一个小打击:在 PaperScript 中，this 将指向当前范围。您可以使用它并将其存储在全局对象中。