Processing鼠标键盘-蒲公英云

一、鼠标

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

运行结果

有时候，我们可能想知道，每次鼠标的移动间距，所以这时候就需要记录上一次的鼠标坐标点。出于这一点考虑，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;
  }
}