La función createButton() se usa para crear un elemento de botón en el DOM (Document Object Model). La función .size() se usa para establecer el tamaño del elemento del botón. La función .mousePressed() se usa para especificar el comportamiento del botón del mouse al presionarlo.
Nota: Esta función requiere la biblioteca p5.dom. Así que agregue la siguiente línea en la sección principal del archivo index.html .
<script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"> </script>
Sintaxis:
createButton( label, value )
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- etiqueta: este parámetro contiene la etiqueta que se muestra en el botón.
- value: este parámetro contiene el valor del botón.
Valor devuelto: Devuelve un elemento de puntero que contiene el objeto de Node creado.
Nota: este elemento de botón se puede vincular con varios eventos de JavaScript, como presionar el mouse, hacer clic con el mouse, soltar el mouse, etc.
Ejemplo: este ejemplo usa la función createButton() para cambiar el color de fondo usando el elemento de botón p5.js.
// Create a variable for button object var color_button; // Create a function to change the background-color function change_background() { // Pick a random number for r value r = random(255); // Pick a random number for g value g = random(255); // Pick a random number for b value b = random(255); // Set a random background-color background(r, g, b); } function setup() { // Create a canvas createCanvas(400, 400); // Set an initial background-color background(50); // Create the button color_button = createButton("Change Color"); // Position the button color_button.position(150, 200); // When the button is clicked change_background() // function is called color_button.mouseClicked(change_background); }
Producción:
- Después de hacer clic en el botón:
- Después de hacer clic en el botón de nuevo:
Referencia: https://p5js.org/reference/#/p5/createButton
Publicación traducida automáticamente
Artículo escrito por SujanDutta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA