我无法在输入框中写入任何文本

Question

问题 1： 嗨，我对 p5.js 非常陌生，我目前正在制作一个在其中编程的项目。我的意思是只在第二个屏幕上显示一个输入框（即 MENU=1），但由于某种原因，我根本无法在框中输入内容，只有在其他菜单上时才能在其中输入内容。有人可以帮忙吗？谢谢。

Input box doesn't accept any text input at all, like it's bugged

代码如下：

let MENU = 0;
let img;
let gif_createImg;
var fade = 0;
var fadeSpeed = 1.0;

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

function setup() {
  createCanvas(1280, 720);
}

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

  function inputUsername() {
    let input1 = createInput()
    input1.position(474, 130);
    input1.size(500, 70)
  }


  if (MENU == 1) {
    background(255, 255, 245)
    fill(0)
    image(LoginImg, 0, 0, width, height);

    inputUsername()
    textSize(20)
    text('Right-Click to return to the start screen', 455, 693)
    if (mouseButton == RIGHT) {
      MENU = 0
    }
  }

  if (MENU == 2) {
    background(255, 0, 0)
    textSize(20)
    text('Right-Click to return to the startscreen', 455, 693)
    if (mouseButton == RIGHT) {
      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
      }
    }
  }
}

// These are data URLs for some solid color pngs to act as place holders for the images that would normally be used.
let imageUrlBase = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpVqrDmYQcchQnSyIijhqFYpQIdQKrTqYj35Bk4YkxcVRcC04+LFYdXBx1tXBVRAEP0Dc3JwUXaTE/yWFFjEeHPfj3b3H3TuAq5cVzeoYBzTdNlOJuJDJrgqhV4TRAx596JYUy5gTxSR8x9c9Amy9i7Es/3N/jl41ZylAQCCeVQzTJt4gnt60Dcb7xLxSlFTic+Ixky5I/Mh02eM3xgWXOZbJm+nUPDFPLBTaWG5jpWhqxFPEUVXTKZ/LeKwy3mKslatK857shZGcvrLMdJrDSGARSxAhQEYVJZRhI0arToqFFO3HffxDrl8kl0yuEhRyLKACDZLrB/uD391a+ckJLykSBzpfHOdjBAjtAo2a43wfO07jBAg+A1d6y1+pAzOfpNdaWvQI6N8GLq5bmrwHXO4Ag0+GZEquFKTJ5fPA+xl9UxYYuAXCa15vzX2cPgBp6ip5AxwcAqMFyl73eXdXe2//nmn29wMM5HJ+FmUxpgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UKCx";
let imageUrl1 = imageUrlBase + "QOIkcg2PcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2NcoC7CQC5gYqAAjGoe1TyqeVQz5ZoBdtIBA8ORQl4AAAAASUVORK5CYII=";
let imageUrl2 = imageUrlBase + "QPBIw2bEsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2MUWSDGQC5gYqAAjGoe1TyqeVQz5ZoBJWIA8oj3qmoAAAAASUVORK5CYII=";
let imageUrl3 = imageUrlBase + "QPFeaGTLkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2MU0VzAQC5gYqAAjGoe1TyqeVQz5ZoBfz4BBQOizesAAAAASUVORK5CYII=";

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

问题 2： 如果无法回答，任何人都可以解释为什么输入框被无限输出，我只希望它输出一次。谢谢。

Input box output indefinitely

代码如下：

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

function drawInput(){
  h = createInput()
  
}

function draw() {
  background(220);
  drawInput()
}

Answer 1

问题是您在draw() 函数中一遍又一遍地创建输入。 p5.j​​s 中的所有create*() 函数都创建了一个持久的HTML 元素。这与rect() 和ellipse() 之类的绘图方法不同，它们只是在画布上绘制一些东西，当调用background() 或clear() 时这些东西将被覆盖或清除。您只想在需要时创建一次输入，然后在完成后使用 .remove() 删除它们。

let MENU = 0;
let img;
let gif_createImg;
var fade = 0;
var fadeSpeed = 1.0;

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

function setup() {
  createCanvas(1280, 720);
}

function draw() {
  background(255, 255, 245)
  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);

    textSize(20)
    text('Right-Click to return to the start screen', 455, 693)
    if (mouseButton == RIGHT) {
      MENU = 0
    }
  }

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

function inputUsername() {
  let input1 = createInput();
  input1.position(474, 130);
  input1.size(500, 70);
  return input1;
}

let currentInput;
function mouseClicked(e) {
  // Simplified for testing
  // Ignore clicks inside of other HTML elements (like our <input>)
  if (e.target.nodeName === "CANVAS") {
    if (MENU === 0) {
      MENU = 1;
      currentInput = inputUsername();
    } else if (MENU === 1) {
      MENU = 2;
      currentInput.remove();
      currentInput = undefined;
    }
  }
}

// These are data URLs for some solid color pngs to act as place holders for the images that would normally be used.
let imageUrlBase = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpVqrDmYQcchQnSyIijhqFYpQIdQKrTqYj35Bk4YkxcVRcC04+LFYdXBx1tXBVRAEP0Dc3JwUXaTE/yWFFjEeHPfj3b3H3TuAq5cVzeoYBzTdNlOJuJDJrgqhV4TRAx596JYUy5gTxSR8x9c9Amy9i7Es/3N/jl41ZylAQCCeVQzTJt4gnt60Dcb7xLxSlFTic+Ixky5I/Mh02eM3xgWXOZbJm+nUPDFPLBTaWG5jpWhqxFPEUVXTKZ/LeKwy3mKslatK857shZGcvrLMdJrDSGARSxAhQEYVJZRhI0arToqFFO3HffxDrl8kl0yuEhRyLKACDZLrB/uD391a+ckJLykSBzpfHOdjBAjtAo2a43wfO07jBAg+A1d6y1+pAzOfpNdaWvQI6N8GLq5bmrwHXO4Ag0+GZEquFKTJ5fPA+xl9UxYYuAXCa15vzX2cPgBp6ip5AxwcAqMFyl73eXdXe2//nmn29wMM5HJ+FmUxpgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UKCx";
let imageUrl1 = imageUrlBase + "QOIkcg2PcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2NcoC7CQC5gYqAAjGoe1TyqeVQz5ZoBdtIBA8ORQl4AAAAASUVORK5CYII=";
let imageUrl2 = imageUrlBase + "QPBIw2bEsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2MUWSDGQC5gYqAAjGoe1TyqeVQz5ZoBJWIA8oj3qmoAAAAASUVORK5CYII=";
let imageUrl3 = imageUrlBase + "QPFeaGTLkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVQ4y2MU0VzAQC5gYqAAjGoe1TyqeVQz5ZoBfz4BBQOizesAAAAASUVORK5CYII=";

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>