适用于javascript开发者的Processing.js入门教程

时间：2019-01-04分类：JavaScript作者：编程之家

这个入门指导是为javascript开发者写的。读这个文档之前，你最好掌握javascript和web开发编程，并还会非常基本的 Processing 知识。目录：

为没有耐心看长篇大论的人准备：

如果你很着急入门，那么你就需要知道以下几点： 1、Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码，实质是通过

在DOM结构中有2个按钮,他们被用来让用户选择开始或暂停正在运行的Processing sketch. 他们直接在javascript中控制Processing实例（在页面里你可能有多个，或者藏在div中），通过调用Processing的方法：loop()和noLoop()。这些Processing 的方法可以在其他的文件中找到。

作为一个使用Processing.js的开发者必须知道的事情：

当 Processing.js试图去完全兼容 Processing时，就有些不同的事情或者需要解决办法。我们也增加了一些web规范的功能来使Processing更容易被使用。这里有一些技巧和提示在你开始使用Processing.js做复杂的sketch时可能有帮助。

Processing.js提供通过“externals”属性来访问各种 DOM/javascript对象

每个Processing 实例（即：Processing.instances）包含有一个"external"属性,它是一个对象，包含各种指向非常有用的非Processing 的DOM/javascritp 对象，例如：

rush:js;"> canvas--sketch被绑定上的画板 context--画板的执行上下文 onblur and onfocus--事件处理器

如果一个除法表达式期望产生一个整型值，那么这可能需要显式转换

当将Processing代码转化成javascript,涉及整型 vs 浮点型的除法的时候，有一个有bug的class会出现这个问题。在Processing代码中出现某个东西直接除以整数的代码块，当被转化成Processing时，可能有时出现问题，因为，整型编程双精度型，被引入了一个小数部分。修补这个bug的方法是显式转换任何除法，正如展示的做法：

rush:js;"> // before int g = mouseX / i;

// after
int g = (int)(mouseX / i);

Processing.js有个欺骗在模拟 Processing的异步输入输出

Processing 使用一个同步输入输出的模型，这就意味着像loadImage()方法这样，需要相对长时间去执行，然而当他们执行期间，又没有任何事发生，程序等到它loadImage()执行完才去执行下一行语句。这就意味这可以依靠像loadImage()这样的方法返回的值用在接下来的代码中。但是web浏览器却不是这样的，它使用的是异步输入输出模型，这意味着加载外部资源的方法不能使得程序等到他们加载完再执行。为了实现Processing的load方法，你不得不使用一个特殊的Processing的指令。 Processing.js指令提示浏览器，指令是写在注释里而不是Processing自身代码。这是一个典型的 Processing sketch，它需要同步加载一个图片然后画出它：

rush:js;"> PImage img;

void setup() {
img = loadImage("picture.jpg");
image(img,0);
}

这些代码在含有Processing.js的浏览器里将不会执行，因为图片文件 picture.jpg被加载完之前就被调用了。修补这个bug的办法是让在sketch 开始执行前就把图片加载好，并且缓存起来，就是所说的预加载技术。这是修改后的代码：

rush:js;"> /* @pjs preload="picture.jpg"; */ PImage img;

void setup() {
img = loadImage("picture.jpg");
image(img,0);
}

注意：放在代码顶部的额外的注释行。"@jps"指令是给Processjing.js用的，不是给开发者用的。可以把它认为成额外的代码行，它们将在程序执行前就被执行了。如果你有多个图片被加载，可以使用如下列表：

rush:js;"> /* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */

Processing.js需要更多的注意在变量的命名上比Processing javascript其中一个最强大的特性就是它的动态，弱类型的性质。因为java是强类型的语言，所以Processing也是，他们能重复命名而不用还怕产生歧义（例如：方法的重载），Processing.js就不行。不能进入javascript的内部工作，所以对Processing.js的开发者来说，最好的建议就是不要用 function/class/etc/,也不要用来自Processing的名字来命名变量。例如，一个叫 line的变量可能看起来合理，但是它会导致问题，因为它和Processing与Procesing.js内置的函数名line()一样。当要覆盖重载的父类方法时，Processing需要你的帮助如果你的代码使用子类覆盖一个或多个父类里重载的方法，你需要“假”覆盖，因为，每个方法签名，你通常就没改动过:

rush:js;"> class X { void doSomething() { ... }

void doSomething(float x,float y)
{
...
}
}

class Y extends X
{
void doSomething()
{
// different code from compared to the super class
}

// even though we don't override this method,// its signature must be added to prevent Pjs
// from getting the method chain wrong:
void doSomething(float x,float y)
{
super.doSomething(x,y);
}
}

尽管在Processing里你不需要实现拥有(float,float)签名的空方法doSomething,但是这样做几乎是必须的，这是为了确保Processing.js在调用方法时不被搞晕。直接将Processing 代码放在web页面里也是可以的在canvas上，用一个 data-processing-source属性包含Processing.js加载的外部文件的做法是首选，但是推荐的方式在web页面里外引用脚本。但是写成行内引用也是可以的。把上边例子的代码作为行内引用的方式，有必要的改动一点：

rush:js;">

这些代码是更复杂了，因为它没有指出那个canvas配那个脚本文件（即：你可以在一个页面引用多个Processing sketch,同样也可以有多个canvas）。也没有说明脚本的"type"属性，这个属性是用来区别javascript和Processing代码的（浏览器将忽略 Processing 脚本）。最后，注意："id"和"target"属性的用法，它俩是用来连接Processing脚本和相关的canvas的。

以上就是本文的全部内容，希望大家对Processing.js有所认识。

javascript Processing.js