# Dessin

> Découvrez comment ajouter une dimension créative à vos applications avec le module de dessin de PandaSuite. Apprenez à personnaliser les boutons, paramètres, et interactions pour une expérience utilisateur unique, et à intégrer des zones de dessin libre à vos projets.

https://docs.pandasuite.com/fr/essentials/components/drawing/

**Ajoutez une dimension créative à vos applications avec ce module de dessin. Que ce soit pour des applications éducatives destinées aux enfants ou pour des fonctionnalités avancées de prise de notes, il vous offre une personnalisation complète. Vous pouvez définir vos propres boutons, paramètres et interactions pour une expérience utilisateur unique.**

[Image : Aperçu smartphone du module de dessin : un panda à habiller et ses boutons Taille, couleurs, Gomme, Crayon, Annuler, Refaire et Réinitialiser]

## Ajouter une zone de dessin libre

Le module de dessin n'est pas inclus par défaut dans les composants de PandaSuite. Pour l'utiliser, vous devez le télécharger séparément.

Pour ajouter une zone de dessin libre :

1. **Téléchargement** : Commencez par télécharger le fichier [drawingboard.zip](https://github.com/pandasuite/html5-samples/releases/download/v1.0.16/drawingboard.zip). Il n'est pas nécessaire de le décompresser.
2. **Ouverture de PandaSuite Studio** : Lancez PandaSuite Studio et ajoutez un [composant Web](https://docs.pandasuite.com/fr/essentials/components/web/) à l'emplacement souhaité pour votre zone de dessin.
3. **Configuration du composant** : Dans les propriétés du composant, sélectionnez le mode **Hors ligne** et insérez le fichier `drawingboard.zip`.
4. Affichage de la zone de dessin : Double-cliquez sur le composant dans votre espace de travail pour activer la zone de dessin libre.

## Propriétés du module de dessin

Dans le panneau des propriétés, situé sur la droite, vous trouverez les options suivantes pour personnaliser votre module de dessin :

- **Couleur du crayon**: choisissez la couleur en format hexadécimal.
- **Taille du crayon** : ajustez la taille du crayon en pixels.
- **Couleur de fond** : définissez la couleur de fond en format hexadécimal.
- **Stockage local** : activez ou désactivez le stockage local de vos dessins.

## Personnalisez les contrôles

Le module offre une grande flexibilité pour créer des contrôles personnalisés via des déclencheurs et des actions :

1. Sélectionnez un déclencheur : par exemple, un bouton.
2. Choisissez l'action **Agir sur un composant** et sélectionnez votre composant Web.

**Actions disponibles :**

- **Changement de couleur**: Créez une palette personnalisée.
- **Changement de taille** : Ajustez la taille du crayon.
- **Mode Gomme** : Effacez facilement les erreurs.
- **Mode Crayon**: Alternez entre le crayon et la gomme.
- **Réinitialiser**: Effacez les sauvegardes de vos dessins.
- **Annuler** : Supprimez le dernier trait.
- **Refaire** : Restaurez le dernier trait supprimé.
- **Effacer le Stockage Web** : Nettoyez le stockage local.
- **Réinitialiser** : Commencez un nouveau dessin.

**Déclencheurs disponibles :**

- **Commencement du dessin**
- **Arrêt du dessin**

En suivant ces étapes et en exploitant les nombreuses fonctionnalités du module de dessin de PandaSuite, vous pouvez créer une expérience utilisateur riche et interactive pour vos applications. Bonne création !