Top 8 des bibliothèques de dessins JavaScript : gratuites et open source

Les images et les animations sont engageantes, amusantes et parfaites pour transmettre des informations difficiles à traiter et à comprendre en utilisant uniquement des mots écrits. Cela est vrai pour les photos prises avec un appareil photo ainsi que pour les dessins créés à l’aide d’un ordinateur. Dans cet article, je vais vous montrer certaines des meilleures bibliothèques de dessins JavaScript gratuites et open source.

Il existe de nombreuses bibliothèques gratuites qui utilisent des éléments HTML5 canvas et des technologies comme SVG pour dessiner tout ce que vous voulez dans le navigateur. Non seulement vous pouvez dessiner à l'aide des API fournies par ces bibliothèques, mais vous pouvez également animer tout ce que vous créez.

Commençons.

Deux .js

Two.js est une bibliothèque très populaire et facile à utiliser pour dessiner des formes 2D à l'aide de JavaScript. C'est bien documenté et vous passez très peu de temps à apprendre les bases.

Deux choses que vous allez adorer dans cette bibliothèque. Tout d’abord, cela n’a rien à voir avec le rendu. Cela signifie que vous pouvez utiliser la même API pour dessiner des graphiques sur des éléments de canevas via SVG ou WebGL. Cette fonctionnalité m'a sauvé plusieurs fois lorsque j'utilise cette bibliothèque. Deuxièmement, la bibliothèque dispose également de fonctionnalités intégrées pour animer tout ce que vous dessinez à l'écran.

Vous pouvez également créer des jeux simples plus facilement en écoutant différents événements du clavier et de la souris pour mettre à jour la taille, la position et la couleur des différents éléments dessinés à l'écran.

L'exemple ci-dessus de Jono Brandel utilise Two.js pour créer une route ondulée animée sur une toile. Vous pouvez trouver des projets plus intéressants sur le site officiel.

Paper.js

La bibliothèque Paper.js est une autre solution gratuite et open source pour les personnes qui souhaitent dessiner en utilisant JavaScript. Cette bibliothèque utilise canvas pour gérer son animation de dessin. Cependant, son objectif principal est le dessin vectoriel plutôt que les images raster.

Il existe deux options pour créer des graphiques à l'aide de cette bibliothèque. Vous pouvez continuer à utiliser JavaScript standard ou envisager d'utiliser une version modifiée de la bibliothèque appelée PaperScript. L’utilisation de PaperScript vous oblige à consacrer un peu plus de temps à apprendre à l’utiliser. Cependant, il présente certains avantages, comme des calculs plus faciles pour les Point 和 Size objets utilisés dans toute la bibliothèque.

Vous pouvez faire beaucoup de choses intéressantes avec cette bibliothèque, y compris des fonctionnalités telles que des calques imbriqués, des chemins simples et des chemins composés. Vous pouvez également lisser les courbes dessinées à l'aide de la bibliothèque. Vous pouvez également utiliser les modes de fusion pour rendre le chevauchement entre différents éléments plus attrayant visuellement.

Le CodePen ci-dessus d'Alberto Jerez utilise un certain nombre de ces calques et fonctions de composition pour créer un effet intéressant, avec des cercles qui changent de forme lorsqu'ils entrent en collision.

P5.js

La bibliothèque p5.js est un excellent choix pour ceux qui recherchent une bibliothèque qui n'a pas une courbe d'apprentissage abrupte mais qui peut créer des systèmes très complexes si nécessaire. La page d'entrée P5.js sur le site officiel contient un exemple fonctionnel Avec seulement quelques lignes de code, un cercle peut être dessiné partout où la souris se déplace.

Cette bibliothèque s'inspire de la populaire plate-forme de traitement Java et dispose d'une communauté active qui peut vous aider lorsque vous êtes bloqué. Il existe de nombreux exemples disponibles qui démontrent les capacités de cette bibliothèque. Ils peuvent être d’une grande aide lorsque vous cherchez l’inspiration. Vous pouvez les utiliser pour apprendre à simuler la physique, créer des systèmes de particules et réagir aux différentes entrées de l'utilisateur.

L'exemple ci-dessus de Johan Karlsson utilise p5.js pour créer de petits insectes qui se déplacent de manière aléatoire sur la toile. En cliquant n'importe où dans la démo, vous créerez un nouvel ensemble de moustiques placés au hasard.

Kangwa

La bibliothèque Konva est un peu différente des bibliothèques que j'ai mentionnées jusqu'à présent. Vous pouvez l'utiliser pour dessiner des formes de base sur la toile, mais il est tout à fait possible de faire bien plus. Vous pouvez ajouter des animations et des transitions hautes performances pour ajouter un attrait visuel à tout ce que vous dessinez sur la toile.

La particularité de cette bibliothèque est qu'elle vous permet d'attacher des gestionnaires d'événements à tout ce que vous dessinez à l'écran. Vous pouvez sélectionner des objets précédemment dessinés sur le canevas et les déplacer. Vous pouvez également redimensionner et faire pivoter les objets sélectionnés sans affecter les autres éléments que vous dessinez.

Ces fonctionnalités sont parfaites pour ceux qui souhaitent une bibliothèque pour les aider à créer des applications de dessin simples et des jeux de glisser-déposer sur la toile. Vous pouvez utiliser des groupes pour déplacer et manipuler plusieurs formes ensemble.

Le jeu de réflexion simple ci-dessus a été créé à l'aide de Konva par Jakub Beneš. L’idée de base est de choisir une boîte avec une couleur légèrement différente des autres.

Tissu.js

La bibliothèque Fabric.js est construite sur la même philosophie que Konva et possède bon nombre des mêmes fonctionnalités. En fait, Fabric.js semble être plus populaire et actif que Konva.

Cette bibliothèque fournit un modèle objet interactif construit sur l'élément canvas. Cela signifie essentiellement que vous pouvez dessiner différents objets tels que des formes géométriques et des images sur la toile pour interagir avec eux ultérieurement. Cette bibliothèque offre à vos utilisateurs la possibilité de déplacer, redimensionner et faire pivoter tout ce qu'ils dessinent sur le canevas, vous permettant ainsi de créer des applications de maquette simples, des générateurs de mèmes, etc.

Essayez de faire glisser du texte ou d'ajouter vos propres formes et images sur la toile dans CodePen de Martin Florian ci-dessus. La page d'accueil de la bibliothèque présente davantage de fonctionnalités, telles que le dessin à la main et l'utilisation de motifs et de dégradés pour remplir des formes.

Snap.svg

La bibliothèque Snap.svg est un choix populaire pour les personnes qui souhaitent utiliser la puissance de SVG et de JavaScript pour créer des graphiques vectoriels indépendants de la résolution. La bibliothèque est open source et totalement gratuite.

Il est livré avec une API propre et puissante qui peut manipuler et animer tout contenu SVG existant, ainsi que générer dynamiquement du contenu SVG. La bibliothèque a été développée en gardant à l'esprit la prise en charge d'IE9 et versions ultérieures. Cela permet aux développeurs de fournir plus facilement des fonctionnalités telles que des masques, des découpages et des modèles sans se soucier de la prise en charge des anciens navigateurs.

La bibliothèque facile à utiliser offre de nombreuses façons de créer des formes de base et d'appliquer des propriétés à l'aide de paires clé-valeur comme fill、Stroke 和 StrokeWidth. Vous pouvez également regrouper des éléments pour apporter des modifications à plusieurs éléments à la fois. Différents objets peuvent être facilement référencés par leur nom ou par des sélecteurs CSS appropriés. Consultez l'exemple ci-dessous écrit par Ronan Levesque.

SVG.js

Si vous souhaitez dessiner et animer du SVG à l'aide de JavaScript, une autre option populaire consiste à utiliser la bibliothèque SVG.js. L'objectif des développeurs de bibliothèques est de la rendre aussi petite et rapide que possible tout en fournissant une couverture presque complète de la spécification SVG. Il n'y a aucune dépendance et la bibliothèque peut être utilisée indépendamment.

Vous pouvez voir ses performances par rapport à Vanilla JS et Snap.svg sur la page d'accueil du site. Vous pouvez créer des formes de base et les ajouter au DOM à l'aide de fonctions intégrées. Cette bibliothèque est livrée avec diverses fonctions pour manipuler l'apparence de tout ce que vous dessinez à l'écran. Il prend également en charge les écouteurs d'événements afin que vous puissiez implémenter la possibilité de modifier ou d'animer n'importe quel élément SVG en fonction de l'interaction de l'utilisateur.

Essayez de modifier les valeurs des différentes options dans CodePen de George Francis ci-dessus pour générer des modèles uniques à l'aide de SVG.js.

Diagramme de séquence JS

La dernière bibliothèque de notre liste n'attire peut-être pas le grand public, mais elle remplit un objectif unique et mérite d'être mentionnée. Avez-vous déjà participé à un projet où vous deviez dessiner un diagramme de séquence UML ? Si vous êtes d’accord, la galerie de séquences JS pourrait vous convenir parfaitement.

Cette bibliothèque créera rapidement pour vous un diagramme de séquence simple basé sur SVG à l'aide de JavaScript. Tout ce que vous avez à faire est de lui fournir une représentation textuelle valide. Une chose que vous n'aimerez peut-être pas, c'est que cette bibliothèque dépend de nombreuses autres bibliothèques pour fonctionner correctement. Cela inclut Snap.svg, le chargeur de polices Web, underscore.js et éventuellement jQuery.

Cependant, cette bibliothèque reste un bon choix pour tous ceux qui souhaitent générer rapidement de tels graphiques sans se soucier d'écrire beaucoup de code. Vous pouvez également appliquer vos propres styles CSS pour modifier la couleur et le remplissage des différents composants. Jetez un œil à la démo ET ci-dessus et essayez de modifier le code pour voir comment le graphique change.

Pensées finales

Il existe de nombreuses bibliothèques gratuites pour dessiner des objets à l'aide de JavaScript. Mon objectif dans cet article est de mettre en évidence certaines bibliothèques populaires dotées d'un ensemble de fonctionnalités intéressantes qui résolvent des problèmes uniques. J'espère que cet article vous a aidé à choisir une bibliothèque capable de dessiner et d'animer des éléments sur un canevas ainsi qu'en utilisant SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!