Una clase para describir un elemento HTML.
Los sketches pueden usar muchos elementos. Los elementos comunes incluyen el lienzo de dibujo, botones, deslizadores, transmisiones de cámara web, etc.
Todos los elementos comparten los métodos de la clase p5.Element. Se crean con funciones como createCanvas() y createButton().
Ejemplos
Sintaxis
p5.Element(elt, [pInst])Parámetros
elemento DOM envuelto.
puntero a la instancia de p5.
Métodos
Adjunta el elemento a un elemento padre.
Por ejemplo, un
El parámetro parent puede tener uno de tres tipos. parent puede ser un string con el ID del elemento padre, como en myElement.parent('container'). También puede ser otro objeto p5.Element, como en myElement.parent(myDiv). Finalmente, parent puede ser un objeto HTMLElement, como en myElement.parent(anotherElement).
Llamar a myElement.parent() sin argumento devuelve el elemento padre.
Establece el ID del elemento usando un string dado.
Llamar a myElement.id() sin argumentos devuelve su ID como un string o cadena.
Agrega un atributo de clase al elemento usando una cadena dada.
Llamar a myElement.class() sin argumentos devuelve una cadena con sus clases actuales.
Llama a una función cuando se presiona el mouse sobre el elemento.
Llamar a myElement.mousePressed(false) desactiva la función.
Nota: Algunos navegadores móviles también pueden activar este evento cuando el elemento recibe un toque rápido.
Llama a una función cuando se presiona dos veces el mouse sobre el elemento.
Llamar a myElement.doubleClicked(false) desactiva la función.
Llama a una función cuando la rueda del mouse se desplaza sobre el elemento.
La función de devolución de llamada, fxn, recibe un objeto event. event tiene dos propiedades numéricas, deltaY y deltaX. event.deltaY es negativo si la rueda del mouse gira alejándose del usuario. Es positivo si la rueda del mouse gira hacia el usuario. event.deltaX es positivo si la rueda del mouse se mueve hacia la derecha. Es negativo si la rueda del mouse se mueve hacia la izquierda.
Llamar a myElement.mouseWheel(false) desactiva la función.
Llama a una función cuando se libera el mouse sobre el elemento.
Llamar a myElement.mouseReleased(false) desactiva la función.
Nota: Algunos navegadores móviles también pueden activar este evento cuando el elemento recibe un toque rápido.
Llama a una función cuando se presiona y se libera el mouse sobre el elemento.
Llamar a myElement.mouseReleased(false) desactiva la función.
Nota: Algunos navegadores móviles también pueden activar este evento cuando el elemento recibe un toque rápido.
Llama a una función cuando el mouse se mueve sobre el elemento.
Llamar a myElement.mouseMoved(false) desactiva la función.
Llama a una función cuando el mouse se mueve sobre el elemento.
Llamar a myElement.mouseOver(false) desactiva la función.
Llama a una función cuando el mouse se mueve fuera del elemento.
Llamar a myElement.mouseOut(false) desactiva la función.
Llama a una función cuando se toca el elemento.
Llamar a myElement.touchStarted(false) desactiva la función.
Nota: Las funciones táctiles solo funcionan en dispositivos móviles.
Llama a una función cuando el usuario toca el elemento y se mueve.
Llamar a myElement.touchMoved(false) desactiva la función.
Nota: Las funciones táctiles solo funcionan en dispositivos móviles.
Llama a una función cuando el usuario deja de tocar el elemento.
Llamar a myElement.touchMoved(false) desactiva la función.
Nota: Las funciones táctiles solo funcionan en dispositivos móviles.
Llama a una función cuando se arrastra un archivo sobre el elemento.
Llamar a myElement.dragOver(false) desactiva la función.
Llama a una función cuando se arrastra un archivo fuera del elemento.
Llamar a myElement.dragLeave(false) desactiva la función.
Agrega una clase al elemento.
Elimina una clase del elemento.
Comprueba si una clase ya está aplicada al elemento.
Alterna si se aplica una clase al elemento.
Adjunta el elemento como hijo de otro elemento.
myElement.child() acepta una cadena de ID, nodo DOM o p5.Element. Por ejemplo, myElement.child(otherElement). Si no se proporciona ningún argumento, se devuelve un array de nodos DOM hijos.
Centra el elemento vertical u horizontalmente, o ambos.
center() centrará el elemento en relación a su padre o según el cuerpo de la página si el elemento no tiene padre.
Si no se pasa ningún argumento, como en myElement.center() el elemento se alinea tanto vertical como horizontalmente.
Establece el HTML interno del elemento, reemplazando cualquier HTML existente.
El segundo parámetro, append, es opcional. Si se pasa true, como en myElement.html('hi', true), el HTML se añade en lugar de reemplazar el HTML existente.
Si no se pasan argumentos, como en myElement.html(), se devuelve el HTML interno del elemento.
Establece la posición del elemento.
Los primeros dos parámetros, x y y, establecen la posición del elemento relativa a la esquina superior izquierda de la página web.
El tercer parámetro, positionType, es opcional. Establece el esquema de posicionamiento del elemento. positionType es una cadena que puede ser 'static', 'fixed', 'relative', 'sticky', 'initial' o 'inherit'.
Si no se pasan argumentos, como en myElement.position(), el método devuelve la posición del elemento en un objeto, como en { x: 0, y: 0 }.
Aplica un estilo al elemento agregando una declaración CSS.
El primer parámetro, property, es un string. Si se pasa el nombre de una propiedad de estilo, como en myElement.style('color'), el método devuelve el valor actual como un string o null si no se ha establecido. Si se pasa una cadena property:style, como en myElement.style('color:deeppink'), el método establece la propiedad de estilo property a value.
El segundo parámetro, value, es opcional. Establece el valor de la propiedad. value puede ser un string, como en myElement.style('color', 'deeppink'), o un objeto p5.Color, como en myElement.style('color', myColor).
Agrega un atributo al elemento.
Este método es útil para tareas avanzadas. La mayoría de los atributos más comúnmente utilizados, como id, pueden configurarse con sus métodos dedicados. Por ejemplo, nextButton.id('next') establece el atributo id de un elemento. Llamar a nextButton.attribute('id', 'next') tiene el mismo efecto.
El primer parámetro, attr, es el nombre del atributo como un string. Llamar a myElement.attribute('align') devuelve el valor actual del atributo como un string o null si no se ha establecido.
El segundo parámetro, value, es opcional. Es un string utilizado para establecer el valor del atributo. Por ejemplo, llamar a myElement.attribute('align', 'center') establece la alineación horizontal del elemento en center.
Elimina un atributo del elemento.
El parámetro attr es el nombre del atributo como una cadena. Por ejemplo, llamar a myElement.removeAttribute('align') elimina su atributo align si ha sido establecido.
Devuelve o establece el valor del elemento.
Llamar a myElement.value() devuelve el valor actual del elemento.
El parámetro, value, es un número o cadena opcional. Si se p roporciona, como en myElement.value(123), se utiliza para establecer el valor del elemento.
Muestra el elemento actual.
Oculta el elemento actual.
Establece el ancho y alto del elemento.
Llamar a myElement.size() sin argumentos devuelve el tamaño del elemento como un objeto con las propiedades width y height. Por ejemplo, { width: 20, height: 10 }.
El primer parámetro, width, es opcional. Es un número utilizado para establecer el ancho del elemento. Llamar a myElement.size(10)
El segundo parámetro, 'height, también es opcional. Es un número utilizado para establecer la altura del elemento. Por ejemplo, llamarmyElement.size(20, 10)` establece el ancho del elemento en 20 píxeles y la altura en 10 píxeles.
La constante AUTO se puede usar para ajustar una dimensión a la vez manteniendo la relación de aspecto, que es width / height. Por ejemplo, considera un elemento que mide 200 píxeles de ancho y 100 píxeles de alto. Llamar a myElement.size(20, AUTO) establece el ancho en 20 píxeles y la altura en 10 píxeles.
Nota: En el caso de elementos que necesitan cargar datos, como imágenes, espera para llamar a myElement.size() hasta después de que los datos se carguen.
Elimina el elemento, detiene todos los flujos de audio/video y elimina todas las funciones de devolución de llamada.
Llama a una función cuando el usuario suelta un archivo sobre el elemento.
El primer parámetro, callback, es una función que se llama una vez que se carga el archivo. La función de devolución de llamada (callback) debe tener un parámetro, file, que es un objeto p5.File. Si el usuario suelta varios archivos sobre el elemento, callback se llama una vez para cada archivo.
El segundo parámetro, fxn, es una función que se llama cuando el navegador detecta uno o varios archivos soltados. La función de devolución de llamada debe tener un parámetro, event, que es un DragEvent.
Hace que el elemento sea arrastrable.
El parámetro, elmnt, es opcional. Si se pasa otro p5.Element como en myElement.draggable(otherElement), el otro elemento se volverá arrastrable.