Processing鼠标键盘

朱雀 2021-05-12 11:55 782阅读 0赞

**一、鼠标**

1、鼠标坐标：

Processing的2D坐标系统，是以窗口的左上角为起点，作为(0, 0)点，x轴正方向向右延伸，y轴正方向向下延伸。而描述鼠标的位置信息，用的就是坐标值。坐标值其实就是一个点，包括了x坐标值和y坐标值。所遵循的坐标系，就是Processing的2D坐标系统。

那如何实时获取鼠标的坐标值呢？Processing直接给出了两个变量，这两个变量是系统定义好的，直接拿来就可以使用，分别是**`mouseX`**和**`mouseY`**。比如你想实时查看当前坐标的位置，可以直接在`draw()`方法里打印出这两个值。

void draw() {
      println(mouseX + " : " + mouseY);
    }

在程序框架的`draw()`方法里，使用系统提供的`println()`方法，即可实时打印出鼠标的x坐标和y坐标值。接下来我们做一个比较示例的例子：

// 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    void setup() {
      // 初始化窗口大小
      size(100, 100);
      // 清除填充色
      noStroke();
    }
    // 画图。
    // 此方法被系统默认循环调用。
    void draw() {
      // 设置背景色。
      // 由于是在draw()方法中设置背景色，
      // 所以背景色会被不停的刷新。
      background(126);
      // 画圆形。
      // 中心点为鼠标的x坐标和y坐标值。
      ellipse(mouseX, mouseY, 33, 33);
    }

运行结果

![70][]

有时候，我们可能想知道，每次鼠标的移动间距，所以这时候就需要记录上一次的鼠标坐标点。出于这一点考虑，Processing为我们提供了这样一组变量，用来记录上一次鼠标的坐标点，变量的名称为**`pmouseX`**和**`pmouseY`**，和`mouseX`和`mouseY`很像，只是变量名称的前面多了一个字母`p`。这样的话，如果我们想记录鼠标两次移动之间的距离，只要用`mouseX - pmouseX`和`mouseY - pmouseY`即可，非常方便吧！So easy～

2、鼠标按键：

鼠标除了有坐标点以外，还有鼠标按键。那对于鼠标按键状态的获取，Processing也为我们提供了现成的变量。对于任意鼠标按键按下的状态，我们可以统一使用**`mousePressed`**来判断。举例来说明。

// 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    void setup() {
      // 初始化窗口大小
      size(100, 100);
    }
    // 画图。
    // 此方法被系统默认循环调用。
    void draw() {
      // 设置背景色
      // 由于是在draw()方法中设置背景色，
      // 所以背景色会被不停的刷新。
      background(204);
      // 判断鼠标是否有按键按下。
      // true为有按键按下，
      // 否则无按键按下。
      if (mousePressed == true) {
        // 填充白色
        fill(255);
      } else {
        // 填充黑色
        fill(0);
      }
      // 画矩形
      rect(25, 25, 50, 50);
    }

上面例子，不论按下鼠标那个按键都会填出白色。如果想判断是哪个按键按下，则就要用另外一个变量了。与之类似，Processing提供的变量名为**`mouseButton`**。普通鼠标通常有三个按键，所以判断的状态也就包括了三种，分别为`LEFT`，`CENTER`以及`RIGHT`。在上述例子之上，我们做一点小小的修改。代码如下：

// 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    void setup() {
      // 初始化窗口大小
      size(100, 100);
    }
    // 画图。
    // 此方法被系统默认循环调用。
    void draw() {
      // 判断鼠标左键是否按下
      if (mouseButton == LEFT) {
        // 填充黑色
        fill(0);
      } else if (mouseButton == RIGHT) {
        // 判断鼠标右键是否按下，
        // 并填充白色
        fill(255); // White
      } else {
        // 若没有按键按下，则填充灰色
        fill(126); // Gray
      }
      // 画矩形
      rect(25, 25, 50, 50);
    }

3、鼠标事件：

上面获取鼠标的状态，我们可以统称为鼠标数据。那除了获取鼠标数据以外，我们还可以感知鼠标事件。如果细心，你会发现，上述过程中，我们获取鼠标数据都是在编程框架的`draw()`方法中。这个`draw()`方法会不停地被系统循环调用，所以我们获取鼠标的数据也都是实时的。但如果我们只想在鼠标状态发生变化的时候获取鼠标的数据，这个时候如果我们还放在`draw()`里进行调用，获取就不太合适了。Processing为我们考虑到了这一点，所以提供了几个常用的鼠标事件。这些事件作为单独的方法被系统调用，而且只在鼠标状态发生变化的时候，调用一次，所以这些事件不会没由头的不停调用。对于鼠标来说，Processing为我们提供四个常用的事件。分别如下：

*  mousePressed()：只有在鼠标按键按下的那一瞬间，会被系统调用一次；
 *  mouseReleased()：只有在鼠标按键弹起的那一瞬间，会被系统调用一次
 *  mouseMoved()：会在鼠标移动的时候，不停的被系统调用；
 *  mouseDragged()：会在鼠标按键按下，并进行拖拽的时候，不停的被系统调用

// 定义四个整型变量。
    // 前两个为鼠标拖拽坐标值。
    // 后两个为鼠标移动坐标值。
    int dragX, dragY, moveX, moveY;
    // 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    void setup() {
      // 设置窗口大小
      size(100, 100);
      // 清空填充色
      noStroke();
    }
    // 画图。
    // 此方法被系统默认循环调用。
    void draw() {
      // 设置背景色
      background(204);
      // 设置填充色为黑色
      fill(0);
      // 画黑色圆形。
      // 此圆形会随着鼠标拖拽进行移动。
      ellipse(dragX, dragY, 33, 33);
      // 设置填充色为灰色
      fill(153);
      // 此圆形会随着鼠标移动进行移动。
      ellipse(moveX, moveY, 33, 33);
    }
    // 鼠标移动方法。
    // 当鼠标移动的时候，
    // 系统会触发鼠标移动事件，并调用此方法。
    void mouseMoved() {
      // 鼠标移动时，获取鼠标坐标，
      // 并改变灰色圆形位置。
      moveX = mouseX;
      moveY = mouseY;
    }
    // 鼠标拖拽方法。
    // 当鼠标拖拽的时候，
    // 系统会触发鼠标拖拽事件，并调用此方法。
    void mouseDragged() {
      // 鼠标拖拽时，获取鼠标坐标，
      // 并改变黑色圆形位置。
      dragX = mouseX;
      dragY = mouseY;
    }

这个例子里，用到了其中两个鼠标事件，一个是鼠标的拖拽，另一个是鼠标的移动，对于鼠标的按下和抬起，其实大同小异。这里要注意的是，按下和抬起都是在鼠标状态改变的时候，只触发一次。所以，根据应用场景的不同，如果想获取鼠标的连续状态，可以在draw()方法里通过调用mouseButton来获取鼠标状态，如果只是想触发一次，那么可以选择在mousePressed()或mouseReleased()方法里获取鼠标的坐标。

4、鼠标的icon：

Processing里提供了自定义鼠标的功能。如果想使用系统默认提供的鼠标icon，Processing定义了六个常量，来标示系统常用鼠标的icon，分别是`ARROW`，`CROSS`，`HAND`，`MOVE`，`TEXT`以及`WAIT`。这六个系统提供的鼠标icon，会随着操作系统的不同更改变。具体如何使用呢？我们还是举一个简单的例子。

// 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    void setup() {
      // 设置窗口大小
      size(100, 100);
    }
    // 画图。
    // 此方法被系统默认循环调用。
    void draw() {
      // 设置背景色
      background(204);
      // 判断鼠标是否按下
      if (mousePressed == true) {
        // 将鼠标的icon改为HAND
        cursor(HAND);
      } else {
        // 将鼠标的icon改为CROSS
        cursor(CROSS);
      }
      // 以鼠标的x坐标画一条线
      line(mouseX, 0, mouseX, height);
      // 以鼠标的y坐标画一条线
      line(0, mouseY, height, mouseY);
    }

当然，除了更改成系统提供的以外，还可以自定义鼠标的图形。Processing提供了`noCursor()`方法，来隐藏鼠标默认的icon，然后可以自定义一个图形，将鼠标的坐标值赋值给图形，那么这个图形就可以看成为鼠标的icon。自定义的图形可以是通过Processing画出的，也可以从外部加载图片文件，都可以。

**二、键盘**

**1、键盘数据：**

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

// 环境初始化。
    // 此方法在软件启动时，被系统调用一次。
    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);
      }
    }

![70 1][]

当运行后按下任意键，就会变成上图。如果某一个按键一直处于被按下的状态，那么窗口中就会一直显示直线，直到按键松开为止。

那么，更进一步，如果我们想知道键盘上按下的是哪个键又该怎样做呢？别担心，Processing同样为我们提供了简单的变量，可以直接获取。哪个变量呢？很简单，就是**`key`**。

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

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

![70 2][]

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

// 定义矩形的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`。

2、键盘事件：

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

*  keyPressed()
 *  keyReleased()

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

// 定义是否显示图形的布尔变量
    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;
      }
    }

参考：

[http://ohcoder.com/blog/2016/03/26/processing-fun-mouse/][http_ohcoder.com_blog_2016_03_26_processing-fun-mouse]

[http://ohcoder.com/blog/2016/03/27/processing-fun-keyboard/][http_ohcoder.com_blog_2016_03_27_processing-fun-keyboard]

[70]: /images/20210511/4fa443dfb40644df82f360610fd6d44e.png
[70 1]: /images/20210511/de76ce88849441dab451bfd921a306bf.png
[70 2]: /images/20210511/bb5d916bae894dfa82b87c82d337110e.png
[http_ohcoder.com_blog_2016_03_26_processing-fun-mouse]: http://ohcoder.com/blog/2016/03/26/processing-fun-mouse/
[http_ohcoder.com_blog_2016_03_27_processing-fun-keyboard]: http://ohcoder.com/blog/2016/03/27/processing-fun-keyboard/