#javascript #html #css #input #p5.js
Вопрос:
Вопрос 1: Привет, я очень новичок в p5.js и в настоящее время я создаю проект, запрограммированный в нем. Предполагается, что поле ввода будет отображаться ТОЛЬКО на втором экране (МЕНЮ=1), но по какой-то причине я вообще не могу писать в поле, я могу писать в нем только тогда, когда нахожусь в другом меню. Кто-нибудь может помочь, пожалуйста? Спасибо.
Поле ввода вообще не принимает ввод текста, как будто оно прослушивается
Код ниже:
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 amp;amp; mouseY > 527) {
if (mouseX < 527 amp;amp; mouseX > 328) {
MENU = 1
}
if (mouseX < 900 amp;amp; 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:
Если на это нельзя ответить, может ли кто-нибудь объяснить, почему поле ввода выводится бесконечно, я хочу, чтобы оно выводилось только один раз. Спасибо.
Поле ввода вывод на неопределенный срок
Код ниже:
function setup() {
createCanvas(400, 400);
}
function drawInput(){
h = createInput()
}
function draw() {
background(220);
drawInput()
}
Комментарии:
1. Задавайте один вопрос за один раз . Причиной первого вопроса может быть то, что вводится текст, но, поскольку он имеет наложение изображения, текст может быть скрыт за изображением
2. По какой-то причине поле ввода работает только в том случае, если я нахожусь в другом меню, когда я захожу в меню, в котором он должен отображаться, текст, введенный ранее, удаляется.
3. Проблема не в изображении, я запустил код после удаления всех изображений, и проблема все еще сохраняется.
4. @Rana Спасибо за попытку помочь!
Ответ №1:
Проблема в том, что вы снова и снова создаете входные данные внутри draw() функции. Все create*() функции в p5.js создайте постоянный 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> Комментарии:
1. Большое спасибо за ответ, я посмотрел на ваш ответ и понял, как это работает. Я просто попробую изменить его из упрощенной формы, чтобы границы мыши работали, и поэтому щелчок правой кнопкой мыши вернет пользователя в МЕНЮ 0 и удалит поле ввода по мере необходимости. Спасибо за помощь! @Пол Уилер