Éditeur 9 Patch - Un outil WYSIWYG en ligne pour créer des images 9 patch
L'éditeur 9 Patch est un outil WYSIWYG en ligne similaire à celui inclus dans Android Studio. Cet outil vous permet de créer des images bitmap qui se redimensionnent automatiquement pour s'adapter au contenu de la vue et à la taille de l'écran. Vous pouvez redimensionner des parties sélectionnées de l'image horizontalement ou verticalement en fonction des indicateurs dessinés dans l'image.
Comment utiliser
Suivez ces étapes pour créer un graphique NinePatch en utilisant l'éditeur 9 Patch. Vous aurez besoin d'une image à partir de laquelle vous souhaitez créer une image NinePatch.
- Cliquez sur le bouton Sélectionner l'image ou faites glisser l'image dans l'éditeur à partir de laquelle vous souhaitez créer une image NinePatch.
Dans l'espace de travail qui s'ouvre, le panneau central est votre zone de dessin, où vous pouvez éditer les lignes pour les zones extensibles et la zone de contenu. Le panneau de droite est la zone d'aperçu, où vous pouvez prévisualiser votre graphique lorsqu'il est étiré.
- Changez le nom de l'image pour votre image NinePatch. Votre image sera enregistrée avec l'extension de fichier .9.png.
- Cliquez à l'intérieur du périmètre de 1 pixel pour dessiner les lignes qui définissent les zones extensibles et (facultatif) la zone de contenu.
- Lorsque vous avez terminé, cliquez sur le bouton Enregistrer l'image pour enregistrer vos modifications.
Figure 1. Éditeur 9 Patch affichant une image NinePatch.
Pour vous assurer que vos graphiques NinePatch se réduisent correctement, vérifiez que toutes les zones extensibles mesurent au moins 2x2 pixels. Sinon, ces zones peuvent disparaître lorsqu'elles sont réduites. Pour éviter l'interpolation lors du redimensionnement qui pourrait modifier la couleur aux limites, fournissez 1 pixel d'espace de sécurité supplémentaire dans les graphiques avant et après les zones extensibles.
Remarque : Un fichier PNG normal (*.png) est chargé avec une bordure vide de 1 pixel ajoutée autour de l'image. Vous pouvez dessiner les zones extensibles et la zone de contenu à l'intérieur de la bordure. Un fichier NinePatch précédemment enregistré (*.9.png) est chargé tel quel, sans zone de dessin ajoutée car il existe déjà.
Contrôles optionnels
- Zoom: Ajustez le niveau de zoom du graphique dans la zone de dessin.
- Échelle de patch: Ajustez l'échelle des images dans la zone d'aperçu.
- Afficher le verrou: Visualisez la zone non dessinable du graphique au survol de la souris.
- Afficher les patches: Prévisualisez les patches extensibles roses dans la zone de dessin. Le rose indique un patch extensible, comme montré dans la figure 2.
- Afficher le contenu: Mettez en surbrillance la zone de contenu dans les images d'aperçu. Le violet indique la zone où le contenu est autorisé, comme montré dans la figure 2.
- Afficher les mauvais patches: Ajoute une bordure rouge autour des zones de patch qui peuvent produire des artefacts dans le graphique lorsqu'elles sont étirées, comme montré dans la figure 2. Si vous éliminez tous les mauvais patches, vous maintiendrez la cohérence visuelle de votre image étirée.
Figure 2. Une image NinePatch dans l'éditeur montrant le contenu, les patches et les mauvais patches.