从外部调用 paperscript 内部的函数

Question

我有 3 个 JS 文件。

1. 主文件
2. 地图.js
3. 传奇.js

map.js 和 legend.js 是 2 个不同画布的纸本。它们是像这样从 HTML 调用的。

<script type="text/javascript" src="main.js"></script>
<script type="text/paperscript" src="map.js" canvas="mapCanvas"></script>
<script type="text/paperscript" src="legend.js" canvas="legendCanvas"></script>

在map.js，我们有一个名为的函数drawMap()

在legend.js，我们有一个名为的函数drawLegend()

显然他们操纵自己的画布。

要求：我想从 main.js 调用这些函数。

我看过这篇文章 Paperscope 和 paperjs

并遵循这些说明 https://groups.google.com/forum/#!msg/paperjs/C6F0XFlplqM/_67AMqCR_nAJ

但我不确定如何以及在何处构建和调用 PaparScope 对象。

还是行不通。

这很接近：Paper.js 互操作性

但我需要的是另一种方式。

Answer 1

您需要导出要从外部调用的函数，例如：

window.drawMap = drawMap;
window.drawLegend = drawLegend;

然后它们成为全局变量，您可以从外部调用它们。

更优雅的方法可能是在全局范围内定义一个容器，例如（在 PaperScript 代码之前执行的普通 JavaScript 脚本标记中，例如在您的 中main.js）：

var globals = {};

然后以相同的方式从 PaperScript 访问并填充此容器：

globals.drawMap = drawMap;
globals.drawLegend = drawLegend;

之后，您可以从任何 JavaScript 或 PaperScript 中使用它们：

globals.drawMap();
globals.drawLegend();

更新：

由于您使用多个 PaperScope（由绑定到单独画布的 PaperScript 代码创建），您需要在调用处理给定画布的函数之前激活正确的作用域。最好直接在您的drawMap()和drawLegend()函数中执行此操作，这样您从外部调用时就不必担心。

在 PaperScript 内部，this指向作用域，因此您可以在函数外部执行以下操作：

var scope = this;

然后在函数内部：

scope.activate();