Редактирование полей ввода с текстом уже в них в p5.js - PullRequest
Новая
       62

Редактирование полей ввода с текстом уже в них в p5.js

0 голосов
/ 28 октября 2019

Я пытаюсь сделать вступление для приложения, которое я создаю, используя веб-редактор p5, который задает пользователю основные вопросы об их имени, возрасте, расписании сна и настроении. Существует один экран, который позволяет пользователю исправить введенные данные. Я пытаюсь представить эти данные в виде последовательности входных данных, которые пользователь может редактировать, когда нажимает на них. Проблема в том, что в полях отображаются правильные данные, но их нельзя редактировать. Вот копия моего кода:

var screen1;
var screen2;

function setup() 
{
  createCanvas(650, 500);
  background(165, 223, 209);
  enterName = createInput();
  nameButton = createButton('Enter');
  const name = enterName.value();
  correctName = createInput();
  declareBooleans();
}

function draw() 
{
  if (screen1 == true)
  {
    drawScreen1();
  }
  else if (screen2 == true)
  {
    drawScreen2();
  }
}

function drawScreen1()
{
  textSize(80);
  fill(255);
  text("What's Your \n    Name?", 120, 200);
  enterName.position(213, 350);
  enterName.size(170, 30);
  enterName.style('font-size', '21px');
  nameButton.position(enterName.x + enterName.width, 350);
  nameButton.size(70, 36);
  nameButton.style('font-size', '21px');
  nameButton.mousePressed(screen1MousePressed);
}

function drawScreen2()
{
  enterName.remove();
  nameButton.remove();
  background(165, 223, 209);
  const name = enterName.value();
  correctName.value(name);
  textSize(70);
  text("Is this correct?", 100, 80);
  textSize(30);
  text("(Type in the boxes to change your answers)", 35, 120);
  textSize(30);
  text("Name:", 20, 190);
  correctName.position(120, 150);
  correctName.size(150, 50);
  correctName.style('font-size', '26px');
}

function declareBooleans()
{
  screen1 = true;
  screen2 = false;
}

function screen1MousePressed()
{
    screen1 = false;
    screen2 = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>

1 Ответ

0 голосов
/ 03 ноября 2019

Проблема в том, что когда логическое значение screen2 меняется на true, второй экран рисуется каждый раз при выполнении функции draw(), что обычно происходит несколько раз в секунду, поэтому ввод перерисовывается сзначение по умолчанию, прежде чем можно будет увидеть какие-либо изменения.

Чтобы справиться с этим, можно использовать noLoop(), чтобы остановить перерисовку, например: 

function screen1MousePressed()
{
    screen1 = false;
    screen2 = true;
    noLoop();
}
...