État actuel des bibliothèques de canevas Javascript?
J'ai fait des recherches sur les bibliothèques HTML Canvas et je suis tombé sur cette question. Quel est l'état actuel de la technique dans les bibliothèques et frameworks JavaScript HTML Canvas? qui a été demandé en 2010. La meilleure réponse était 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. Un peu plus de recherches ont révélé plus tard que les bibliothèques Canvas semblaient être partout en matière de vitesse et de fonctionnalités. Quel est l'état actuel des bibliothèques et frameworks JavaScript Canvas? Quelqu'un est-il sorti en tête?
EDIT: Étant donné que les bibliothèques changent constamment et que beaucoup de gens sont récemment venus ici pour des nouvelles et des informations sur les nouvelles bibliothèques, j'ai changé la question pour qu'elle soit plus intemporelle.
Avertissement: je suis l'auteur de Fabric.js .
Je dirais que Easel.js, Fabric.js et Paper.js sont parmi les plus utilisés en ce moment. Je juge par le nombre d'observateurs Github pour chaque référentiel, le volume de discussion dans leurs groupes Google et la fréquence à laquelle j'en entends parler comme bibliothèques de canevas sur Twitter.
Ce sont également ceux avec une documentation plus ou moins décente, des exemples/démos, des groupes de discussion et des tests unitaires (l'état des tests dans la plupart des autres bibliothèques de canevas est assez triste).
Je maintiens également cela tableau de comparaison des différentes bibliothèques de canevas , où vous pouvez voir la date de mise à jour de la bibliothèque, sa taille, la prise en charge d'IE <9 ou de node.js, etc.
EDIT: KineticJS n'est plus activement maintenu.
Avertissement: j'ai créé KineticJS
KineticJS se porte plutôt bien. Vous pouvez trouver le code source sur Github , où il est actuellement utilisé par 2180 personnes.
Il peut gérer des milliers de formes simultanées:
10000 test de résistance par glisser-déposer: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
10000 formes avec 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 des événements mobiles, et il dispose d'une suite assez solide de 100 tests unitaires, de sorte que la base de code semble assez solide.
kangax: P.S. travail génial avec fabric.js! À part KineticJS (bien sûr), mes deux autres bibliothèques préférées sont le tissu et le papier.
Pour les lecteurs récents, en janvier 2013, j'avais évalué:
- Cinétique
- En tissu
- Papier
- Chevalet
Par "évalué", j'ai fait plus que simplement lire les documents; J'ai créé une application prototype.
J'ai commencé avec Fabric car il semblait avoir la plus grande communauté et je pensais que ce serait ma solution. Mais j'ai abandonné Fabric pour les raisons suivantes:
- incohérences API étranges et non documentées qui ont brûlé beaucoup de mon temps inutilement.
- prise en charge des événements de pointeur incohérents. Concrètement, Fabric ne considère pas un "chemin" comme un véritable objet de forme qui est sélectionnable et observable. Cela ne répondait pas à mes besoins car les chemins interactifs sont une exigence majeure de mon application.
- dans les coulisses des ajouts de traductions au canevas pour positionner les objets. Pour moi, Fabric essaie d'être trop intelligent à cet égard sans être clair pour le développeur ce qu'il fait.
- opinion trop forte sur le fonctionnement de l'interactivité de déplacement, de redimensionnement et de rotation. À bien des égards, c'est génial d'avoir cette fonctionnalité intégrée dans le cadre mais, dans mon cas, je n'étais pas d'accord avec la façon dont elle a été mise en œuvre, ce qui signifiait essentiellement avoir à la réimplémenter de toute façon.
- documentation clairsemée - beaucoup de cas où la documentation d'une méthode est de la forme: "setX (Y) - set's the X to Y" :-)
J'ai jeté un œil à Paper et je ne suis pas allé trop loin. Cela m'a semblé trop obtus et se situe également entre trop de selles IMO - c'est trop une bibliothèque de visualisation pour être un modèle d'objet simple pour Canvas mais ce n'est pas assez d'une bibliothèque de visualisation pour rivaliser avec D3. De plus, la documentation n'était à nouveau pas particulièrement accessible.
Je pense que Easel a probablement beaucoup de sens si vous avez un arrière-plan Flash/ActionScript, mais je n'en ai pas. De plus, cela semblait trop axé sur le jeu pour mes besoins. Le clou dans le cercueil était à nouveau de la documentation - pas assez et présenté dans un format non standard.
Donc, j'ai fini par aller avec Kinetic parce que:
- tutoriels et exemples vraiment riches et clairs
- Les fonctions API font ce qu'on appelle et sont largement devinables - productivité plus rapide, courbe d'apprentissage moins profonde
- est assez clair sur ce qu'il fait et ce qu'il ne fait pas - il n'est pas aussi riche que certains des autres, mais c'est un avantage; il fait moins de choses mais les fait mieux
- Les chemins sont des formes citoyennes de première classe, comme toute autre forme, ce qui était essentiel pour mes besoins.
La cinétique n'est pas parfaite du tout et il y a eu plusieurs fois où j'ai dû plonger profondément dans le code source pour comprendre ce qui se passe réellement sous les couvertures. De plus, je rate l'analyse et la sortie SVG de Fabric.
Je recommanderais vivement les pixijs. C'est une bibliothèque de toiles haute performance.
Pixi.js est un moteur de rendu WebGL 2D avec une solution de repli transparente qui lui permet de fonctionner sur tous les navigateurs modernes, à la fois sur ordinateur et sur mobile.