p5.js |改变（）函数

每当元素的值发生更改时，都会触发changed()函数。它可用于检测复选框元素或选择元素的变化。它还可以用于将事件侦听器附加到元素。

句法：

changed(fxn)

参数：此函数接受如上所述和下文所述的单个参数。

• fxn：这是每当检测到更改时都会调用的回调函数。它可以传递'false'，这将阻止先前的触发函数停止触发。

以下示例说明了 p5.js 中的changed()函数：

示例 1：检测复选框元素中的更改

let red = 0;
let green = 0;
let blue = 0;
  
function setup() {
  createCanvas(600, 300);
  
  // create input boxes
  redCheckbox = createCheckbox('Red', false);
  redCheckbox.position(20, 40)
  redCheckbox.changed(redChanged);
  
  greenCheckbox = createCheckbox('Green', false);
  greenCheckbox.position(100, 40)
  greenCheckbox.changed(greenChanged);
  
  blueCheckbox = createCheckbox('Blue', false);
  blueCheckbox.position(180, 40)
  blueCheckbox.changed(blueChanged);
}
  
function draw() {
  clear()
  
  // change the fill color based
  // on current rgb the values
  fill(red, green, blue);
  rect(20, 80, 300, 300);
  
  textSize(20);
  text("Check the boxes to change the fill color", 10, 20);
}
  
  
// functions for each of the colors
function redChanged() {
  if (this.checked())
    red = 128;
  else
    red = 0;
}
  
function greenChanged() {
  if (this.checked())
    green = 128;
  else
    green = 0;
}
  
function blueChanged() {
  if (this.checked())
    blue = 128;
  else
    blue = 0;
}

输出：

示例 2：检测选择元素中的更改

let red = 0;
let green = 0;
let blue = 0;
   
function setup() {
  createCanvas(350, 300);
   
  textSize(18)
  text("Select the color to change the background color", 10, 20);
   
  // create select element
  selectElem = createSelect();
  selectElem.position(20, 40);
  selectElem.option('Slecet');
  selectElem.option('Red');
  selectElem.option('Green');
  selectElem.option('Blue');
  selectElem.changed(changeColor);
}
   
function changeColor() {
  clear();
  colorVal = this.value();
   
  if (colorVal == "Red") {
    background("red");
  }
  else if (colorVal == "Green") {
    background("green");
  }
  else if (colorVal == "Blue") {
    background("blue");
  }
  else
    background(128);
   
  text("Select the color to change the background color", 10, 20);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/changed