RectangularShadow QML Type

Crée un rectangle adouci, adapté par exemple aux effets d'ombre et de lueur. En savoir plus...

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

Propriétés

• antialiasing : bool
• blur : real
• bottomLeftRadius : real (since 6.11)
• bottomRightRadius : real (since 6.11)
• cached : bool
• color : color
• material : item
• offset : vector2d
• radius : real
• spread : real
• topLeftRadius : real (since 6.11)
• topRightRadius : real (since 6.11)

Description détaillée

RectangularShadow est un rectangle arrondi auquel un effet de flou a été appliqué. Les performances de RectangularShadow sont bien supérieures à celles d'un effet général permettant de créer une ombre ou une lueur floue pour un élément de n'importe quelle forme.

L'exemple suivant montre comment ajouter une ombre à un élément « Rectangle » :

import QtQuick
import QtQuick.Effects

...
RectangularShadow {
    anchors.fill: myRectangle
    offset.x: -10
    offset.y: -5
    radius: myRectangle.radius
    blur: 30
    spread: 10
    color: Qt.darker(myRectangle.color, 1.6)
}
Rectangle {
    id: myRectangle
    anchors.centerIn: parent
    width: 200
    height: 100
    radius: 50
    color: "#c0d0f0"
}

L'API de RectangularShadow est similaire à celle de la propriété CSS `box-shadow`, avec des valeurs de couleur, de décalage, d'étalement et de flou. De plus, l'API de RectangularShadow comprend :

• real radius: Contrôle le rayon d’arrondi appliqué aux coins du rectangle. Contrairement à la propriété CSS `box-shadow`, qui hérite du rayon de l’élément parent, RectangularShadow nécessite que l’utilisateur le définisse explicitement. Cela vous permet d’utiliser différents rayons et de déplacer RectangularShadow indépendamment de son élément parent.
• bool cached: Permet de mettre en cache la texture de l’ombre floue. Cela augmente l’utilisation de la mémoire tout en améliorant potentiellement les performances de rendu, en particulier avec des ombres plus grandes qui ne changent pas de manière dynamique.
• item material: Contient l’élément ` ` de RectangularShadow pour une utilisation avancée. Cela permet, par exemple, d’étendre l’effet à l’aide d’un shader personnalisé. ShaderEffect

Le rendu obtenu correspond également à celui de la propriété CSS `box-shadow`, à quelques différences notables près. Ces différences ont pour but d’optimiser au maximum les performances de RectangularShadow.

• Le flou est calculé mathématiquement dans le shader plutôt que d’utiliser un flou gaussien, que les implémentations CSS `box-shadow` utilisent souvent. Cela donne à l’ombre un aspect légèrement différent, notamment avec des valeurs de flou plus élevées.
• Depuis Qt 6.11, RectangularShadow prend également en charge des valeurs de rayon de coin individuelles. Lorsque cela n’est pas nécessaire, pour optimiser les performances, ne définissez que l’ radius.

Voici un tableau accompagné de captures d’écran permettant de comparer le rendu de RectangularShadow et de la propriété CSS `box-shadow` dans le navigateur Chrome. L’élément situé à l’extrême droite correspond à RectangularShadow avec un flou multiplié par ` 1.2 ` (soit ` 24`, ` 48`, ` 48`) pour une correspondance plus proche.

RectangularShadow étend la taille de l'ombre d'une valeur exacte en fonction de la valeur du flou, tandis que d'autres ombres (notamment la propriété CSS `box-shadow`) appliquent un multiplicateur à la taille. La taille de l'élément ombré à l'intérieur d'une RectangularShadow est :

width = rectangularShadow.width + 2 * blur +  2 * spread
height = rectangularShadow.height + 2 * blur + 2 * spread

Par exemple, la taille de l'élément d'ombre du code ci-dessous est de 280 × 180 pixels. Les valeurs de rayon ou de décalage n'ont aucune incidence sur la taille de l'élément d'ombre.

RectangularShadow {
    width: 200
    height: 100
    blur: 30
    spread: 10
    radius: 20
}

Documentation des propriétés

antialiasing : bool

Permet de déterminer si l'ombre doit utiliser l'anticrénelage ou non. Lorsque cette option est définie sur « true », un anticrénelage à un pixel est utilisé même si l'option « blur » est définie sur « 0 ».

La valeur par défaut est « true ».

blur : real

Cette propriété définit le nombre de pixels situés en dehors de la zone de l'élément qui sont couverts par l'ombre.

La valeur est comprise entre 0,0 (pas de flou) et inf (flou infini). La valeur par défaut est 10.0.

bottomLeftRadius : real [since 6.11]

Cette propriété définit le rayon utilisé pour dessiner le coin inférieur gauche.

Si bottomLeftRadius n'est pas défini, la valeur « radius » sera utilisée à la place. Si bottomLeftRadius est égal à zéro, le coin sera pointu.

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

Voir également radius, topLeftRadius, topRightRadius et bottomRightRadius.

bottomRightRadius : real [since 6.11]

Cette propriété définit le rayon utilisé pour dessiner le coin inférieur droit.

Si `bottomRightRadius` n'est pas défini, la valeur ` radius ` sera utilisée à la place. Si `bottomRightRadius` est égal à zéro, le coin sera pointu.

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

Voir également radius, topLeftRadius, topRightRadius et bottomLeftRadius.

cached : bool

Cette propriété permet de mettre en cache les pixels de sortie de l'effet afin d'améliorer les performances de rendu.

À chaque modification des propriétés de l’effet, les pixels du cache doivent être mis à jour. La consommation de mémoire augmente, car un tampon de mémoire supplémentaire est nécessaire pour stocker le résultat de l’effet.

Il est recommandé de désactiver le cache lorsque la source ou les propriétés de l’effet sont animées.

La valeur par défaut est « false ».

color : color

Cette propriété définit la valeur de couleur RGBA utilisée pour l'ombre.

La valeur par défaut est Qt.rgba(0.0, 0.0, 0.0, 1.0) (noir).

material : item

Cette propriété contient l'élément « ShaderEffect » de l'ombre. Vous pouvez utiliser cette propriété pour visualiser l'étendue de l'ombre, car l'élément d'effet a souvent une position et une taille différentes de celles de l'élément « RectangularShadow », en raison des paramètres blur, offset et spread.

Le matériau peut également être remplacé par un matériau personnalisé. Le matériau par défaut, lorsque l’on n’utilise pas de rayon de coin individuel, est un « ShaderEffect » avec l’ fragmentShader s suivantes :

#version 440

layout(location = 0) in vec2 texCoord;
layout(location = 1) in vec2 fragCoord;
layout(location = 0) out vec4 fragColor;

layout(std140, binding = 0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
    vec4 color;
    vec3 iResolution;
    vec2 rectSize;
    float radius;
    float blur;
};

float roundedBox(vec2 centerPos, vec2 size, float radii) {
    return length(max(abs(centerPos) - size + radii, 0.0)) - radii;
}

void main()
{
    float box = roundedBox(fragCoord - iResolution.xy * 0.5, rectSize, radius);
    float a = 1.0 - smoothstep(0.0, blur, box);
    fragColor = color * qt_Opacity * a * a;
}

Lorsque l’on utilise des rayons de coin individuels, la valeur de l’uniforme « float radius » est < 0 et il existe un uniforme supplémentaire « vec4 radius4 ». L’ordre des valeurs de rayon de coin dans le vec4 est : coin supérieur gauche, coin supérieur droit, coin inférieur gauche, coin inférieur droit.

Qt Quick Effect Maker contient le nœud « RectangularShadow » qui peut servir de point de départ pour un matériau personnalisé. Vous pouvez utiliser directement l’effet exporté contenant ce nœud comme matériau d’ RectangularShadow.

RectangularShadow {
    ...
    material: MyShadowEffect { }
}

Pour revenir au matériau par défaut, définissez la propriété « matériau » sur « null ».

offset : vector2d

Cette propriété définit le décalage de position utilisé pour l'ombre. Ce décalage est ajouté à la position de l'ombre, par rapport à la position de l'élément « RectangularShadow ».

La valeur par défaut est « Qt.vector2d(0.0, 0.0) » (aucun décalage).

radius : real

Cette propriété définit le rayon des coins utilisé pour dessiner une ombre aux coins arrondis.

La valeur est comprise entre 0,0 et la moitié de la largeur ou de la hauteur effective de l'élément, la plus petite des deux étant retenue.

La valeur par défaut est 0.

spread : real

Cette propriété définit l'étendue (l'extension) de l'ombre en pixels. Cette étendue s'ajoute à la taille de l'ombre, par rapport à la taille de l'élément « RectangularShadow ».

La valeur est comprise entre -inf et inf. La valeur par défaut est 0.0.

topLeftRadius : real [since 6.11]

Cette propriété définit le rayon utilisé pour dessiner le coin supérieur gauche.

Si topLeftRadius n'est pas défini, la valeur « radius » sera utilisée à la place. Si topLeftRadius est égal à zéro, le coin sera pointu.

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

Voir également radius, topRightRadius, bottomLeftRadius et bottomRightRadius.

topRightRadius : real [since 6.11]

Cette propriété définit le rayon utilisé pour dessiner le coin supérieur droit.

Si `topRightRadius` n'est pas défini, la valeur ` radius ` sera utilisée à la place. Si `topRightRadius` est égal à zéro, le coin sera pointu.

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

Voir également radius, topLeftRadius, bottomLeftRadius et bottomRightRadius.