État actuel des bibliothèques de canevas Javascript? [fermé]

90

J'ai fait des recherches sur les bibliothèques de canevas HTML et je suis tombé sur cette question. Quel est l'état actuel de l'art dans les bibliothèques et frameworks JavaScript de canevas HTML? cela a été demandé en 2010. La principale 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 recherche a révélé plus tard que les bibliothèques Canvas semblent être partout en matière de vitesse et de fonctionnalités. Quel est l'état actuel des bibliothèques et des frameworks JavaScript Canvas aujourd'hui? Est-ce que l'un est arrivé 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.

javascript html html5-canvas

— Ericbowden
source

2

absolument. Je pense que les options ressemblent à ceci: 2d-context -> KineticJS, fabric.js, paper.js ou easel.js. 3d-context (webgl) -> Three.js

— Eric Rowell

1

Vous pouvez consulter le lien de kangax vers la comparaison des bibliothèques de canevas. Republication ici docs.google.com/spreadsheet/…

— ericbowden

4

Je suis surpris que cette question ne soit pas encore close, car à peu près tout ici est généralement fermé. Je veux répondre mais j'ai trop peur (lire «terrifié») car cela pourrait être considéré comme hors sujet. Peut-être que si vous reformulez la question comme «quelles sont les similitudes / compromis», je pourrais ajouter mes deux cents (lire «réponse»)

— puk

4

Je ressens la même chose que @puk. De plus, je pense que le fossé sémantique entre ce qui est essentiellement «ouvert» et ce qui est marqué comme «non constructif» est amusant. Cela se traduit en gros par des questions pour lesquelles une seule réponse irréductible n'est pas possible ne méritent pas d'être prises en compte dans le référentiel de connaissances en programmation le plus populaire et le plus complet au monde. Je comprends qu'ils ne correspondent pas à un bon «Q + A», mais pourquoi ne pas simplement les marquer comme «très subjectifs», plafonner les points de répétition et les garder ouverts… quelque chose.

— Mark Fox

1

Juste peser pour SO que moi aussi je suis vraiment irrité par la fermeture constante de questions utiles simplement parce qu'elles sont subjectives. Et alors!? Ce sont des trucs vraiment utiles.

— Iain Duncan

80

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

Je dirais que Easel.js, Fabric.js et Paper.js sont parmi les plus utilisés actuellement. 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'entends parler d'eux comme bibliothèques de canevas sur Twitter.

Ce sont aussi ceux avec une documentation, des exemples / démos, des groupes de discussion et des tests unitaires plus ou moins décents (l'état des tests dans la plupart des autres bibliothèques de canevas est assez triste).

Je maintiens également ce tableau de comparaison de diverses bibliothèques de canevas , où vous pouvez voir à quelle date la bibliothèque a été mise à jour, sa taille, la prise en charge d'IE <9 ou node.js, etc.

— Kangax
source

votre comparaison donne beaucoup d'informations, mais elle est publiquement modifiable qui devrait être restreinte, car certains autres utilisateurs les modifieront à tort. J'ai besoin d'aide est kineticjs ne supporte pas nodjs? et pouvez-vous donner un exemple comme le programme de peinture de fenêtres (dessiner le cercle d'objets en direct avec votre tissu)

— Thirumalai murugan

ce n'est pas publiquement modifiable

— kangax

1

Tellement chanceux que j'ai trouvé ce post! Utilisé pour travailler avec Kinetic mais ce n'est pas encore mature. Ensuite, j'ai essayé Easel, mais c'est trop lourd. Enfin déplacé vers Fabric, et c'est génial!

— MeLight

@kangax Désolé pour la compréhension manquée, pouvez-vous me donner un exemple comme le programme de peinture Windows (dessiner le cercle d'objets en direct avec votre tissu)

— Thirumalai murugan

@Thirumalaimurugan ici vous allez: jsfiddle.net/fabricjs/nXmTC/1

— kangax

66

EDIT: KineticJS n'est plus activement maintenu.

Clause de non-responsabilité: j'ai créé KineticJS

KineticJS se porte plutôt bien. Vous pouvez trouver le code source sur Github , où il est actuellement joué par 2180 personnes.

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

10 000 tests 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 les é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: PS super travail avec fabric.js! Outre KineticJS (bien sûr), mes deux autres bibliothèques préférées sont le tissu et le papier.

— Eric Rowell
source

7

Je viens de regarder les démos et les performances sont vraiment géniales! Je suis également ravi d'apprendre que vous avez des tests unitaires. Je vois que vous autorisez la création de plusieurs couches. C'est zonte. En fabric, nous optimisons de la même manière mais nous n'avons que 2 calques - un pour la sélection, un pour le dessin - et en interne (les utilisateurs ne peuvent pas en créer plus). En quelque sorte, j'ai manqué Kinetic lors de la création du tableau de comparaison des bibliothèques. Nous devrions corriger cela :)

— kangax

6

mise à jour: KineticJS est maintenant dans github: github.com/ericdrowell/KineticJS

— Eric Rowell

7

Comment KineticJS se compare-t-il à EaselJS? Quand faut-il utiliser quoi?

— geeky_monster

1

tient à souligner que KineticJS prend également en charge les vecteurs SVG via la forme Kinetic.Path () html5canvastutorials.com/kineticjs

— Eric Rowell

2

@EricRowell Mate J'adore KineticJS, sa vitesse, son mariage avec GSAP, mais qu'est-ce qui me fait tourner la tête, y a-t-il un moyen de transformer librement les objets KineticJS comme dans FabricJS? Voici la référence du lien vers ce que j'essaie de dire: fabricjs.com/customization Je ne veux pas utiliser FabricJs car c'est vraiment lent, et ses faibles performances évidentes à partir de divers tests unitaires. J'ai vraiment hâte de trouver un moyen de pouvoir transformer librement un objet dans KineticJS, car cela rendrait la vie tellement plus facile. Merci, Praney

— praneybehl

62

Pour les lecteurs récents, en janvier 2013, j'ai évalué:

Cinétique
en tissu
Papier
Chevalet

Par «évalué», j'ai fait plus que simplement lire la documentation; 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 d'API étranges et non documentées qui ont brûlé beaucoup de temps inutilement.
prise en charge des événements de pointeur incohérente. Plus précisément, Fabric ne considère pas un "Chemin" comme un véritable objet de forme 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 formidable 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 impliquait essentiellement de devoir la réimplémenter moi-même de toute façon.
documentation clairsemée - beaucoup de cas où la documentation d'une méthode est de la forme: "setX (Y) - met le X à Y" :-)

J'ai jeté un coup d'œil à Paper et je ne suis pas allé trop loin. Cela m'a semblé trop obtus et se situe également entre trop tabourets IMO - c'est trop une bibliothèque de visualisation pour être un simple modèle d'objet pour Canvas mais ce n'est pas assez une bibliothèque de visualisation pour rivaliser avec D3. De plus, la documentation n'était pas particulièrement accessible.

Je pense que Easel a probablement beaucoup de sens si vous avez un arrière-plan Flash / ActionScript, mais pas moi. 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 choisir Kinetic parce que:

tutoriels et exemples vraiment riches et clairs
Les fonctions de l'API font ce qu'elles appellent et sont largement devinables - productivité plus rapide, courbe d'apprentissage moins profonde
est raisonnablement clair sur ce qu'il fait et ce qu'il ne fait pas - ce 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 premier ordre, comme toute autre forme, ce qui était essentiel pour mes besoins.

Kinetic n'est en aucun cas parfait et il y a eu quelques fois où j'ai dû plonger profondément dans le code source pour comprendre ce qui se passait réellement sous les couvertures. De plus, l'analyse et la sortie SVG de Fabric me manquent.

— Jeremy Burton
source

1

Merci pour cette réponse, m'a fait gagner beaucoup de temps. Je vais aller avec Kinetic et j'espère que vous découvrirez ce que vous avez déjà dit.

— Bashevis

J'ai fait un test utilisateur non scientifique des démos de glisser-déposer fournies pour les bibliothèques ci-dessus sur iPad3 et Samsung Galaxy Tab2. KineticJS est également ressorti clairement gagnant ici, étant plus réactif et plus précis dans son positionnement tactile.

— Par Quested Aronsson

1

J'évalue les deux, et pour le moment sincèrement fabricjs semble être plus complet et bien documenté.

— albanx le

9

Jeremy, j'aimerais en savoir plus sur les incohérences d'API dans Fabric. J'essaie de le rendre aussi intuitif que possible, donc si quelque chose est encore bizarre, je voudrais vraiment m'en occuper. Pouvez-vous déposer un ticket ou le mentionner ici? Les documents s'améliorent depuis janvier, même s'ils ne sont toujours pas aussi bons que je le souhaiterais. Forte opinion de l'interactivité - je suppose que vous pouvez le dire, bien que vous puissiez faire beaucoup de réglages. Qu'est-ce que tu voulais exactement de différent? Enfin, les événements de pointeur - pas sûr de ce que vous voulez dire. Le chemin est certainement une vraie forme: fabricjs.com/quadratic-curve

— kangax

23

Je recommande vivement pixijs. C'est une bibliothèque de canevas haute performance.

Pixi.js est un moteur de rendu webGL 2D avec une toile de secours transparente qui lui permet de fonctionner sur tous les navigateurs modernes à la fois de bureau et mobiles.

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

— Bendangelo
source

3

En juillet 2014, cela semble être la meilleure bibliothèque de canevas. Avec 4k personnes, il a joué sur Github et il est utilisé par les grandes entreprises et les agences. pixijs.com/projects comme Google.

— Vennsoh le