web-dev-qa-db-fra.com

Bibliothèque de dessin Javascript?

Une suggestion pour une bibliothèque de dessins JavaScript interactive? Juste besoin de dessiner des lignes, des polygones, des textes de couleurs différentes. Compatible IE/Firefox/Opera/Safari .

javascriptgraphics
46
st.

Raphael est assez cool pour cela, et fonctionne sur les navigateurs puisqu'il utilise VML (pour MSIE) et SVG (pour tout le reste).

48
Dan

John Resig's Processing.js est un cadre agréable pour cela.

15
Zach

Vous pouvez utiliser l'objet de travail directement pour dessiner en 2D. IE nécessite la bibliothèque excanvas.

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

7
Craig B.

Essayez http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm . C'est le meilleur que j'ai trouvé (sans recourir à SVG) et fonctionne dans la plupart des navigateurs sans add-ins.

3
Steve Moyer

Dessiner du texte avec la balise canvas est très pénible. Vous avez le choix entre utiliser des divs normaux positionnés de manière absolue aux bons endroits, ou rechercher/écrire un moteur de présentation des polices ( exemple ), ou attendre l’application d’un nouveau standard permettant de dessiner du texte. Le SVG s'en occupe beaucoup mieux.

Dans IE, vous avez ExplorerCanvas pour simuler l’API de la zone de dessin avec le balisage VML d’IE. Cependant, le langage VML natif peut créer du texte sur un chemin et des éléments similaires à ceux de SVG. Je pense que théoriquement, si vous voulez une gestion de texte complexe, vous voudriez un SVG et un VML comme la bibliothèque Raphael mentionnée par Dan.

Vous pouvez également envisager Flash un moment avant de commencer.

2
jjrv

Aussi mxGraph . Cela n'utilise pas excanvas pour IE. Excanvas est beaucoup plus lent que l’utilisation de VML, en particulier la réutilisation des mêmes nœuds VML plutôt que la suppression, l’ajout de nœuds DOM à redessiner. C'est souvent un point négligé, mais Excanvas sur IE est tout simplement horrible.

2
David

Comme mentionné ci-dessus, la toile est la voie à suivre. IE ne le supporte pas de manière native, vous devez donc télécharger ExCanvas pour assurer la compatibilité entre navigateurs. Je recommanderais de regarder Ajaxian pour certains projets utilisant la balise canvas.

2
VirtuosiMedia

Vérifiez le plugin jQuery Drawing , et vous pouvez également consulter la référence Mozilla Canvas et tutorial .

2
CMS

En fonction de votre navigateur, et de votre objectif de sortie, vous pouvez vous pencher sur l'élément Canvas et le javascript associé.

Toile

1
Steve g

D3.js

D3.js est une bibliothèque JavaScript pour la manipulation de documents basés sur Les données. D3 vous aide à donner vie aux données en utilisant HTML, SVG et CSS. D3 L’accent mis sur les normes Web vous donne toutes les capacités de la technologie moderne navigateurs sans s’attacher à un framework propriétaire combinant des composants de visualisation puissants et une approche de DOM basée sur les données manipulation.

Jetez un oeil à cette discussion aussi.

0
microMolvi