Processingjs - 在 JS 模式下使用时出现 PImage 错误 - 尝试在 JS 模式下加载图像

Question

我正在使用 processingjs 文档中列出的以下代码将图像加载到画布上。因为我在 JS 模式下使用它，所以我在 Processingjs 代码前面加上 Processing 对象，例如“处理”。

/* @pjs preload="laDefense.jpg"; */
processing.PImage b;
b = processing.loadImage("laDefense.jpg");
processing.image(b, 0, 0);

当我使用此代码时，我收到以下错误： “未捕获的 SyntaxError：意外的标识符”

Processingjs 文档引用了 loadImage() 的以下 sn-p (http://processingjs.org/reference/loadImage_/)：

// @pjs preload must be used to preload the image 
/* @pjs preload="laDefense.jpg"; */
PImage b;
b = loadImage("laDefense.jpg");
image(b, 0, 0);

有人知道我为什么会收到这个错误吗？

我尝试在标准模式下使用第二个列出的 sn-p - 在 .pde 文件中，它工作正常。

Answer 1

我不明白前缀 processing. 的目的。通常，直接处理样式代码通过 .pde 文件加载或嵌入到 html 页面中。当您在处理ide中使用javascript模式时，前者正在为您完成。不用加processing.。

如果您删除了前缀，例如在第二个示例中，则一切都应该在处理中的标准/java 模式或 javascript/processing.js 模式下正常工作。

您不能在 processing.js 中使用的唯一内容是特定于 java 的调用和库。但是，您可以使用 processing.js 在您的 .pde 文件中混合和匹配 javascript，这是常见的做法。您还可以从 javascript 访问处理“草图”，例如，从 javascript/ajax/jquery/etc 传递数据。您可以在Pomax's Guide to Processing.js 或Processing.js website 上找到更多信息。

Answer 2

关注 Processingjs 网站上的教程，例如 Pomax 的处理教程。您将了解如何处理 PImage。 PImage 在准备好 run() 之前有一些要求，所以一个基本的提示是确保你的图像在尺寸上等于你的 .pjs 文档的大小（宽度，高度）（必须是）。如果大小大于您正在使用的图像的大小，则 processing.js 和浏览器将能够启动 pjs 草图。

<h>Pjs is just fine</h>
<pre class="code"><code class="Javascript code">
   /* @pjs preload="image.jpg"; */
   size(400,500); //must be the same as the image you are using
   PImage b;
   b = loadImage("image.jpg");
   background(b);
   int x,y;
   void setup(){}
   void draw(){}
</code></pre>
<canvas datasrc="sketch.pjs"></canvas>

另一个提示，使用 datasrc=""。您的图像目录可以位于其他位置。

Answer 3

嘿嘿。我有办法了。

我正在阅读您的示例，第二个中的所有内容都可以。即使我尝试了您的代码，但它没有工作，直到我将图片放入一个名为“数据”的文件中，然后......魔术它工作。总的来说，它必须被称为“数据”的文件，并且与草图在同一个文件上。希望这些信息对你有所帮助……