Dibujando en javascript con divs

votos
2

En mi búsqueda para aprender javascript (que parece ser mi última fuente de preguntas para SO en estos días) he encontrado esta API para dibujar http://www.c-point.com/javascript_vector_draw.htm

Mientras tanto, he estado haciendo algunos experimentos con gráficos, que suelen ser pesados ​​en la cantidad de material que se dibuja. Este tipo dibuja con divs, cada parte cuadrada de la imagen es un div. Puede verificarlo fácilmente inspeccionando su ejemplo en la página.

Él va a hacer divs 1px / 1px para dibujar un píxel

Ahora lo que tengo que preguntar es lo siguiente:

¿Es este el mejor método? Parece bastante pesado cuando un dibujo es más elaborado. ¿Qué otros métodos podrías ingerir?

Esta biblioteca de dibujo de Javascript? ya tiene un par de enlaces a libs, así que no hay necesidad de poner ninguno aquí.

He visto aquí en SO otras preguntas con respecto al dibujo. ¡Me pregunto hasta qué punto dibujar con divs no es horrible!

Publicado el 09/12/2008 a las 20:57
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
2

para el dibujo vectorial, las bibliotecas como Raphael proporcionan una API consistente sobre SVG y VML.

para el dibujo ráster, puede usar <canvas> para los navegadores compatibles con el lienzo.

para IE, usaría DIVS de forma predeterminada o su API de dibujo usaría Silverlight si estuviera disponible. Tenga en cuenta que, para mayor eficiencia, los divs no deben ser de 1px por 1px, sino que deben ser tan largos como sea necesario para la forma que está dibujando. 20 divisiones de 1 píxel del mismo color deben ser de 1 div que tengan 20 píxeles de ancho. En general, no se volverá muy interactivo con el enfoque div, porque el navegador al que se dirige (IE) tiene acceso lento a DOM.

EDITAR: la biblioteca enlazada realiza las optimizaciones div.

para las soluciones solo HTML (sin SVG / VML / canvas) utiliza CSS y anchos de borde personalizados:

Respondida el 09/12/2008 a las 21:09
fuente por usuario

votos
0

Antes de comenzar a perder el tiempo con divisores de 1px, consulte dojox.gfx: docs , tests , demos (los dos últimos enlaces a la instantánea nocturna del servidor de prueba optimizados para la depuración, no para la producción).

Utiliza gráficos nativos: SVG, VML, Silverlight o Canvas: todo lo que está disponible en el cliente cubre todos los principales navegadores (IE, Firefox, Safari / Webkit, Opera).

Respondida el 10/12/2008 a las 02:12
fuente por usuario

votos
0

No, es el peor método, elaborado antes de SVG o elementos de lona ... Sería muy pesado en la memoria y muy lento. Un truco divertido e interesante, pero que no se puede usar en el mundo real.

Además de las bibliotecas mencionadas en el otro hilo, confiando en canvas / SVG / VML, vi juegos hechos con sprites, es decir. algunas imágenes posicionadas absolutamente También hubo un impresionante hack que codificaba un juego de disparos 3D en primera persona en 5k de JavaScript , usando la generación de imágenes XBM sobre la marcha. Pero el soporte para este formato de imagen ha sido eliminado de las versiones recientes de Windows ... :-(

Ahora que lo pienso, también puedes hacer imágenes usando el protocolo "data: image / png; base64", pero la codificación sería bastante lenta, y los navegadores IE estarían fuera.

Respondida el 09/12/2008 a las 23:04
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more