BorderImage QML Type

Peint une bordure sur la base d'une image. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : enumeration
• mirror : bool
• progress : real
• retainWhileLoading : bool (since 6.8)
• smooth : bool
• source : url
• sourceSize : size
• status : enumeration
• verticalTileMode : enumeration

Description détaillée

Le type BorderImage est utilisé pour créer des bordures à partir d'images en mettant à l'échelle ou en superposant des parties de chaque image.

Une BorderImage divise une image source, spécifiée à l'aide de la propriété source, en 9 régions, comme illustré ci-dessous :

Lorsque l'image est mise à l'échelle, les régions de l'image source sont mises à l'échelle ou empilées pour créer l'image de bordure affichée de la manière suivante :

• Les coins (régions 1, 3, 7 et 9) ne sont pas mis à l'échelle du tout.
• Les régions 2 et 8 sont mises à l'échelle conformément à horizontalTileMode.
• Les régions 4 et 6 sont mises à l'échelle conformément à verticalTileMode.
• Le milieu (région 5) est mis à l'échelle conformément à horizontalTileMode et verticalTileMode.

Les régions de l'image sont définies à l'aide du groupe de propriétés border, qui décrit la distance entre chaque bord de l'image source à utiliser comme bordure.

Exemples d'utilisation

Les exemples suivants montrent les effets des différents modes sur une image. Des lignes de guidage sont superposées à l'image pour montrer les différentes régions de l'image comme décrit ci-dessus.

À titre de comparaison, une image non mise à l'échelle est affichée à l'aide d'un simple élément Image. Ici, des lignes sont superposées pour montrer comment nous aimerions la décomposer avec BorderImage :

Image {
    source: "pics/borderframe.png"
    anchors.centerIn: parent
}

Mais lorsqu'une BorderImage est utilisée pour afficher l'image, la propriété border est utilisée pour déterminer les parties de l'image qui se trouveront à l'intérieur des zones d'angle non mises à l'échelle et les parties qui seront étirées horizontalement et verticalement. Vous pouvez ensuite lui donner une taille supérieure à celle de l'image originale. La propriété horizontalTileMode étant définie sur BorderImage.Stretch, les parties de l'image situées dans les régions 2 et 8 sont étirées horizontalement. La propriété verticalTileMode étant définie sur BorderImage.Stretch, les parties de l'image situées dans les régions 4 et 6 sont étirées verticalement :

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

Une fois de plus, une grande BorderImage est utilisée pour afficher l'image. La propriété horizontalTileMode étant définie sur BorderImage.Repeat, les parties de l'image situées dans les régions 2 et 8 sont empilées de manière à remplir l'espace en haut et en bas de l'élément. De même, la propriété verticalTileMode est définie sur BorderImage.Repeat, de sorte que les parties de l'image dans les régions 4 et 6 sont regroupées pour remplir l'espace à gauche et à droite de l'élément :

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

Dans certaines situations, la largeur des régions 2 et 8 peut ne pas être un multiple exact de la largeur des régions correspondantes dans l'image source. De même, la hauteur des régions 4 et 6 peut ne pas être un multiple exact de la hauteur des régions correspondantes. Si vous utilisez le mode BorderImage.Round, il choisira un nombre entier de tuiles et les réduira pour les adapter :

BorderImage {
    anchors { fill: parent; margins: 6 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Round
    verticalTileMode: BorderImage.Round
    source: "pics/borderframe.png"
}

L'exemple de l'image de bordure dans Qt Quick Examples - Image Elements montre comment une image de bordure peut être utilisée pour simuler un effet d'ombre sur un élément rectangulaire.

Chargement de l'image

L'image source peut ne pas être chargée instantanément, en fonction de son emplacement d'origine. La progression du chargement peut être surveillée à l'aide de la propriété progress.

Voir également Image et AnimatedImage.

Documentation sur les propriétés

asynchronous : bool

Spécifie que les images du système de fichiers local doivent être chargées de manière asynchrone dans un thread séparé. La valeur par défaut est false, ce qui entraîne le blocage du thread de l'interface utilisateur pendant le chargement de l'image. La valeur true de asynchronous est utile lorsque le maintien d'une interface utilisateur réactive est plus souhaitable que la visibilité immédiate des images.

Notez que cette propriété n'est valable que pour les images lues à partir du système de fichiers local. Les images chargées via une ressource réseau (par exemple HTTP) sont toujours chargées de manière asynchrone.

border group

Les 4 lignes de bordure (2 horizontales et 2 verticales) divisent l'image en 9 sections, comme indiqué ci-dessous :

Chaque ligne de bordure (gauche, droite, haut et bas) spécifie un décalage en pixels par rapport au bord respectif de l'image source. Par défaut, chaque ligne de bordure a une valeur de 0.

Par exemple, la définition suivante place la ligne inférieure à 10 pixels du bas de l'image :

BorderImage {
    border.bottom: 10
    // ...
}

Les lignes de bordure peuvent également être spécifiées à l'aide d'une adresse .sci file.

cache : bool

Indique si l'image doit être mise en cache. La valeur par défaut est true. La valeur false de cache est utile pour les images de grande taille, afin de s'assurer qu'elles ne sont pas mises en cache au détriment des petites images des éléments d'interface utilisateur.

currentFrame est le cadre actuellement visible. La valeur par défaut est 0. Vous pouvez lui donner une valeur comprise entre 0 et frameCount - 1 pour afficher un cadre différent, si l'image contient plusieurs cadres.

frameCount est le nombre d'images dans l'image. La plupart des images n'ont qu'un seul cadre.

Cette propriété décrit comment répéter ou étirer les parties centrales de l'image de la bordure.

Le mode de mosaïque par défaut pour chaque propriété est BorderImage.Stretch.

mirror : bool

Cette propriété indique si l'image doit être inversée horizontalement (affichage d'une image miroir).

La valeur par défaut est false.

progress : real [read-only]

Cette propriété indique la progression du chargement de l'image, de 0.0 (rien n'est chargé) à 1.0 (terminé).

Voir aussi status.

retainWhileLoading : bool [since 6.8]

Cette propriété définit le comportement lorsque la propriété source est modifiée et que le chargement se fait de manière asynchrone. C'est le cas lorsque la propriété asynchronous est définie sur true, ou si l'image ne se trouve pas sur le système de fichiers local.

Si retainWhileLoading est false (valeur par défaut), l'ancienne image est immédiatement supprimée et le composant est effacé pendant le chargement de la nouvelle image. Si la valeur est true, l'ancienne image est conservée et reste visible jusqu'à ce que la nouvelle soit prête.

L'activation de cette propriété permet d'éviter le scintillement dans les cas où le chargement de la nouvelle image prend beaucoup de temps. Elle a pour prix une utilisation supplémentaire de la mémoire pour la double mise en mémoire tampon pendant le chargement de la nouvelle image.

Cette propriété a été introduite dans Qt 6.8.

smooth : bool

Cette propriété indique si l'image est filtrée en douceur lorsqu'elle est mise à l'échelle ou transformée. Le filtrage lisse donne une meilleure qualité visuelle, mais il peut être plus lent sur certains matériels. Si l'image est affichée à sa taille naturelle, cette propriété n'a aucun effet sur l'aspect visuel ou les performances.

Par défaut, cette propriété est définie sur true.

source : url

Cette propriété contient l'URL qui fait référence à l'image source.

BorderImage peut gérer n'importe quel format d'image pris en charge par Qt, chargé à partir de n'importe quel schéma d'URL pris en charge par Qt.

Cette propriété peut également faire référence à un fichier .sci - un format texte spécifique à QML qui intègre les valeurs de bordure, l'image source et les règles de tuiles directement dans le fichier. Lors de l'utilisation d'un fichier .sci, BorderImage lit les informations relatives aux bordures à partir du fichier lui-même, de sorte qu'il n'est pas nécessaire de spécifier les propriétés des bordures en QML.

Le fichier .sci suivant définit les bordures à 10 de chaque côté pour l'image picture.png:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: "picture.png"

L'URL peut être absolue ou relative à l'URL du composant.

Voir également QQuickImageProvider.

sourceSize : size [read-only]

Cette propriété contient la largeur et la hauteur réelles de l'image chargée.

Dans BorderImage, cette propriété est en lecture seule.

Voir également Image::sourceSize.

status : enumeration [read-only]

Cette propriété décrit l'état de chargement de l'image. Elle peut être l'une des suivantes

Voir aussi progress.