p5.js指定菜单页输入框无法输入、无限重复创建问题求助

问题2：输入框无限重复创建 #

成因 #

p5.js的draw()函数默认以60帧/秒的频率循环执行，你将输入框创建方法createInput()放在了draw()的调用链路中，每帧都会生成一个新的输入框元素，最终出现无限重复创建的现象。

解决方法 #

输入框属于DOM元素，只需创建一次即可，你可以选择两种实现方式：

• 方式1：将输入框创建逻辑放到仅执行一次的setup()函数中，需要切换显隐时调用输入框自带的show()/hide()方法即可，无需反复创建。
• 方式2：增加创建状态标记，仅在需要显示输入框且未创建过的场景下执行创建逻辑。

参考修正代码：

// 全局声明输入框变量
let input;
function setup() {
  createCanvas(400, 400);
  // 初始化时仅创建一次输入框，默认隐藏
  input = createInput()
  input.hide()
}

function draw() {
  background(220);
  // 需要显示时调用show方法，不会重复生成
  input.show()
}

问题1：MENU=1页面输入框无法输入 #

成因 #

该问题是输入框重复创建的衍生问题：MENU=1时每帧都会创建新的输入框，新输入框会覆盖在旧输入框上方，你输入的内容会被下一帧新生成的空白输入框覆盖，视觉上就表现为无法输入。切换到其他菜单后不再生成新输入框，原有输入框就可以正常交互。
另外你原代码中将右键返回逻辑放在draw()中执行，也会导致事件触发异常，干扰输入框交互。

解决方法 #

1. 全局声明输入框变量，在setup()中完成一次性创建和属性配置，默认隐藏
2. 仅在MENU=1时调用show()显示输入框，其他状态调用hide()隐藏
3. 将右键交互逻辑从draw()中移出，放到p5.js的鼠标事件回调中执行

参考修正核心代码：

let MENU = 0;
let StartImg, LoginImg, dnaGif;
let fade = 0;
let fadeSpeed = 1.0;
// 全局声明输入框变量
let usernameInput;

function preload() {
  StartImg = loadImage(imageUrl1);
  LoginImg = loadImage(imageUrl2);
  dnaGif = loadImage(imageUrl3);
}

function setup() {
  createCanvas(1280, 720);
  // 仅创建一次输入框，配置属性后默认隐藏
  usernameInput = createInput();
  usernameInput.position(474, 130);
  usernameInput.size(500, 70);
  usernameInput.hide();
}

function draw() {
  background(255, 255, 245);
  print(mouseX, mouseY);
  image(StartImg, 0, 0, width, height);
  image(dnaGif, 360, 200);

  if (MENU == 1) {
    background(255, 255, 245);
    fill(0);
    image(LoginImg, 0, 0, width, height);
    // 显示已创建好的输入框
    usernameInput.show();
    textSize(20);
    text('Right-Click to return to the start screen', 455, 693);
  } else {
    // 非登录页隐藏输入框
    usernameInput.hide();
  }

  if (MENU == 2) {
    background(255, 0, 0);
    textSize(20);
    text('Right-Click to return to the startscreen', 455, 693);
  }
}

// 右键返回逻辑放到鼠标事件回调中，避免draw循环反复触发
function mousePressed() {
  if (mouseButton === RIGHT && (MENU === 1 || MENU === 2)) {
    MENU = 0;
  }
}

function mouseClicked() {
  if (MENU == 0) {
    if (mouseY < 582 && mouseY > 527) {
      if (mouseX < 527 && mouseX > 328) {
        MENU = 1;
      }
      if (mouseX < 900 && mouseX > 706) {
        MENU = 2;
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者wot