Oh!Coder

Coding Life

有趣的Processing-键盘

| Comments

Hi!上一次,我们一起学习了Processing中的鼠标。那么,很自然的,这一次,我们将一起学习Processing中的键盘!相比于鼠标而言,键盘还要简单一些。从学习的角度来看,主要还是分为两方面,一方面是键盘的数据,另一方面是键盘的事件。嗯,既然我们已经将知识结构分清。那我们就先从键盘的数据入手。

键盘的数据

类比于鼠标,键盘也有专门的变量,来记录是否有键盘的某个按键按下。Processing提供了keyPressed变量来记录当前是否有按键按下。为了更直观的说明,我们还是用简短的例子来说明。

首先,还是新建一个项目窗口。

processing-new-window

图片来源:Processing新项目窗口

在新建的窗口中,添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup()
  // 初始化窗口大小
  size(100, 100);
  // 设置直线的宽度
  strokeWeight(4);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置背景色。
  // 由于是在draw()方法中设置背景色,
  // 所以背景色会被不停的刷新。
  background(204);
  // 判断键盘是否有按键按下
  if (keyPressed == true) {
    // 如果有按键按下,
    // 则画一条直线。
    line(20, 20, 80, 80);
  } else {
    // 否则画一个矩形
    rect(40, 40, 20, 20);
  }
}

点击新项目窗口中,菜单栏所示的三角形按钮,编译并运行代码。

processing-window-menu

图片来源:Processing新项目窗口中的菜单栏

当你按下键盘上某一个按键时,运行结果如下:

processing-fun-keyboard-1

图片来源:Processing程序执行结果

如果某一个按键一直处于被按下的状态,那么窗口中就会一直显示直线,直到按键松开为止。那么,更进一步,如果我们想知道键盘上按下的是哪个键又该怎样做呢?别担心,Processing同样为我们提供了简单的变量,可以直接获取。哪个变量呢?很简单,就是key。通过使用key,可以直接获取按键数值。还是举例说明。

首先,当然还是要新建一个项目窗口。然后,添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 设置窗口大小
  size(100, 100);
  // 设置显示字体大小
  textSize(60);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 由于是在draw()方法中设置背景色,
  // 所以背景色会被不停的刷新。
  background(0);
  // text()方法用来显示字符串,
  // 其中有三个参数:
  // 第一个参数为要显示的字符串,
  // 后两个参数是字符串显示的(x, y)坐标值。
  text(key, 20, 75);
}

添加完之后,点击菜单栏里的运行按钮,编译并运行程序。如果一切顺利,会看到类似如下运行结果。

processing-fun-keyboard-2

图片来源:Processing程序执行结果

通过key变量,我们可以获知当前键盘上按下了哪个按键。这里要说明一下,key值是区分大小写的,比如答谢的字母A和小写a是不同的。聪明的朋友可能想到了,如果我按下的不是字母,而是类似于Ctrl键会怎样?Processing也考虑到了这种情况,所以专门为这几个特殊的按键做了定义。而且使用的变量不再是key,而是keyCode变量,对于这些功能键也定义了常量,分别有CONTROLALTSHIFTUPDOWNLEFT以及RIGHT。对于功能键的判断,可以通过判断key是否等于CODED。好!我们还是通过一个例子,来展示到底如何使用。

首先,还是新建一个项目窗口,向窗口内添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 定义矩形的y轴坐标
int y = 35;
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 初始化窗口大小
  size(100, 100);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置背景色。
  // 由于是在draw()方法中设置背景色,
  // 所以背景色会被不停的刷新。
  background(204);
  // 画一条细线
  line(10, 50, 90, 50);
  // 判断按下的是否为功能键
  if (key == CODED) {
    // 判断是否按下的是向上按键
    if (keyCode == UP) {
      // 将矩形y轴的位置定位20
      y = 20;
    } else if (keyCode == DOWN) {
      // 若按键按下的是向下的按键
      // 将矩形y轴的位置定位50
      y = 50;
    }
  } else {
    // 设置矩形的y轴坐标
    y = 35;
  }
  // 画矩形
  rect(25, y, 50, 30);
}

运行上述代码,点击键盘上的向上和向下按键,你会看到矩形的位置会发生变化。细心观察,你可以看到,判断功能键的语句,使用的是key == CODED语句,而判断具体的功能键,则需要使用变量keyCode

运行的效果,看起来类似于下图。

processing-fun-keyboard-3

图片来源:Processing程序执行结果

键盘事件

和鼠标类似,键盘也有事件。但相比于鼠标来说,键盘的事件就少了许多,只有两个,分别是按下和抬起:

  • keyPressed()
  • keyReleased()

使用方式和鼠标事件类似,每当键盘有按键被按下或抬起的时候,键盘事件就会被系统调用,而且调用的次数只有一次,比如不管某个按键按多久,按下事件只会触发一次。我们还是举例来说明,看看到底如何使用。

首先,新建一个项目窗口。向其添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 定义是否显示图形的布尔变量
boolean drawT = false;
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 初始化窗口大小
  size(100, 100);
  // 清空填充色 
  noStroke();
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置背景色。
  // 由于是在draw()方法中设置背景色,
  // 所以背景色会被不停的刷新。
  background(204);
  // 如果布尔变量为true,
  // 则画出T图形
  if (drawT == true) {
    // 画出横向矩形
    rect(20, 20, 60, 20);
    // 画出纵向矩形
    rect(39, 40, 22, 45);
  }
}
// 当键盘某个按键按下时,
// 系统会触发键盘按下事件,
// 并调用此方法。此方法只会被调用一次。
void keyPressed() {
  // 如果按下是T或t,
  // 则将drawT布尔变量改为true
  if ((key == 'T') || (key == 't')) {
    // drawT变量设为true,
    // 随后屏幕上将画出T图形
    drawT = true;
  }
}

运行上述代码,结果大概看起来如下图所示。

processing-fun-keyboard-4

图片来源:Processing程序执行结果

总结

看起来,键盘要比鼠标简单一些呢。好!我们来回顾一下。总的来说,键盘的知识点分为两部分,一部分是获取键盘信息,包括的内容有,通过keyPressed变量来判断是否有按键按下,然后通过keykeyCode来获取当前按下的按键是哪个。第二部分就是键盘的事件。比起鼠标来说,键盘事件要简单一些,只有两个,分别是keyPressed()keyReleased()。和鼠标事件类似的是,键盘事件也是在按键按下或抬起的时候,只触发一次,不会重复触发。

下期预告

现在,我们既学过了基本图形,也学过了颜色以及鼠标和键盘的基本交互,接下来会是什么呢?嗯,我们对Processing中,如何显示文字还一无所知。下一次,我们将一起学习,如何在Processing中显示文字!

Comments