Le composant Zoomable

Le composant Zoomable permet de rendre n'importe quel contenu zoomable. Il offre une interaction enrichie en permettant aux utilisateurs de se concentrer sur des détails spécifiques et d'interagir avec différents niveaux de zoom.

Voici plusieurs cas d'utilisation du composant Zoomable : 

• Une carte touristique d'une ville : les utilisateurs peuvent zoomer sur différents quartiers pour découvrir des points d'intérêt, comme des musées, des restaurants ou des parcs. Lorsqu'un utilisateur zoome sur un point d'intérêt, une fenêtre contextuelle apparaît, offrant des informations, des photos, et même des liens pour plus de détails.
• Catalogue de produits interactif : les clients peuvent zoomer sur les produits pour voir les détails, les textures et les caractéristiques de chaque article. En zoomant sur un produit spécifique, des options supplémentaires s'affichent, telles que la sélection de la couleur, la taille ou l'ajout au panier.
• Un jeu "Cherche et trouve" : les utilisateurs doivent zoomer dans l'image pour retrouver des objets ou personnages bien cachés à l'intérieur. Lorsque l'objet apparaît, celui-ci se débloque automatiquement sur la liste des objets à retrouver.

Propriétés du composant Zoomable

Sélectionnez le composant Zoomable pour accéder à ses propriétés :

• Zoom minimum / maximum : définissez les limites de zoom pour contrôler jusqu'où les utilisateurs peuvent zoomer ou dézoomer.
• Point de focalisation du zoom : cette propriété est utile lorsque les utilisateurs n'interagissent pas avec le contenu zoomable. C'est un point qui va de 0, 0 (point en haut à gauche) à 1,1 (en bas à droite). Il est relatif au contenu affiché à ce moment-là.
• Zoom utilisateur : choisissez si les utilisateurs peuvent zoomer librement dans le contenu.
• Défilement utilisateur : choisissez si les utilisateurs peuvent se déplacer librement dans le contenu.
• Exclusion d'objets : excluez certains objets du zoom afin qu'ils conservent une taille et position constantes.

Édition et création de marqueurs

Pour éditer le contenu zoomable, double-cliquez sur la zone du composant. Sur la gauche, vous pouvez personnaliser les contrôles pour faciliter la navigation, en faisant apparaître le Slider ou la Minimap.

Utilisez des marqueurs pour identifier des positions et des zones de zoom spécifiques. Vous avez le choix entre créer un marqueur de zoom ou un marqueur de visibilité.

Pour ajouter un marqueur, cliquez sur le bouton + dans le menu dédié. Par défaut, un marqueur de zoom se crée. Si vous voulez créer un marqueur de visibilité, cliquez sur la flèche déroulante. Les marqueurs se créent automatiquement en fonction de là où vous vous situez. Vous pouvez modifier ces propriétés sur le panneau de droite. 

Les propriétés des marqueurs de zoom sont : 

• le niveau de zoom
• l'option de centrage automatique

Les propriétés des marqueurs de visibilité sont :

• la cible
• le niveau de visibilité (en pourcentage)
• le type : Entrant ou Sortant

Déclencher une action en fonction d'une position de zoom

Vous pouvez configurer des actions qui se déclenchent à des niveaux de zoom spécifiques. Par exemple, affichez des informations supplémentaires ou lancez une animation lorsque l'utilisateur atteint un certain niveau de zoom.

Ici dans l'exemple ci-dessous, l'objectif est de débloquer l'objet dans la liste des objets à retrouver.