una texto movimiento imagen extraer javascript html5 canvas drag-and-drop textwrapping

movimiento - extraer texto de una imagen javascript



¿Cómo puedo envolver el texto alrededor de una imagen móvil? (3)

Estoy tratando de implementar una interfaz donde los usuarios pueden ingresar texto de forma dinámica y cargar imágenes. Deseo que la interfaz tenga estas características:

  1. Las imágenes deben ser móviles, es decir, la capacidad de arrastrar y soltar las imágenes alrededor.
  2. El texto introducido debe envolver automáticamente alrededor de las imágenes.

¿Cómo podría lograr esto? He examinado algunos scripts de jquery y también he examinado las características del lienzo de HTML5, pero no puedo encontrar una solución.

Gracias por tu tiempo.

EDITAR: Este video muestra el efecto que deseo obtener:

http://www.youtube.com/watch?v=mYnj4Mz9g9g

TL; DR

Esta es una característica común y deseable que se ha discutido varias veces en la historia de CSS, y hay una especificación en desarrollo para hacerla posible. Desafortunadamente, las implementaciones son pocas y distantes entre sí, y algunos implementadores se muestran reacios a trabajar en ello. Hacerlo con JavaScript es un problema complejo para cualquier diseño no trivial; Es poco probable que una solución de este tipo sea lo suficientemente rápida para sus propósitos y que se acerque rápidamente al tipo de marcado que esperaría de un convertidor de PDF a HTML.

Fondo

Hay dos preguntas aquí: flujo de texto irregular y excluyendo texto y otros elementos en línea de una región arbitraria de la página.

Esta no es la primera vez que se ha discutido alguna característica para CSS. En particular, el texto que fluye alrededor de formas flotantes irregulares se mencionó en un borrador de nivel 1 de CSS en 1996, y la demostración de flotación irregular de Eric Meyer data de al menos 2002. ¡Esta es una característica atrasada!

En junio de 2007, James Elmore sugirió agregar valores de position a la propiedad de float , lo que permite que los elementos se coloquen arbitrariamente en la página mientras excluyen otros elementos que no fluyen por debajo.

SVG 1.2 inicialmente especificó un modelo para regiones de texto fluido , y entra en algunos detalles sobre cómo se implementaría esto. Desafortunadamente, la versión más reciente de la especificación (que aún está en desarrollo) elimina esto fuera del agua al señalar que el trabajo anterior se reemplazará con "un superconjunto de la característica SVG 1.2 Tiny textArea ".

Estado actual (revisado en agosto de 2012)

Más recientemente, tenemos la especificación de Exclusiones de CSS , una propuesta de Adobe y lo que ve que se muestra en ese video. A partir de agosto de 2012, estos se han implementado en IE 10 RTM y se están implementando lentamente en WebKit, pero los desarrolladores que trabajan para otros proveedores han expresado sentimientos encontrados acerca de la propuesta. *

Adobe mantiene una matriz de soporte útil para una referencia fácil.

Hackear la tos "Polyfilling"?

Sería difícil lograr un efecto similar utilizando JavaScript, y aún más difícil hacerlo de manera eficiente. Puedo pensar en dos enfoques muy ingenuos para hacer espacio para un elemento absolutamente posicionado en una región:

  1. "bloquee" el espacio para el elemento utilizando espacios en línea insertados estratégicamente; o
  2. rodee cada palabra con un elemento span , y diseñe cada palabra individualmente para hacer espacio para el elemento excluido usando el relleno.

He pirateado una demo muy rota de cómo podría funcionar el segundo enfoque. Es horrible, con errores y fácil de romper. De hecho, pasé unas semanas después de responder a esta pregunta trabajando en un poli-relleno para la especificación de Exclusiones, pero me rendí porque había demasiados errores y problemas de rendimiento.

Tendrá innumerables problemas con cualquiera de los enfoques: columnas, alineación de texto, elementos secundarios errantes (¡especialmente elementos flotantes o posicionados!), Diversas condiciones de borde, cosas horribles si cambia el código HTML, separación de palabras, cielos misericordiosos, ni siquiera quiero piense en la separación de palabras y, por supuesto, en los problemas de rendimiento potencialmente magníficos después de tener en cuenta estas cosas.

Los problemas de rendimiento pueden mejorarse un poco; por ejemplo, he usado elementFromPoint para intentar obtener el span contiene la primera palabra que se solapa directamente, y algunos navegadores incluso admiten caretPositionFromPoint , lo que también puede ayudar. Creo que con mucho trabajo, podrías hacer algo que funcione bastante bien para contenido estático; ¿Pero haciéndolo lo suficientemente rápido para que puedas arrastrarlo con el mouse? Mi página de demostración tiene muy poco contenido y no aborda ninguno de los problemas complejos con los que tendrías que lidiar para que esto funcione en páginas web reales. Incluso si puedes solucionar todos esos problemas, sería muy desafiante hacerlo lo suficientemente rápido como para arrastrarlo sin problemas.

* Espero que los proveedores implementen Exclusiones de CSS. La gente ha estado solicitando estas características desde los primeros días de CSS, y es un objetivo de diseño visual común y legítimo, tanto en pantalla como en forma impresa.