input - 在 p5.js 中编辑带有文本的输入框
问题描述
我正在尝试为我正在使用 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>
解决方案
问题是,一旦每次执行函数时都会绘制第二个屏幕的布尔值screen2
更改,通常是每秒几次,因此在看到任何更改之前,输入会使用默认值重新渲染。true
draw()
处理它的一种方法可能是使用noLoop()
停止重新绘制,如下所示:
function screen1MousePressed()
{
screen1 = false;
screen2 = true;
noLoop();
}
推荐阅读
- numpy - 我需要帮助让我的神经网络变得更智能
- function - 将 coxphf 运行到循环函数中并作为单独分析时的不同结果
- java - 为什么 wait(100) 导致同步方法在多线程中失败?
- glsl - 为什么每次我在 p5js 中调用我的 glsl 着色器时我的纹理坐标都会反转?
- javascript - nodejs sqlite 3“SQLITE_MISUSE:数据库句柄已关闭”db.run 中的 db.all
- tomcat - HawtIo-Jolokia ActiveMq 调用
- php - 如何在 PHP 中将 create_function 重写为箭头函数
- python - 通过返回键值对的转换函数将列表扩展为python中的字典
- python - Python如何循环列表并将列表值的每2个用作参数?
- typescript - 避免 Firebase 重复导致无法读取属性“应用程序”