¿Biblioteca de dibujo Javascript?

¿Alguna sugerencia para una biblioteca de dibujo interactiva de JavaScript? Solo necesita dibujar líneas, polígonos, textos de diferentes colores. Compatible con IE/Firefox/Opera/Safari. 1.

0
agregado editado
Puntos de vista: 1

10 Respuestas

Como se mencionó anteriormente, el lienzo es la forma en que debe ir. IE no lo admite de forma nativa, por lo que deberá descargar ExCanvas para garantizar la compatibilidad entre navegadores. Recomiendo mirar Ajaxian para algunos proyectos que usan la etiqueta canvas.

0
agregado

También mxGraph . Esto no usa excanvas para IE. Excanvas es mucho más lento que el uso de VML, específicamente, la reutilización de los mismos nodos VML en lugar de eliminar, agregar nodos DOM para volver a dibujar. Este suele ser un punto pasado por alto, pero excanvas en el rendimiento de IE es simplemente horrible.

0
agregado

Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).

0
agregado
no es compatible con FF 2
agregado el autor user121196, fuente
GRACIAS montones esto se ve súper impresionante. usará Raphael.
agregado el autor John Ballinger, fuente
Maldita sea, me ganaste al golpe;)
agregado el autor Aeon, fuente

Dibujar texto con la etiqueta del lienzo es un gran dolor. Sus opciones son usar divs regulares absolutamente posicionados en los lugares correctos, o encontrar/escribir un motor de diseño de fuentes ( example ) o espere a que se implemente un nuevo estándar que le permita dibujar texto. SVG lidia con esto mucho mejor.

En IE tiene ExplorerCanvas para simular el lienzo API con el propio marcado VML de IE. Sin embargo, VML nativo puede hacer texto en una ruta y cosas como SVG. Creo que teóricamente, si quieres manejar texto complejo, querrías SVG y VML, como la biblioteca de Raphael que mencionó Dan.

También puede considerar Flash por un momento antes de comenzar.

0
agregado
De hecho, VML admite el dibujo de texto de forma nativa, y las últimas revisiones de ExplorerCanvas tienen los métodos de dibujo de texto recomendados por WHATWG;) explorercanvas .blogspot.com
agregado el autor Fabien Ménager, fuente
Solo como una actualización. El texto ya no es tan doloroso (2011), ha sido bastante bueno el año pasado. iOS4.1 + finalmente admite texto en lienzos correctamente y sé que Android 2.1+ también lo hace. Firefox/Safari/Chrome siempre han tenido un buen soporte de texto de lienzo e IE9 + también hace texto en Canvas correctamente.
agregado el autor Gabe, fuente

Consulte el jQuery Drawing plugin , y también puede consultar el Mozilla Lienzo referencia y tutorial .

0
agregado

Puede usar el objeto canvas directamente para dibujar en 2D. IE requiere la biblioteca excanvas.

http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

0
agregado
parece que Raphael puede hacer más que simples cuadros y líneas. raphaeljs.com
agregado el autor ina, fuente
El lienzo es el camino a seguir para algo más que unas pocas cajas o líneas triviales. Y excanvas funciona sorprendentemente bien, al menos en IE 7.
agregado el autor dgvid, fuente
Funciona muy bien con IE6 también.
agregado el autor Prestaul, fuente

El Processing.js de John Resig es un buen marco para eso.

0
agregado
¿Cómo se compara processing.js con raphael para gráficos estáticos?
agregado el autor ina, fuente
Parece que IE ahora es compatible (IE9)
agregado el autor yorjo, fuente
Lamentablemente, el procesamiento no es compatible con IE. Es una pena, pero se ve genial.
agregado el autor John Ballinger, fuente

Dependiendo de cómo debe ser el navegador cruzado y su objetivo de realizar la salida, puede buscar en el elemento Canvas y en el JavaScript relacionado.

Canvas

0
agregado

Pruebe http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. Es lo mejor que he encontrado (sin recurrir a SVG) y funciona en la mayoría de los navegadores sin complementos.

0
agregado
agregado el autor quantumpotato, fuente
walterzorn.com ya no parece estar cerca. :(
agregado el autor Alex Black, fuente
Eso (dibujar arreglando elementos HTML) no se escala particularmente bien, pero ciertamente funciona :)
agregado el autor Dan, fuente
Es cierto ... ciertamente no construirías un sistema CAD de esta manera, pero puede hacer dibujos bastante complejos si te quedas con estructuras e imágenes ortogonales (líneas, rectángulos, etc.) y les especias un poco con las imágenes. Otras entidades de dibujo se construyen con múltiples elementos DIV cada uno.
agregado el autor Steve Moyer, fuente

D3.js

D3.js es una biblioteca de JavaScript para manipular documentos basados ​​en   datos. D3 te ayuda a dar vida a los datos usando HTML, SVG y CSS. D3's   el énfasis en los estándares web le brinda todas las capacidades de   navegadores sin vincularse a un marco de propiedad, combinando   potentes componentes de visualización y un enfoque basado en datos para DOM   manipulación.

Eche un vistazo a esta discusión . también.

0
agregado