BorderImage QML Type

Dessine une bordure à partir d'une image. En savoir plus...

• 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 permet de créer des bordures à partir d'images en redimensionnant ou en mosaïquant des parties de chaque image.

Un 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 redimensionnée, les zones de l'image source sont redimensionnées ou mises en mosaïque pour créer l'image de bordure affichée de la manière suivante :

• Les coins (zones 1, 3, 7 et 9) ne sont pas redimensionnés.
• Les régions 2 et 8 sont redimensionnées en fonction de la propriété ` horizontalTileMode`.
• Les régions 4 et 6 sont redimensionnées conformément à verticalTileMode.
• Le centre (zone 5) est redimensionné selon les règles définies à la fois par 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 à partir de chaque bord de l'image source à utiliser comme bordure.

Exemple d’utilisation

Les exemples suivants montrent les effets des différents modes sur une image. Des lignes de repère sont superposées à l’image pour indiquer les différentes régions de l’image, comme décrit ci-dessus.

À titre de comparaison, une image non redimensionnée est affichée à l’aide d’un simple élément Image. Ici, nous avons superposé des lignes pour montrer comment nous souhaitons la découper avec BorderImage :

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

Mais lorsqu’on utilise BorderImage pour afficher l’image, la propriété « border » sert à déterminer les parties de l’image qui se trouveront à l’intérieur des zones d’angle non redimensionnées, et celles qui seront étirées horizontalement et verticalement. Vous pouvez alors lui attribuer une taille supérieure à celle de l’image d’origine. La propriété ` horizontalTileMode ` étant définie sur ` BorderImage.Stretch`, les parties de l’image situées dans les zones 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 zones 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 encore, une image de bordure (BorderImage) de grande taille 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 disposées en mosaïque 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 situées dans les régions 4 et 6 sont disposées en mosaïque 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 certains cas, la largeur des zones 2 et 8 peut ne pas être un multiple exact de la largeur des zones correspondantes de l’image source. De même, la hauteur des zones 4 et 6 peut ne pas être un multiple exact de la hauteur des zones correspondantes. Si vous utilisez le mode « BorderImage.Round », le système choisira un nombre entier de tuiles et les réduira pour les adapter à l’espace disponible :

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 « BorderImage » dans la section « Exemples d’Qt Quick – Éléments d’image » montre comment utiliser un BorderImage pour simuler un effet d’ombre sur un élément rectangulaire.

Chargement de l'image

L’image source peut ne pas se charger instantanément, selon son emplacement d’origine. La progression du chargement peut être suivie à 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 présentes sur le système de fichiers local doivent être chargées de manière asynchrone dans un thread distinct. 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. Il est utile de définir la propriété « asynchronous » sur « true » lorsque le maintien d'une interface utilisateur réactive est plus important que l'affichage immédiat des images.

Notez que cette propriété ne s'applique qu'aux 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 illustré ci-dessous :

Chaque ligne de bordure (gauche, droite, haut et bas) spécifie un décalage en pixels par rapport au bord correspondant 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'un « .sci file ».

cache : bool

Indique si l'image doit être mise en cache. La valeur par défaut est « true ». Il est utile de définir « cache » sur « false » lorsque l'on traite des images volumineuses, afin de s'assurer qu'elles ne soient pas mises en cache au détriment des petites images des « éléments d'interface utilisateur ».

currentFrame correspond à l'image actuellement visible. La valeur par défaut est 0. Vous pouvez lui attribuer une valeur comprise entre 0 et frameCount - 1 pour afficher une autre image, si celle-ci en contient plusieurs.

frameCount correspond au nombre d'images composant l'image. La plupart des images ne comportent qu'une seule image.

Cette propriété définit la manière dont les parties centrales de l'image de bordure sont répétées ou étirées.

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

mirror : bool

Cette propriété détermine si l'image doit être inversée horizontalement (ce qui revient à afficher une image en 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'a été chargé) à 1,0 (chargement terminé).

Voir également 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 s'effectue 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 défini sur false (valeur par défaut), l’ancienne image est immédiatement supprimée et le composant est vidé pendant le chargement de la nouvelle image. S’il est défini sur 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 lorsque le chargement de la nouvelle image prend beaucoup de temps. Cela implique toutefois une consommation supplémentaire de mémoire due à la mise en mémoire tampon double pendant le chargement de la nouvelle image.

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

smooth : bool

Cette propriété détermine si l'image fait l'objet d'un filtrage lisse lors de sa mise à l'échelle ou de sa transformation. Le filtrage lisse offre une meilleure qualité visuelle, mais peut ralentir le système sur certains matériels. Si l'image est affichée à sa taille d'origine, cette propriété n'a aucun effet sur l'affichage ni sur les performances.

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

source : url

Cette propriété contient l'URL renvoyant vers l'image source.

BorderImage Elle peut prendre en charge 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 textuel spécifique à QML qui intègre directement dans le fichier les valeurs des bordures, l’image source et les règles de mosaïquage. Lorsque vous utilisez un fichier .sci, l’ BorderImage e lit les informations relatives aux bordures directement dans le fichier ; il n’est donc pas nécessaire de spécifier les propriétés des bordures dans le code QML.

Le fichier .sci suivant définit des marges de 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 du chargement de l'image. Elle peut prendre l'une des valeurs suivantes :

Voir aussi progress.