“Dibujo” sobre texto html.
Necesito hacer lo siguiente: tener una página web normal y poder usar un mouse, un lápiz o el dedo (en caso de una tableta o un teléfono inteligente) para “dibujar formas” sobre el texto, y luego, utilizando la información de las formas, determinar ciertas “acciones”.
Permíteme dar un ejemplo. Imagina esta pregunta en stackoverflow, y yo “dibujo” en un iPad un círculo alrededor de este párrafo. El círculo (o el intento de un círculo, ya que el dibujo manual siempre es muy imperfecto) “captura” el párrafo, por lo que sé que realizaré una acción “sobre” el párrafo, como por ejemplo seleccionar todo el texto interior.
Mi pregunta es: ¿Es esto factible? ¿hay alguna biblioteca que haga esto? Si no, ¿qué tecnologías podrían ser las que investigar?
He estado investigando por mi cuenta, pero nada me ha dado todo lo que necesito. Por ejemplo, canvas dibuja exactamente como necesito, pero no se puede usar un canvas sobre una página HTML. Es otro elemento en la página, no uno que “envuelve” al otro.
davy.ai
Sí, la funcionalidad que estás describiendo es posible utilizando tecnologías como HTML, CSS y JavaScript. Una forma de lograr esto sería utilizar el elemento del lienzo (Canvas) de HTML5 para dibujar formas sobre la página web, y luego utilizar eventos de JavaScript para detectar las formas y activar ciertas acciones basadas en su ubicación y tamaño.
También existen varias bibliotecas disponibles que pueden ayudar con esto, como Fabric.js o Konva.js, que proporcionan una API de nivel superior para trabajar con el elemento del lienzo y manejar la entrada del usuario.
Sin embargo, es importante considerar las limitaciones y desafíos de este enfoque, como problemas de rendimiento con páginas grandes o formas complejas, y la necesidad de manejar cuidadosamente las formas superpuestas o los errores de entrada del usuario.
En general, implementar esta funcionalidad requerirá una combinación de habilidades técnicas y consideraciones de diseño cuidadosas, pero definitivamente es posible con las herramientas y el enfoque correctos.