P5.js开发之——通过createSelect向页面中添加下拉框

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • createSelect语法介绍
  • 示例—下拉选择框示例

二 createSelect语法介绍

2.1 语法

1
createSelect([multiple])
1
createSelect(existing)

2.2 说明

  • 在页面中添加下拉选择框
  • 可以级联使用p5.Element的语法

2.3 参数及返回值

参数

参数 说明
multiple Boolean：下拉菜单展开显示
existing DOM 选择元素

2.4 方法

  • option(name, [value])：下拉框的选择项
  • value()：将返回当前选择的选项
  • selected()：将返回当前下拉元素
  • selected(value)：页面首次加载时默认选择给定选项
  • disable()：将整个下拉元素标记为禁用
  • disable(value)：将给定选项标记为禁用

三 示例

3.1 实例一

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let sel;

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER);
  background(200);
  sel = createSelect();
  sel.position(10, 10);
  sel.style("font-size","40px");
  sel.option('pear');
  sel.option('kiwi');
  sel.option('grape');
  sel.selected('kiwi');
  sel.changed(mySelectEvent);
}

function mySelectEvent() {
  let item = sel.value();
  background(200);
  text('It is a ' + item + '!', 200, 30);
}

效果图

3.2 示例二

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let sel;

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER);
  background(200);
  sel = createSelect();
  sel.position(10, 10);
  sel.style("font-size","40px");
  sel.option('oil');
  sel.option('milk');
  sel.option('bread');
  sel.disable('milk');
}

效果图

四 参考

  • P5.js官方文档—createSelect