p5.js 事件完整参考

p5.js 是一个用于创造与互动的 JavaScript 库，其中内置了许多事件，提供了丰富多彩和互动性强的 Web 根据地。在本文章中，我们将介绍 p5.js 中的各种事件，以及如何使用这些事件来创建可交互的应用程序。

鼠标事件

鼠标事件是 p5.js 最常用的事件之一，其提供了多种不同的事件，以及与鼠标相关的属性（如 x 坐标和 y 坐标）。以下是一些常用的鼠标事件：

mouseClicked()

当鼠标单击并松开时触发该事件。

function mouseClicked() {
  // 执行一些操作
}

mousePressed()

当鼠标按下时触发该事件。

function mousePressed() {
  // 执行一些操作
}

mouseReleased()

当鼠标松开时触发该事件。

function mouseReleased() {
  // 执行一些操作
}

mouseMoved()

当鼠标移动时触发该事件。

function mouseMoved() {
  // 执行一些操作
}

mouseDragged()

当鼠标在按下的同时移动时触发该事件。

function mouseDragged() {
  // 执行一些操作
}

键盘事件

p5.js 还提供了多种键盘事件，使用户能够与键盘交互并执行各种有用的操作。以下是一些常用的键盘事件：

keyPressed()

当按下键盘上的键时触发该事件。

function keyPressed() {
  // 执行一些操作
}

keyTyped()

当按下键盘上的字符键时触发该事件。

function keyTyped() {
  // 执行一些操作
}

keyReleased()

当松开键盘上的键时触发该事件。

function keyReleased() {
  // 执行一些操作
}

触摸事件

p5.js 还支持多种触摸事件，可用于在触摸设备上执行各种操作。以下是一些常用的触摸事件：

touchStarted()

当手指开始触摸触摸屏时触发该事件。

function touchStarted() {
  // 执行一些操作
}

touchMoved()

当手指在触摸屏上移动时触发该事件。

function touchMoved() {
  // 执行一些操作
}

touchEnded()

当手指离开触摸屏时触发该事件。

function touchEnded() {
  // 执行一些操作
}

光标事件

光标事件允许用户与光标交互，并执行各种有用的操作。以下是一些常用的光标事件：

cursor()

改变鼠标光标的样式。

function setup() {
  cursor(HAND);
}

noCursor()

隐藏光标。

function setup() {
  noCursor();
}

拖曳事件

拖曳事件允许用户使用鼠标或触摸设备将对象拖动到新位置。以下是一些常用的拖曳事件：

drag()

将对象拖动到新位置。

function setup() {
  // 将对象设置为可拖动
  drag();
}

function draw() {
  // 画出对象
  ellipse(mouseX, mouseY, 50, 50);
}

总结

以上是 p5.js 可以用来创建交互应用程序的各种事件。通过使用这些事件，我们可以轻松地创造出丰富多彩、互动性强的 Web 根据地。