p5.js | value()函数

介绍

在 p5.js 中，value() 函数用于获取表单元素的值。它适用于输入元素，如文本框、下拉菜单、滑块等。使用 value() 函数可以获取用户输入或选择的值，以便在程序中进行后续处理。

用法

value() 函数用于获取表单元素的值。以下是它的基本用法：

element.value()

• element：用于获取值的 p5.js 元素，如文本框、下拉菜单等。

示例

获取文本框的值

以下是一个示例，展示如何使用 value() 函数获取文本框的值：

let input;

function setup() {
  input = createInput(); // 创建一个文本框
  input.position(20, 20);
}

function draw() {
  background(220);
  
  // 在画布上显示文本框的值
  text("Input value: " + input.value(), 20, 40);
}

在上面的示例中，我们首先创建了一个文本框，并将其位置设置为 (20, 20)。然后，在 draw() 函数中，我们使用 input.value() 获取文本框的值，并在画布上显示出来。

获取下拉菜单的值

以下是一个示例，展示如何使用 value() 函数获取下拉菜单的值：

let dropdown;

function setup() {
  dropdown = createSelect(); // 创建一个下拉菜单
  dropdown.option('Option 1'); // 添加选项
  dropdown.option('Option 2');
  dropdown.option('Option 3');
  dropdown.position(20, 20);
}

function draw() {
  background(220);
  
  // 在画布上显示下拉菜单的值
  text("Selected option: " + dropdown.value(), 20, 40);
}

在上面的示例中，我们创建了一个下拉菜单，并添加了三个选项。然后，在 draw() 函数中，我们使用 dropdown.value() 获取选中的选项，并在画布上显示出来。

获取滑块的值

以下是一个示例，展示如何使用 value() 函数获取滑块的值：

let slider;

function setup() {
  slider = createSlider(0, 100, 50); // 创建一个滑块
  slider.position(20, 20);
}

function draw() {
  background(220);
  
  // 在画布上显示滑块的值
  text("Slider value: " + slider.value(), 20, 40);
}

在上面的示例中，我们创建了一个滑块，并将其范围设置为 0 到 100，初始值为 50。然后，在 draw() 函数中，我们使用 slider.value() 获取滑块的值，并在画布上显示出来。

总结

通过使用 value() 函数，我们可以轻松地获取表单元素的值。这对于在 p5.js 中处理用户输入非常有用，以便我们可以根据用户的选择执行相应的操作。

请注意，value() 函数只适用于 p5.js 接口提供的表单元素，它无法用于自定义 HTML 表单元素。

希望本文对你理解和使用 p5.js 中的 value() 函数有所帮助！