p5.js | setInput()函数

简介

在p5.js中，setInput()函数用于设置一个输入元素，可以是文本框，下拉列表等等，用于与用户进行交互，获取用户的输入。

语法

setInput([value], [type])

• value: 输入元素显示的初始文本
• type: 输入元素的类型，可以是文本框（"text"）或下拉列表（"select"）。

注意：在p5.js中，通过setInput()函数创建的任何输入元素都必须在draw()函数中绘制出来才能显示。

示例

文本框

在下面的示例中，我们将创建一个文本框，并在其中输入一个初始文本。在draw()函数中，我们将绘制这个文本框，并使用getText()函数获取用户输入的内容。

var input;

function setup() {
  createCanvas(400, 400);

  // 创建一个文本框
  input = createInput("在这里输入文本");

  // 设置文本框的位置
  input.position(20, 20);
}

function draw() {
  // 绘制文本框
  input.show();

  // 获取用户输入的文本
  var text = input.value();

  // 在画布上显示用户输入的文本
  textSize(18);
  text("你输入的文本是：" + text, 20, 50);
}

下拉列表

在下面的示例中，我们将创建一个下拉列表，并在其中添加一些选项。在draw()函数中，我们将绘制这个下拉列表，并使用getValue()函数获取用户选择的选项。

var dropdown;

function setup() {
  createCanvas(400, 400);

  // 创建一个下拉列表
  dropdown = createSelect();

  // 添加选项
  dropdown.option("选项1");
  dropdown.option("选项2");
  dropdown.option("选项3");

  // 设置下拉列表的位置
  dropdown.position(20, 20);
}

function draw() {
  // 绘制下拉列表
  dropdown.show();

  // 获取用户选择的选项
  var selected = dropdown.value();

  // 在画布上显示用户选择的选项
  textSize(18);
  text("你选择的选项是：" + selected, 20, 50);
}

使用setInput()函数的注意事项

1. 在p5.js中，通过setInput()函数创建的任何输入元素都必须在draw()函数中绘制出来才能显示。
2. getText()函数用于获取文本框中用户输入的文本，getValue()函数用于获取下拉列表中用户选择的选项。
3. 在下拉列表中添加选项使用option()函数。
4. 更多关于setInput()函数和其他p5.js函数的详细信息，请访问p5.js官方文档。