2

我从 paper.js 开始。我喜欢这样一个事实，即它引入了具有文本/纸质脚本 mime 类型的脚本的可能性，该脚本在其范围内运行。但是，脚本很快就会变大，因此我希望能够将其分成多个脚本以提高可读性。我以为我可以添加多个脚本标签并让它们都在同一范围内运行，但显然情况并非如此。

两个脚本都已加载并运行，但第二个脚本似乎不在论文范围内。

我在这里设置了一个例子：http: //barbata.nl/SO/Maps/这个例子有一些代码，但我会指出重要的部分。

它包含两个paperscript：

  • Maps.js 是主脚本，它对图像进行光栅化并允许移动它。您可以忽略此脚本中的代码，因为到目前为止它运行良好。

  • Zoom.js 是我想在其中隔离缩放功能的脚本。它使用 jq.mobi 来捕获鼠标的滚轮，因为 Paper.js 似乎没有该事件。然后它将其转换为对 onMouseScroll 的调用，类似于 Paper 的做法。

到现在为止还挺好。实际问题出现在 zoom.js 中的zoomInand函数上。zoomOut

如果我明确使用纸张对象来引用我想要缩放的视图，它会起作用：

function zoomIn()
{
  if (paper.view.zoom < 2)
  {
    paper.view.zoom = paper.view.zoom * 2;
  }
}

但是当我删除paper并仅引用视图时它会失败：

function zoomIn()
{
  if (view.zoom < 2)
  {
    view.zoom = view.zoom * 2;
  }
}

这让我感到惊讶，因为我预计脚本是 Paperscript，在 Paperscope 中运行。如果我将此代码放在 Maps.js 中，它工作正常，所以看起来虽然 zoom.js 是由 Paper.js 加载的（浏览器中的开发人员工具确认了这一点），但它并没有在 Paperscope 中运行。

我的问题是：我的发现正确吗？难道我做错了什么？将 Paper.js 应用程序划分为多个单元以提高可读性的正确方法是什么？

当然我可以让它运行，但我想确保我做对了。

4

2 回答 2

1

这确实是它的工作原理。我在 GitHub 上打开了一个问题

于 2012-12-27T11:04:40.873 回答
0

我发现“最干净”的方法是使用 this.install(window)。它还使使用 Chrome 开发人员工具更容易发现错误，因为它比“paperscript”更适合报告 java-script 中的行错误。

在 index.html 中（例如）：

<script type="text/javascript" src='js/other_lib.js'></script>

<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
    <canvas id="canvas" width="1500" height="500"></canvas>
</body>

然后在 js/other_lib.js 我只是像往常一样添加代码：

var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/

这应该生成一个矩形。

什么对我不起作用（截至 Paper.js v0.10.2 发布日期：2016 年 7 月 9 日）是对象运算符。例如为pointc = pointa + pointb;我添加 vecrots，这给出了很多 NaN 值。我必须编辑一些库才能使其正常工作，但更改很简单：

var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);

于 2016-12-20T08:45:07.367 回答