90 votes

État actuel de Javascript Toile Bibliothèques?

J'ai été faire des recherches sur le canevas HTML bibliothèques et je suis tombé sur cette question. Quel est l'état actuel de l'art en canvas HTML JavaScript, des bibliothèques et des structures? qui a été posée en 2010. La réponse était top Fabric.js. Après avoir fait un peu plus de recherche, je suis tombé sur http://www.html5canvastutorials.com/ qui propose des tutoriels sur KineticJs, qui se vante d'avoir plusieurs toiles pour la vitesse. Une recherche un peu plus tard a révélé que la Toile les bibliothèques semblent être tous sur la place quand il s'agit de la vitesse et de fonctionnalités. Quel est l'état actuel de JavaScript Toile les bibliothèques et les cadres aujourd'hui? A l'un de sortir sur le dessus?

EDIT: étant donné que les bibliothèques sont en constante évolution et beaucoup de personnes ont récemment été à venir ici pour les dernières nouvelles et informations sur les nouvelles bibliothèques, j'ai changé la question à de plus intemporel.

80voto

kangax Points 19954

Avertissement: je suis l'auteur de Fabric.js.

Je dirais que Easel.js, Fabric.js et Paper.js sont parmi les plus utilisées à l'heure actuelle. Je suis en juger par le nombre de Github watchers pour chaque dépôt, le volume de la discussion au sein de leurs Groupes de Google, et la façon dont j'entends souvent parler d'eux utilisé comme toile de bibliothèques sur Twitter.

Ces personnes sont aussi celles avec plus ou moins décent de la documentation, des exemples/démos, des groupes de discussion, des tests unitaires (à l'état de test dans la plupart des autres toile bibliothèques est assez triste).

Je suis également le maintien de ce tableau de comparaison des différents toile bibliothèques, où vous pouvez voir comment récemment, la bibliothèque a été mise à jour, sa taille, le soutien pour IE<9 ou node.js et bien plus encore.

66voto

Eric Rowell Points 3940

Avertissement: j'ai créé KineticJS

KineticJS est en fait assez bien. Vous pouvez trouver le code source sur Github, où il est joué par 2180 personnes à l'heure actuelle.

Il peut gérer des milliers de connexions simultanées formes:

De 10 000 faire glisser et déposer des stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

De 10 000 formes avec les info-bulles: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Il a une très bonne prise en charge des événements, y compris les événements, et il a une bonne suite de 100 de tests unitaires afin que le code de base se sent assez solide.

kangax: P. S. génial de travailler avec fabric.js! Autres que KineticJS (bien sûr), mes deux autres bibliothèques préférées sont de tissu et de papier.

63voto

Jeremy Burton Points 690

Pour ces dernières lecteurs, à partir de janvier 2013, je évaluée:

  • Cinétique
  • Tissu
  • Papier
  • Chevalet

Par "évalué", je n'ai plus que juste lire les docs; j'ai créé un prototype d'application.

J'ai commencé avec le Tissu parce qu'il semblait avoir le plus grand de la communauté et de la pensée qu'elle serait ma solution. Mais, j'ai donné sur le Tissu pour les raisons suivantes:

  • bizarre et sans-papiers de l'API incohérences qui a brûlé une grande partie de mon temps inutilement.
  • incompatible pointeur de la prise en charge des événements. Plus précisément, le Tissu ne la considère pas comme un "Chemin" pour être un vrai objet de forme qui est sélectionnable et observables. Ce n'est pas répondre à mes besoins depuis interactives les Chemins d'accès sont d'une exigence majeure de mon application.
  • derrière les coulisses des ajouts de traduction de la Toile à la position des objets. Pour moi, Tissu essaie d'être trop intelligent à ce sujet sans être claire pour le développeur de ce qu'il fait.
  • trop forte opinion sur la façon de déplacer, redimensionner et faire pivoter l'interactivité fonctionne. Dans beaucoup de façons, il est bon d'avoir cette fonctionnalité est intégrée au cadre, mais, dans mon cas, je n'étais pas d'accord avec la façon dont il a été mis en œuvre qui signifie essentiellement d'avoir à ré-écrire moi-même de toute façon.
  • rare documentation beaucoup de ces cas où la documentation de la méthode est de la forme: "setX(Y) - ensemble de X à Y" :-)

J'ai pris un coup d'oeil au Papier et ne pas aller trop loin. Il semblait trop obtus pour moi et tombe aussi entre trop selles de l'OMI - c'est trop d'une bibliothèque de visualisation de n'être qu'un simple modèle d'objet pour la Toile, mais il ne suffit pas d'une bibliothèque de visualisation de rivaliser avec D3. De Plus, la documentation n'était pas particulièrement accessible.

Je pense Chevalet probablement fait beaucoup de sens si vous avez un Flash/ActionScript arrière-plan, mais je ne sais pas. De Plus, il semblait trop jeu-porté pour mes besoins. Le clou dans le cercueil était de nouveau de la documentation - pas assez et présenté dans le format non standard.

Donc j'ai fini par aller avec Cinétiques parce que:

  • vraiment riche et clair, des tutoriels et des exemples
  • Les fonctions API de faire ce qu'ils sont appelés et sont largement deviner plus rapide de la productivité, peu profondes de la courbe d'apprentissage
  • est assez clair sur ce qu'il fait et ce qu'il n'a pas - il n'est pas aussi riche que certains des autres, mais c'est un avantage; il ne moins de choses, mais le fait mieux
  • Les chemins sont de citoyen de première classe de Formes, comme toute autre Forme, ce qui est essentiel pour mes besoins.

Cinétique n'est pas parfait par tous les moyens et il y a eu quelques fois où je l'ai eu à plonger dans le code source de travailler sur ce qui se passe réellement dans les coulisses. De Plus, je m'ennuie de la SVG d'analyse et de sortie de Tissu.

23voto

benDangelo Points 161

Je vous recommande fortement de pixijs. Son de haute performance, de la toile de la bibliothèque.

Pixi.js est un 2D webGL rendu avec une parfaite toile de secours qui lui permet de travailler sur tous les navigateurs modernes à la fois de bureau et mobile.

http://www.goodboydigital.com/pixi-js-is-out/

-11voto

Une nouvelle toile à base de dessin et d'animation cadre WebDoodling n'est pas encore lancé, mais j'aimerais aussi vous inscrire vous-même une invitation. Il est actuellement en beta privée. De ses été en développement depuis plus d'un an maintenant et prêt à être lancé très prochainement. WebDoodling a été conçu très soigneusement prise en compte de nombreux aspects, y compris l'état actuel des navigateurs html5, leurs limites de performance, l'état d'esprit de l'interface utilisateur, de l'animation et de développeurs, facile d'utilisation, et de l'extensibilité...

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X