Alan Hou的个人博客

学习p5.js – 第十一章 事件

第六章中,我们学习了名为mouseIsPressed的p5.js变量,它在按下鼠标时值为true而其它情况下值为false。

我们还了解到这并不是捕获用户输入很好的方式,因为draw函数的执行速度让这一变量的准确更新变得很困难。本章中我们会复习p5.js中处理用户输入的其它方式,即解决这一问题的事件。使用事件,我们可以在draw函数循环之外捕获用户输入。

借助于事件处理系统我们可以声明p5.js中非常多的事件函数。这里我们将着重看两个事件函数:mousePressed和keyPressed。

使用mousePressed

与draw和setup函数类似,声明这一函数使用了特定名称,由p5.js进行特殊处理。

在p5.js的代码中,以mousePressed这一名称声明的函数在每次鼠标键按下时被触发。我们来重写前面的例子将mouseIsPressed的使用修改为mousePressed事件函数(示例11-1)。

示例11-1. 使用mousePressed事件函数

好吧,这是一个非常简单的重构。我们只是声明了一个不由自己执行的函数,执行由p5.js在相应操作时进行处理。

还有很多其它事件函数。完整列表请参见官方网站

使用keyPressed

另一个值得学习的事件函数是keyPressed函数。正如名称的本身意思,keyPressed函数在按下键盘按键时会被触发。在示例11-2中,我们快速地使用一个新的草图来测试该函数的运行。

示例11-2. 使用keyPressed函数

本例中,每次按下键盘按键时,都会看到终端中显示pressed消息。在示例11-3中,我们再来看一个更深入的示例,每按下一次键就会在画布中创建一个形状。

示例11-3. 每次按下键画一个形状

在按下按键时会创建形状(图11-1)。

图11-1. 示例11-3的输出

注意一些事情。首先,我们把background函数放到setup函数下了。这可以保证所画的图形保留在屏幕上。如果我们在draw函数内调用background函数,就会在所有帧之上作画,这本用例中是不需要的。同时,我们把ellipse函数分散在多行上,这是为了增强可读性。

我们有一个名为pressed的全局变量。每按下一次键,我们都会将该全局变量设为true。这时draw函数会在屏幕上渲染一个圆形,因为执行了条件语句。然后draw函数马上会把pressed的值再设为false,这样就只为画一个圆。

在示例11-4中,我们将改进这个示例来让其变得更加美观些。现在,每个圆看起来太整齐划一了,并且颜色也有点单调。我们修改代码让每次画时,使用0和200之间的随机尺寸以及一个预定义颜色列表中的一个随机颜色(图11-2)。

示例11-4. 修改尺寸和颜色

图11-2. 示例11-4的输出

要在每次按下键时选取一个随机颜色,我们需要生成一个0和colors数组长度减1之间的随机整数。我们减去了1是因为数组索引从0开始计算。

生成一个0和colors数组长度减1之间的随机数,我们只需要把随机函数写成random(colors. length)即可。这样就会生成一个从0到colors数据项数量(不包含该数)中的不一个数。但还有一个问题,就是生成的是一个浮点数,表示它是一个小数。而我们需要一个整型数字来访问数组中的数据项。因此我们需要将小数转换成整数。有几种方法来解决这一问题。一种方式是使用p5.js的floor函数,它会将浮点数舍入为最相邻较小的整数。另一种方法是使用原生的名为parseInt的JavaScript函数,在该值能被转换时将给定值转换为整型。我们无法传入一个字符串值来转换为整型。

如例11-5所示,我们需向parseInt函数传入第二个参数来设置计算所使用的数字进制。基本上都会使用10来作为进制。对浮点数使用parseInt函数就是这样了。

示例11-5. 对浮点数使用parseInt函数

能够识别按下了键只是问题的一部分。我们还应能识别按下的按钮是哪个。在keyPressed函数内,理论上我们通过变量keyCode来识别按下的按键。keyCode变量以编码的形式存储用户所按下的最后一按键,比如用户按下了a,返回的值是65,按下b返回66等等。

因为p5.js是一个很有帮助的库,通过预置的变量可以轻易的识别部分按键:BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW。

比如,示例11-6为一个小的代码片断,在按下Enter键时执行console.log语句。

示例11-6. 使用keyCode值

使用变量keyCode,我们通过一点解码就可以识别按下了哪个字母数字键。但还有另一个变量也可以用于字母数字字符,变量名为key。变量key存储按下的字母数字键的值,这让我们更易于识别按下的键。

总结

本章中我们学习了处理事件的一种更好的方式,即事件函数。我们集中讲解了两个事件函数:mousePressed和keyPressed。

我们还学习了keyPressed函数中可以使用的一些变量:key和keyCode。使用key易于识别字母数字按键,而keyCode用于监测其它按键更为理想,因为可以使用它来比对p5.js变量,如ENTER, SPACE等。这时识别这些按钮就更容易了。

JavaScript部分的知识有,我们学习了parseInt函数可用于将数值(也包括体现为数字的字符串)转化为整型数字。

练习

在屏幕上画一个矩形,通过方向键可以控制矩形的位置。

译者补充,仅供参考:

退出移动版