Image

Le composant image vous permet d'afficher des images dans votre application.

Vue d'ensemble

Le composant Image vous permet d'afficher des images dans votre application et s'associe parfaitement avec les composants basés sur l'image comme l'appareil photo, la photothèque, l'outil de reconnaissance d'images et MediaDB.

Paramétrer l'image

Il existe plusieurs façons d'afficher une image dans votre application :

Téléchargez une photo sur votre application
Fournir un lien vers l'image
Prenez une photo avec le composant Appareil photo

Les blocs ci-dessus ouvrent l'appareil photo de votre téléphone et permettent de régler le composant Image sur la photo que vous avez prise.

Modifier la taille de l'image

Vous pouvez définir la hauteur de l'image à l'aide de la propriété "height" et sa largeur à l'aide de la propriété "width".

Hauteur

Fill Container - L'image remplit l'écran entier verticalement
Fill contents- La hauteur de l'image change en fonction du contenu qu'elle contient
Relative Size - L'image remplit le pourcentage spécifié de l'écran
Absolute Size - Taille de l'image en fonction d'un nombre déterminé de pixels

Largeur

Fill Container- L'image remplit tout l'écran horizontalement
Fill Contents - La largeur de l'image change pour s'adapter au contenu qu'elle contient
Relative Size- L'image remplit le pourcentage spécifié de l'écran
Absolute Size - Taille de l'image à un nombre de pixels spécifié

Redimensionnement de l'image

Avec la propriété Resize Mode, vous pouvez faire ce qui suit :

Cover: Redimensionne l'image à sa hauteur ou à sa largeur maximale sans modifier la qualité de l'image.
Contain : Redimensionner l'image pour l'adapter à la zone sans en modifier la qualité
Stretch: La hauteur de l'image change pour remplir la composante de l'image dans le sens de la longueur
Repeat: Répétition de l'image à sa qualité d'origine dans la zone du composant de l'image
Center : Positionne l'image au milieu de l'élément d'image

Style de l'image

Vous pouvez styliser l'image avec les propriétés suivantes :

Border (Bordure)
- Width: Indiquez la largeur que vous souhaitez pour le contour de l'image
- Color : choisissez une couleur pour la bordure de l'image
- Radius: Indiquez le rayon que vous souhaitez pour les bords de la bordure de l'image

Ajouter un espacement

Vous pouvez modifier l'espacement et le positionnement de l'image avec les propriétés Marge et Rembourrage.

Margin (Marge)

Vous pouvez spécifier l'espace que vous souhaitez entre les bords de l'image et l'écran en utilisant des valeurs en pixels ou en pourcentage.

Padding (Remplissage)

Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu de l'image en utilisant une valeur en pixel ou en pourcentage.

Événements

Cliquez sur

Propriétés

Dimensions calculées

Les blocs Computed Height (Hauteur calculée) et Computed Width (Largeur calculée) renvoient les dimensions de l'image à l'écran, après qu'elle ait été rendue à l'écran. La valeur renvoyée est un nombre entier, représentant la taille de l'image en pixels.

Hauteur

Les blocs "set" et "get height" fonctionnent avec la propriété "Height" du composant de l'image. Les valeurs d'entrée acceptables sont .

Number of Pixels (Nombre de pixels)
Percentage Height (Pourcentage Hauteur)
Fit Contents (Contenu Adapté)
Fill container (Remplir le conteneur)

Photo

Les blocs "set" et "get" fonctionnent avec les propriétés de l'image de la composante image. Les images peuvent être téléchargées en tant qu'actifs locaux ou spécifiées en tant qu'URL

Mode de redimensionnement

Les blocs du mode "Définir et obtenir" fonctionnent avec la façon dont l'image est mise à l'échelle dans le composant de l'image. Les valeurs acceptables sont :