RectangularShadow QML Type

Crée un rectangle lissé, adapté par exemple aux effets d'ombre et d'éclat. Plus d'informations...

• 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 on a appliqué un effet de flou. Les performances de RectangularShadow sont bien meilleures que celles d'une fonction générale qui crée une ombre/une lueur floue pour n'importe quel objet de forme.

L'exemple suivant montre comment ajouter une ombre à un 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 CSS box-shadow, avec des valeurs de couleur, de décalage, d'étendue et de flou. En outre, l'API de RectangularShadow contient :

• real radius L'API de RectangularShadow contient en outre les éléments suivants : : Contrôle le rayon d'arrondi appliqué aux coins du rectangle. Contrairement au CSS box-shadow, qui hérite du rayon de l'élément parent, RectangularShadow s'attend à ce que l'utilisateur le définisse. Cela vous permet d'utiliser différents rayons et de déplacer le RectangularShadow séparément de son élément parent.
• bool cached: Permet la mise en cache de 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 dynamiquement.
• item material RectangularShadow : contient l'élément ShaderEffect de RectangularShadow pour une utilisation avancée. Cela permet, par exemple, d'étendre l'effet avec un shader personnalisé.

Le rendu correspond également au CSS box-shadow, avec quelques différences notables. Ces différences ont pour but de rendre le RectangularShadow aussi performant que possible.

• Le flou est calculé mathématiquement dans le shader plutôt que d'utiliser le flou gaussien, que les implémentations de box-shadow CSS utilisent souvent. Cela donne à l'ombre un aspect légèrement différent, en particulier avec des valeurs de flou plus importantes.
• Depuis Qt 6.11, RectangularShadow prend également en charge les valeurs individuelles du rayon des coins. Si vous n'en avez pas besoin, pour de meilleures performances, ne définissez que la valeur commune radius.

Voici un tableau avec des captures d'écran pour comparer le rendu de RectangularShadow et de CSS box-shadow dans le navigateur Chrome. L'élément le plus à droite est RectangularShadow en flou multiplié par 1.2 (donc 24, 48, 48) pour une meilleure correspondance.

RectangularShadow étend la taille de l'ombre avec une quantité exacte concernant la quantité de flou, alors que d'autres ombres (y compris l'ombre de boîte CSS) ont un multiplicateur pour la taille. La taille de l'élément d'ombre à l'intérieur d'un RectangularShadow est de :

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 280x180 pixels. Les valeurs de rayon ou de décalage n'affectent pas la taille de l'élément d'ombre.

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

Documentation sur les propriétés

antialiasing : bool

Utilisé pour décider si l'ombre doit utiliser l'anticrénelage ou non. Lorsque la valeur est true, un anticrénelage d'un seul pixel est utilisé même si la valeur blur est 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 atteints 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, radius sera utilisé à la place. Si bottomLeftRadius est égal à zéro, le coin sera net.

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

Voir aussi 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, radius sera utilisé à la place. Si bottomRightRadius est égal à zéro, le coin sera net.

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

Voir aussi 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 fois que les propriétés de l'effet sont modifiées, les pixels du cache doivent être mis à jour. La consommation de mémoire augmente, car une mémoire tampon supplémentaire est nécessaire pour stocker la sortie 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 la 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 la portée de l'ombre, car l'élément effect a souvent une position et une taille différentes de celles de l'élément RectangularShadow, en raison de blur, offset et spread.

Le matériau peut également être remplacé par un matériau personnalisé. Le matériau par défaut lorsque le rayon d'angle individuel n'est pas utilisé est un ShaderEffect avec la valeur suivante : fragmentShader:

#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;
}

Lors de l'utilisation d'un rayon d'angle individuel, la valeur de l'uniforme "float radius" est < 0 et il existe un uniforme supplémentaire "vec4 radius4". L'ordre des valeurs de rayon d'angle dans le vec4 est haut-gauche, haut-droit, bas-gauche, bas-droit.

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

RectangularShadow {
    ...
    material: MyShadowEffect { }
}

Pour revenir au matériau par défaut, réglez la propriété du 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) (pas de décalage).

radius : real

Cette propriété définit le rayon d'angle 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 étant retenue.

La valeur par défaut est 0.

spread : real

Cette propriété définit l'étendue de l'ombre en pixels. Cette extension est ajoutée à 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, radius sera utilisé à la place. Si topLeftRadius est égal à zéro, le coin sera net.

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

Voir aussi 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, radius sera utilisé à la place. Si topRightRadius est égal à zéro, le coin sera net.

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

Voir aussi radius, topLeftRadius, bottomLeftRadius, et bottomRightRadius.