Créez facilement vos animations HTML avec jCanvas

Magazine
Marque
Linux Pratique
Numéro
110
Mois de parution
novembre 2018
Spécialité(s)


Résumé
Le « Canvas » permet l’affichage de graphismes 2D et 3D à l’aide de JavaScript au sein d’une page HTML5. Il n’est pas toujours facile d’écrire le code JavaScript afférant au Canvas, c’est pour cela que je vous propose de découvrir la librairie jCanvas qui simplifie grandement l’écriture du code.

Body

Dans cet article, je vous propose de coder un train composé d’une locomotive et d’un wagon, le tout roulant sur des rails. On pourra agir sur le train via des glisser-déposer et on animera le train.

1. Création de la page HTML

La toute première chose à faire est de se créer un répertoire de travail et d’y importer ce dont nous avons besoin. En lisant la documentation jCanvas [1], on découvre que la seule dépendance est jQuery [2].

mkdir jCanvasDemo
cd jCanvasDemo
mkdir js
mkdir img
wget https://code.jquery.com/jquery-3.3.1.min.js -O js/jquery-3.3.1.min.jswget https://raw.githubusercontent.com/caleb531/jcanvas/v21.0.1/dist/min/jcanvas.min.js -O \js/jcanvas.min.jstouch index.htmltouch js/demo.js

Nous allons manipuler des images avec jCanvas, j’ai donc récupéré des images libres d’utilisation sur le site https://www.vecteezy.com/. Je les ai modifiés pour cet article :

wget http://colas.sebastien.free.fr/projets/jcanvas/ressources.zip
unzip ressources.zip
rm ressources.zip

Cela nous donne donc la structure suivante (commande tree) :

.

├── img

│   ├── infos.txt

│   ├── loco.png

│   ├── rails.png

│   └── wagon.png

├── index.html

└── js

    ├── demo.js

    ├── jcanvas.min.js

    └── jquery-3.3.1.min.js

Codons maintenant notre fichier principal index.html :

01: <!DOCTYPE html>

02: <html>

03:    <head>

04:        <script src="js/jquery-3.3.1.min.js"></script>

05:        <script src="js/jcanvas.min.js"></script>        

06:        <script src="js/demo.js"></script>

07:        <meta charset="UTF-8">        

08:        <title>Utilisation simplifiée de canvas HTML avec jCanvas</title>

09:    </head>

10:    <body>

11:        <h1>Utilisation simplifiée de canvas HTML avec jCanvas</h1>

12:        <canvas id="canvas1" width="800" height="140"></canvas>

13:    </body>

14: </html>

Ce document HTML est relativement simple. On notera l’utilisation des librairies jQuery en ligne 04, ainsi que jCanvas en ligne 05. Notre programme principal sera contenu dans le fichier demo.js, ligne 06. La dernière partie importante se trouve en ligne 12 où nous déclarons notre Canvas qui aura comme identifiant canvas1 et comme dimensions 800x140 pixels.

Vous pouvez désormais tester la page HTML, rien de particulier ne s’affichera si ce n’est le titre.

2. Afficher une image

Commençons par afficher une simple image, en l’occurrence les rails sur lesquels nous allons faire rouler notre train. Ajoutons les lignes suivantes au fichier demo.js :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         source: 'img/rails.png',

04:         x: 0, y: 117

05:     });

06: });

On retrouve très souvent la ligne 01 dans le code jQuery. Cette ligne permet d’attendre que tout le document HTML soit chargé en mémoire avant de commencer à manipuler les composants s’y trouvant.

En ligne 02, on recherche le Canvas dans la page à l’aide de son identifiant ici : canvas1. Ensuite, on utilise la fonction drawImage provenant de jCanvas. Comme son nom l’indique, cette fonction permet d’afficher une image.

Les lignes 03 et 04 sont les paramètres passés à la fonction drawImage. source nous permet de définir la localisation de l’image que l’on veut utiliser et x,y sa position dans le Canvas. On notera que l’origine des coordonnées du Canvas se situe en haut à gauche.

Lors du test, on verra effectivement s’afficher nos rails, mais seulement en partie. Par défaut, dans jCanvas, le centre de l’image est utilisé comme point d’origine.

3. Afficher des images sur différents plans (couches)

Modifions notre code de la façon suivante :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         source: 'img/rails.png',

04:         x: 0, y: 117,

05:         fromCenter: false

06:     }).drawImage({

07:         source: 'img/loco.png',

08:         x: 100, y: 20,

09:         fromCenter: false

10:     });

11: });

La première modification est en ligne 05 où l’on dit à jCanvas de ne plus prendre le centre de l’image comme origine, mais bien de prendre la partie en haut à gauche. De cette façon, l’origine de notre image et du Canvas sera la même (en haut à gauche)

La deuxième modification se situe sur les lignes 06 à 10. On fait un nouvel appel à drawImage sur le résultat du drawImage précédent. Ceci est très pratique, car cela évite de répéter le code jQuery de sélection du composant : $('#canvas1').

Si rien n’est spécifié, jCanvas empilera les images les unes sur les autres. La locomotive apparaîtra devant les rails, c’est l’effet que nous recherchons.

4. Le glisser/déposer (drag & drop)

4.1 Glisser/déposer classique

Nous allons maintenant laisser la possibilité aux utilisateurs de bouger les images :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         layer: true,

04:         source: 'img/rails.png',

05:         x: 0, y: 117,

06:         fromCenter: false

07:     }).drawImage({

08:         layer: true,

09:         source: 'img/loco.png',

10:         x: 100, y: 20,

11:         fromCenter: false,

12:         draggable: true

13:     });

14: });

Les premières modifications sont en lignes 03 et 08, on spécifie à jCanvas que les deux images sont indépendantes, car elles appartiennent à des plans différents (en anglais « layers »). Une modification sur une image n’aura donc pas d’impact sur l’autre.

Seconde modification en ligne 12 qui nous active le glisser-déposer sur la locomotive.

On va donc pouvoir déplacer notre locomotive. Vous pouvez faire le test. On voit bien que la locomotive s’affiche devant les rails. On voit aussi que la locomotive peut être déplacée n’importe où dans le Canvas.

4.2 Glisser/déposer avec restriction

Comme c’est un peu embêtant pour une locomotive de sortir de ses rails, jCanvas nous propose de restreindre le glisser-déposer sur l’axe horizontal ou vertical.

Nous allons restreindre le déplacement de notre locomotive sur l’axe des x :

        ,restrictDragToAxis: 'x'

Cette ligne est à insérer entre les lignes 12 et 13 (on pourra mettre la virgule en ligne 12).

5. Manipulation des couches (layers)

5.1 Manipulation simple

Attelons un wagon à notre locomotive :

01 $( document ).ready(function() {

02     $('#canvas1').drawImage({

03         layer: true,

04         source: 'img/rails.png',

05         x: 0, y: 117,

06         fromCenter: false

07     }).drawImage({

08         layer: true,

09         source: 'img/loco.png',

10         x: 100, y: 20,

11         fromCenter: false,

12         draggable: true,

13         restrictDragToAxis: 'x'

14     }).drawImage({

15         layer: true,

16         source: 'img/wagon.png',

17         x: 225, y: 55,

18         fromCenter: false,

19         draggable: true,

20         restrictDragToAxis: 'x'

21     });

22 });

Rien de plus simple, on rajoute un drawImage (lignes 14 à 21).

Lors du test, on constate que la locomotive et le wagon restent bien sur les rails, mais qu’ils ne sont pas attachés. De plus, le wagon s’affiche devant la locomotive. Tout ceci est normal, car la locomotive et le wagon se trouvent sur deux couches différentes et le wagon étant déclaré après la locomotive, il s’affichera au premier plan.

5.2 Manipulation multiple

Nous allons modifier notre code pour déplacer notre wagon en même temps que notre locomotive :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         layer: true,

04:         source: 'img/rails.png',

05:         x: 0, y: 117,

06:         fromCenter: false

07:     }).drawImage({

08:         layer: true,

09:         source: 'img/loco.png',

10:         x: 100, y: 20,

11:         fromCenter: false,

12:         draggable: true,

13:         restrictDragToAxis: 'x',

14:         groups: ['train'],

15:         dragGroups: ['train']

16:     }).drawImage({

17:         layer: true,

18:         source: 'img/wagon.png',

19:         x: 225, y: 55,

20:         fromCenter: false,

21:         draggable: true,

22:         restrictDragToAxis: 'x',

23:         groups: ['train'],

24:         dragGroups: ['train']

25:     });

26: });

Comme nous voulons manipuler deux éléments graphiques en même temps, nous allons les regrouper : c’est l’objet des lignes 14 et 23 où on déclare que la locomotive et le wagon font partie du groupe train. On notera que nos objets peuvent faire partie de plusieurs groupes (nous utiliserons cette fonctionnalité ultérieurement).

Maintenant que nous avons un groupe, il faut déclarer ce qui se passe si on déplace un membre de ce groupe. Les lignes 15 et 24 nous permettent d’effectuer notre glisser-déplacer sur des groupes d’éléments.

On peut désormais déplacer tout notre train en faisant un glisser-déplacer sur la locomotive ou le wagon.

6. Gestion des évènements

6.1 Manipulation simple

Dans la vie réelle, c’est la locomotive qui tracte le wagon, il semble donc étrange qu’on puisse déplacer tout le train à l’aide du wagon. Modifions notre code de la façon suivante :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         layer: true,

04:         source: 'img/rails.png',

05:         x: 0, y: 117,

06:         fromCenter: false

07:     }).drawImage({

08:         layer: true,

09:         source: 'img/loco.png',

10:         x: 100, y: 20,

11:         fromCenter: false,

12:         draggable: true,

13:         restrictDragToAxis: 'x',

14:         groups: ['train'],

15:         dragGroups: ['train']

16:     }).drawImage({

17:         layer: true,

18:         source: 'img/wagon.png',

19:         x: 225, y: 55,

20:         fromCenter: false,

21:         groups: ['train'],

22:         click: function(layer) {

23:           alert("Cliquer sur la locomotive pour bouger le train");

24:         }

25:     });

26: });

La première chose à faire est de désactiver le glisser-déposer sur le wagon, pour cela il suffit de supprimer la ligne draggable: true,. On supprimera aussi la ligne restrictDragToAxis: 'x',.

Ensuite, nous allons avertir l’utilisateur qu’il faut déplacer le train et non pas la locomotive. On décide donc d’afficher un message en cas de clic sur le wagon grâce aux lignes 22 à 24.

6.2 Animation

Une fois notre train déplacé, nous aimerions qu’il retourne automatiquement à sa place. Voici donc ce que nous allons faire :

01: $( document ).ready(function() {

02:     $('#canvas1').drawImage({

03:         layer: true,

04:         source: 'img/rails.png',

05:         x: 0, y: 117,

06:         fromCenter: false

07:     }).drawImage({

08:         layer: true,

09:         source: 'img/loco.png',

10:         x: 100, y: 20,

11:         fromCenter: false,

12:         draggable: true,

13:         restrictDragToAxis: 'x',

14:         groups: ['train','loco'],

15:         dragGroups: ['train'],

16:         dragstop: function (layer)

17:         {

18:                 $('canvas').animateLayerGroup('loco',  { x: 100 }, 500)

19:                            .animateLayerGroup('wagon', { x: 225 }, 500);

20:         }

21:     }).drawImage({

22:         layer: true,

23:         source: 'img/wagon.png',

24:         x: 225, y: 55,

25:         fromCenter: false,

26:         groups: ['train','wagon'],

27:         click: function(layer) {

28:                 alert("Cliquer sur la locomotive pour bouger le train");

29:         }

30:     });

31: });

Tout d’abord, nous allons dire que notre locomotive fait parti des groupes train et loco en ligne 14.

De même pour notre wagon qui fera partie des groupes train et wagon en ligne 26.

Il ne nous reste plus qu’à animer notre locomotive et notre wagon pour qu’ils retournent automatiquement à leur place en cas de glisser-déposer. C’est l’objet des lignes 16 à 20. Lorsque l’on dépose le train, la fonction dragstop est exécutée. Grâce à animateLayerGroup, nous allons pouvoir déplacer nos groupes. La fonction prend comme argument : le groupe à déplacer : 'loco', l’action à réaliser sur le groupe : ici, x:100, on veut que x varie de la valeur actuelle à la valeur 100 et le temps pour effectuer l’action, ici 500 ms. On répète l’opération pour le wagon.

Et voilà notre train retournera automatiquement à sa place en cas de glisser-déposer, il est possible qu’il y ait un léger décalage entre la locomotive et le wagon lors de ce déplacement, car les deux objets sont gérés par deux animations différentes.

illustration

Conclusion

Dans cet article, nous avons vu avec quelle facilité on peut manipuler le Canvas HTML à l’aide de la librairie jCanvas. Nous n’avons pas pu aborder toutes les fonctionnalités de jCanvas, mais les fonctionnalités les plus importantes ont été couvertes. À vous maintenant d’enrichir votre site web de magnifiques Canvas à l’aide de la librairie jCanvas...

Références

[1] Adresse du site officiel jCanvas : https://projects.calebevans.me/jcanvas/

[2] Adresse du site officiel jQuery : https://jquery.com/

[3] Pack d’images utilisé pour cet article : https://www.vecteezy.com/vector-art/152765-caboose-free-vector-pack




Article rédigé par

Par le(s) même(s) auteur(s)

Contrôler vos modèles LEGO Powered Up au Nunchuk à l'aide de votre Arduino

Magazine
Marque
Hackable
Numéro
33
Mois de parution
avril 2020
Spécialité(s)
Résumé

Dans cet article, nous allons voir comment piloter un robot LEGO Powered Up à l’aide d’un Nintendo Nunchuk, grâce à un Arduino. Nous allons installer les librairies nécessaires pour pouvoir piloter notre modèle Powered Up et accéder aux informations du Nunchuk. Nous développerons ensuite notre programme de contrôle en C.

Auto-héberger son agenda avec Baïkal

Magazine
Marque
Linux Pratique
HS n°
Numéro
46
Mois de parution
octobre 2019
Spécialité(s)
Résumé

Il est très utile de pouvoir avoir un calendrier partagé accessible à tout moment sur toute sorte de clients : PC, tablette, téléphone... La solution la plus simple est souvent d’utiliser Google Calendar. Dans cet article, nous allons voir qu’il n’est pas si compliqué d’héberger soi-même un calendrier partagé à l’aide de Baïkal. Nous aborderons l’installation et la configuration de Baïkal. Pour finir, nous découvrirons la configuration des clients Thunderbird, Android et iOS.

Contrôler vos modèles Lego PoweredUp au Joypad à l'aide de votre Raspberry Pi

Magazine
Marque
Hackable
Numéro
30
Mois de parution
juillet 2019
Spécialité(s)
Résumé

Dans cet article, nous allons voir comment piloter un robot Lego PoweredUp à l’aide d’un JoyPad, grâce à un Raspberry Pi. Nous allons installer tout le nécessaire sur notre Raspberry Pi pour pouvoir piloter notre modèle Lego PoweredUp. Nous utiliserons NodeJS, donc le langage JavaScript, pour piloter notre modèle Lego.

Les derniers articles Premiums

Les derniers articles Premium

Sécurisez vos applications web : comment Symfony vous protège des menaces courantes

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Les frameworks tels que Symfony ont bouleversé le développement web en apportant une structure solide et des outils performants. Malgré ces qualités, nous pouvons découvrir d’innombrables vulnérabilités. Cet article met le doigt sur les failles de sécurité les plus fréquentes qui affectent même les environnements les plus robustes. De l’injection de requêtes à distance à l’exécution de scripts malveillants, découvrez comment ces failles peuvent mettre en péril vos applications et, surtout, comment vous en prémunir.

Bash des temps modernes

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Les scripts Shell, et Bash spécifiquement, demeurent un standard, de facto, de notre industrie. Ils forment un composant primordial de toute distribution Linux, mais c’est aussi un outil de prédilection pour implémenter de nombreuses tâches d’automatisation, en particulier dans le « Cloud », par eux-mêmes ou conjointement à des solutions telles que Ansible. Pour toutes ces raisons et bien d’autres encore, savoir les concevoir de manière robuste et idempotente est crucial.

Présentation de Kafka Connect

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

Un cluster Apache Kafka est déjà, à lui seul, une puissante infrastructure pour faire de l’event streaming… Et si nous pouvions, d’un coup de baguette magique, lui permettre de consommer des informations issues de systèmes de données plus traditionnels, tels que les bases de données ? C’est là qu’intervient Kafka Connect, un autre composant de l’écosystème du projet.

Le combo gagnant de la virtualisation : QEMU et KVM

Magazine
Marque
Contenu Premium
Spécialité(s)
Résumé

C’est un fait : la virtualisation est partout ! Que ce soit pour la flexibilité des systèmes ou bien leur sécurité, l’adoption de la virtualisation augmente dans toutes les organisations depuis des années. Dans cet article, nous allons nous focaliser sur deux technologies : QEMU et KVM. En combinant les deux, il est possible de créer des environnements de virtualisation très robustes.

Les listes de lecture

9 article(s) - ajoutée le 01/07/2020
Vous désirez apprendre le langage Python, mais ne savez pas trop par où commencer ? Cette liste de lecture vous permettra de faire vos premiers pas en découvrant l'écosystème de Python et en écrivant de petits scripts.
11 article(s) - ajoutée le 01/07/2020
La base de tout programme effectuant une tâche un tant soit peu complexe est un algorithme, une méthode permettant de manipuler des données pour obtenir un résultat attendu. Dans cette liste, vous pourrez découvrir quelques spécimens d'algorithmes.
10 article(s) - ajoutée le 01/07/2020
À quoi bon se targuer de posséder des pétaoctets de données si l'on est incapable d'analyser ces dernières ? Cette liste vous aidera à "faire parler" vos données.
Voir les 125 listes de lecture

Abonnez-vous maintenant

et profitez de tous les contenus en illimité

Je découvre les offres

Déjà abonné ? Connectez-vous