Vous avez déjà voulu exploiter la puissance de l’élément canvas HTML sans savoir par où commencer ? Cet article explore l’intégration d’un canvas dans une application AngularJS et l’utilisation de Fabric.js pour offrir un modèle d’objets pour le canvas.
Qu’est-ce que le canvas HTML ?
L’élément canvas HTML existe depuis longtemps et constitue un outil polyvalent pour dessiner des graphiques directement dans une page Web. Il sert d’espace dans le DOM où l’on peut rendre des formes 2D, des images, des animations et bien plus pour créer des visuels dynamiques tels que des graphiques, des outils de manipulation d’images, des outils de modélisation 3D et même des graphismes de jeux.
Contrairement aux éléments HTML traditionnels, tout ce qui est affiché dans un élément canvas est rendu par JavaScript, ce qui permet de mettre à jour le contenu de façon dynamique et offre un niveau d’interaction et de manipulation plus profond que les éléments DOM statiques.
Qu’est-ce que Fabric.js ?
Fabric.js est une librairie JavaScript qui vise à simplifier la tâche de travail avec l’élément canvas HTML5 en fournissant un modèle d’objet pour le canvas, ainsi qu’un parseur SVG, une couche d’interactivité et de nombreuses utilités pour prendre en charge des scénarios complexes et la modélisation de données.
Cet article se concentre sur la version 5 de Fabric.js, bien qu’il soit utile de noter qu’au moment de la rédaction, la version 6.3.0 est sortie et avance vers une plateforme stable. Et c’est tout ! Nous avons désormais un canvas Fabric.js pleinement fonctionnel que nous pouvons manipuler selon nos besoins.
Applications pratiques de Fabric.js
Nous avons donc un canvas et un monde de possibilités, mais que réaliser exactement ? Pour démontrer la puissance de Fabric.js, l’auteur revient sur un produit antérieur qui permettait aux utilisateurs de visualiser et de construire un “plan d’étage” de tous les dealers et tables sur un casino. À l’époque, la décision fut prise d’utiliser des SVG et, grâce à Angular et son chargeur de composants dynamiques, il était possible de créer un plan d’étage virtuel et infini qui chargeait et déchargait les éléments du DOM au fur et à mesure qu’ils entraient et sortaient de la vue. Ce processus était complexe et prenait environ 3 mois à mettre en place.
Si l’on peut créer quelque chose de similaire en utilisant un canvas et Fabric.js en même fraction du temps, ce serait un véritable succès (spoiler : cela a pris environ 3 jours). L’auteur décide de construire un système de dessin basé sur une grille qui pourrait ensuite être étendu pour offrir des capacités de dessin pour des plans d’étage, des dispositions de tables de restaurant, des aménagements paysagers et des maquettes de projets, ainsi que toute autre chose nécessitant une vue “de haut en bas”.
La mise en place
Tout commence par des styles. Notez que la classe .lower-canvas est créée par Fabric ; tout ce que nous voulons ajouter à cette classe, c’est une grille pour l’arrière-plan. La taille de fond finira par correspondre à la taille de la grille que nous créons dans l’implémentation Fabric.js pour offrir une fonctionnalité “snap to grid”.
Maintenant que cela est en place, ajoutons des fonctionnalités au canvas.
Fussion et déplacement
Panoramique (Panning) est une partie clé de tout système de dessin basé sur une grille. Le zoom (Zooming) est prêt grâce au balayage, alors ajoutons des capacités de zoom.
Acet du quadrillage et alignement
Le fond est défini comme une grille de 50 px, ce qui permet d’aligner et d’accrocher le déplacement des formes sur le motif de grille. Définissons la propriété de taille de grille (en pixels). Parfois, lors du redimensionnement, un objet peut présenter des comportements étranges et nécessite une investigation plus poussée.
Ajout d’éléments sur le canvas
Une fois les contrôles en place, on peut commencer à ajouter des éléments sur le canvas. Fabric.js rend l’ajout d’éléments très simple et par défaut, tout élément présent sur le canvas bénéficie d’un plein pouvoir de manipulation. Nous allons donc ajouter des éléments : lignes, carrés et zones de texte, qui constituent une preuve de concept efficace pour ce système de dessin.
Les lignes posent un petit défi : un trait trop fin peut être difficile à sélectionner et déplacer avec le curseur.
Sauvegarde et chargement
Nous avons tout ce qu’il faut en matière de manipulation des éléments, ce qui signifie que l’étape suivante est de persister les données entre les sessions.
Limites, contraintes et particularités
Fabric.js est une excellente librairie avec une vaste gamme d’utilisations, mais elle vient avec son propre ensemble de comportements uniques.
Fabric et Angular
Cette section décrit la cohabitation entre Fabric.js et Angular. Utiliser Fabric.js avec Angular peut entraîner des échecs de build, Fabric.js étant construit avec des dépendances spécifiques à Node (par exemple jsdom) qui ne plaisent pas à Angular. Pour contourner cela, Fabric.js publie une version navigateur de chaque version du package, non mentionnée dans la doc. Il faut donc utiliser la version -browser des paquets lors de l’intégration avec Angular. Par exemple, pour la version 5.3.0, on installerait 5.3.0-browser.
Custom Builds et support tactile
La documentation n’est pas parfaitement explicite sur ce point, mais pour activer les événements tactiles, il faut utiliser ce que Fabric.js appelle une “custom build” via leur builder et activer les gestes. Cela télécharge un fichier .js à utiliser dans le projet. Comme nous utilisons déjà un gestionnaire de paquets pour Fabric.js, il peut être étrange que les builds personnalisés soient gérés autrement - la solution fréquente est un script post-install qui entre dans le répertoire Fabric.js après installation et lance une construction personnalisée avec les gestes activés. Pour cela, ajoutez ceci dans la section scripts de votre package.json : "postinstall": "cd node_modules/fabric && npm install && npm run build_with_gestures".
Réflexions finales
Je suis impressionné par l’utilisabilité générale et la conception de la librairie Fabric.js. Une tâche qui prenait autrefois des mois m’a pris seulement quelques jours, et l’ajout de fonctionnalités devient plus simple grâce au modèle d’objet que Fabric.js offre.
Pour ceux qui souhaitent une visualisation concrète, on peut imaginer une infographie montrant la relation entre canvas, Fabric.js, et Angular, ainsi qu’un schéma de flux des étapes de mise en place (initialisation, ajout d’éléments, sauvegarde/chargement, interaction tactile).
Using Fabric.js for Canvas drawing and animation : Introduction
Dans l’ensemble, ce tuto propose une démarche pratique pour démarrer avec canvas et Fabric.js sous AngularJS, en mettant l’accent sur le modèle d’objet et la gestion d’un dessin basé sur grille, tout en expliquant les particularités liées à Angular et au support tactile.
Tableau récapitulatif des points clés :
| Élément | Description | Astuce |
|---|---|---|
| Canvas HTML | Base graphique pour dessins et animations | Rendu par JavaScript, manipulation dynamique |
| Fabric.js | Modèle d’objet et outils pour canvas | Utiliser version -browser avec Angular |
| Grille “snap to grid” | Alignement précis des éléments | 50 px par défaut, ajuster selon besoin |
| Pan et Zoom | Navigation et scale du canvas | Implémenter dans Fabric.js |
| Custom Build (gestes tactiles) | Support tactile | Script post-install pour gestures |