Biblioteca de desenho Javascript?

Alguma sugestão para uma biblioteca de desenho interativo JavaScript? Só precisa desenhar linhas, polígonos, textos de cores diferentes. IE/Firefox/Opera/Safari compatível. Detalhes

0
adicionado editado
Visualizações: 1

10 Respostas

Como mencionado acima, a tela é a maneira que você deve ir. O IE não suporta nativamente, então você precisará fazer o download do ExCanvas para garantir a compatibilidade entre navegadores. Eu recomendaria olhar para Ajaxian para alguns projetos que usam a tag de tela.

0
adicionado

Também mxGraph . Isso não usa excanvas para o IE. Excanvas é muito mais lento do que usar o VML, especificamente, reutilizando os mesmos nós VML em vez de excluir, adicionando nós DOM para redesenhar. Isso é muitas vezes um ponto esquecido, mas excanvas no desempenho do IE é simplesmente horrível.

0
adicionado

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

0
adicionado
não suporta FF 2
adicionado o autor user121196, fonte
AGRADECIMENTOS heaps isso parece super incrível. estará usando o Raphael.
adicionado o autor John Ballinger, fonte
Porra, você me bateu ao soco;)
adicionado o autor Aeon, fonte

Desenhar texto com a tag de tela é uma grande dor. Suas opções são usar divs regulares absolutamente posicionados nos lugares certos, ou encontrar/escrever um mecanismo de layout de fonte ( exemplo ), ou espere por um novo padrão a ser implementado que permita desenhar texto. O SVG lida com isso muito melhor.

No IE você tem ExplorerCanvas para simular a API da tela com a marcação VML do IE. No entanto, a VML nativa pode fazer texto em um caminho e coisas parecidas com SVG. Eu acho que, teoricamente, se você quiser manipulação de texto complexo, você quer SVG e VML como a biblioteca de Raphael que Dan mencionou.

Você também pode considerar o Flash por um momento antes de começar.

0
adicionado
Na verdade, o VML suporta o desenho de texto nativamente, e as últimas revisões do ExplorerCanvas têm os métodos de desenho de texto recomendados pelo WHATWG;) explorercanvas .blogspot.com
adicionado o autor Fabien Ménager, fonte
Apenas como uma atualização. O texto é muito menos doloroso agora (2011), tem sido muito bom para o ano passado. O iOS4.1 + finalmente suporta texto em telas corretamente e eu sei que o Android 2.1+ também funciona. O Firefox/Safari/Chrome sempre teve um bom suporte a texto de tela e o IE9 + também faz texto no Canvas corretamente.
adicionado o autor Gabe, fonte

Confira o plug-in do jQuery Drawing , e você também pode ver o Mozilla Referência do Canvas e tutorial .

0
adicionado

Você pode usar o objeto de tela diretamente para desenhar em 2D. O IE requer a biblioteca excanvas.

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

0
adicionado
Parece que Raphael pode fazer mais do que simples caixas e linhas .. raphaeljs.com
adicionado o autor ina, fonte
Canvas é o caminho a percorrer para qualquer coisa mais do que algumas caixas ou linhas triviais. E o excanvas funciona surpreendentemente bem, pelo menos no IE 7.
adicionado o autor dgvid, fonte
Funciona muito bem com o IE6 também.
adicionado o autor Prestaul, fonte

O Processing.js de John Resig é uma boa estrutura para isso.

0
adicionado
como o processing.js se compara ao raphael para gráficos estáticos?
adicionado o autor ina, fonte
Parece que o IE agora é suportado (IE9)
adicionado o autor yorjo, fonte
Infelizmente, o processamento não suporta o IE. Isso é um pouco de pena, parece ótimo embora.
adicionado o autor John Ballinger, fonte

Dependendo de como o navegador cruzado precisa ser e do objetivo de fazer a saída, você pode examinar o elemento Canvas e o JavaScript relacionado.

Canvas

0
adicionado

Tente http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm. É o melhor que eu encontrei (sem recorrer ao SVG) e funciona na maioria dos navegadores sem suplementos.

0
adicionado
adicionado o autor quantumpotato, fonte
walterzorn.com não parece estar mais em volta. :(
adicionado o autor Alex Black, fonte
Esse material (desenho, organizando elementos HTML) não se adapta muito bem, mas certamente funciona :)
adicionado o autor Dan, fonte
É verdade ... você certamente não construiria um sistema CAD dessa maneira, mas pode fazer desenhos bem complexos se você ficar com estruturas e imagens ortogonais (linhas, retângulos, etc.) e apimentá-los um pouco com imagens. Outras entidades de desenho são construídas com vários elementos DIV cada.
adicionado o autor Steve Moyer, fonte

D3.js

D3.js é uma biblioteca JavaScript para manipular documentos com base em   dados. O D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. D3   A ênfase nos padrões da Web oferece todos os recursos da tecnologia moderna.   navegadores sem se vincular a uma estrutura proprietária, combinando   componentes poderosos de visualização e uma abordagem baseada em dados para o DOM   manipulação.

Dê uma olhada nesta discussão também.

0
adicionado