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

在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 对象,例如:

canvas--sketch被绑定上的画板 context--画板的执行上下文 onblur and onfocus--事件处理器

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

// 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,它需要同步加载一个图片然后画出它:

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

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

/* @pjs preload="picture.jpg"; */ PImage img; void setup() { img = loadImage("picture.jpg"); image(img, 0, 0); }

注意:放在代码顶部的额外的注释行。"@jps"指令是给Processjing.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需要你的帮助
如果你的代码使用子类覆盖一个或多个父类里重载的方法,你需要“假”覆盖,因为,每个方法签名,你通常就没改动过:

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); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyssp.html