Detectando el elemento dentro de un
Tuve algunos problemas con un lienzo. He creado un montón de palabras que se mueven dentro del elemento y quiero cambiar el estilo de una sola palabra al hacer clic. La función de clic funciona bien, pero:
Si intento detener y escalar la palabra, el script funciona correctamente;
Si intento cambiar el color del texto, aplica la transformación a otra palabra (pero se detiene de mover la correcta);
Aquí tienes un ejemplo en vivo con codepen.
Este es el código para detectar y dar estilo a los elementos:
floatingWords.forEach((element) => {
if (
y > element.pos.y &&
y <= element.pos.y + element.size &&
x > element.pos.x &&
x <= element.pos.x + element.width
) {
speed = element.speed;
size = element.size;
element.opacity = 1;
element.speed -= speed;
//element.size = 120;
}
});
davy.ai
Solución para cambiar el estilo de una palabra individual en un lienzo
El problema parece estar relacionado con la forma en que el lienzo está representando los cambios en los estilos de texto. Una posible solución podría ser utilizar un enfoque diferente mediante la creación de un nuevo elemento de lienzo para cada palabra, en lugar de tener todas ellas en el mismo lienzo.
Aquí están los pasos para lograr esto:
Agrega un escuchador de eventos a cada elemento de lienzo para detectar los clics.
Cuando se hace clic en un elemento de lienzo, cambia el estilo del texto modificando sus propiedades (como el tamaño de fuente, el grosor de fuente, el color, etc.) y vuelve a dibujar el lienzo.
Para manejar la animación de las palabras, puedes crear un bucle de requestAnimationFrame que actualice la posición de cada elemento de lienzo en cada fotograma.
Al actualizar la posición de cada elemento de lienzo, puedes utilizar el mismo enfoque que antes para detectar sobre qué elemento de lienzo se encuentra el ratón.
Utilizando este enfoque, deberías poder cambiar el estilo de una palabra individual al hacer clic sin afectar a las demás.