Qt Quick Exemples - Éléments d'image

«Éléments d'image » est une collection de petits exemples QML relatifs aux types d'images. Pour plus d'informations, consultez la section Cas d'utilisation - Éléments visuels en QML.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l'exemple dans « Examples ». Pour plus d'informations, consultez «Qt Creator: Tutoriel : Compiler et exécuter».

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Mise à l’échelle avec BorderImage

BorderImage illustre les différents modes de mise à l'échelle du type « BorderImage » en définissant ses propriétés `horizontalTileMode` et `verticalTileMode`.

Remplissage d’image

L'image illustre les différents modes de remplissage du type « Image ».

Effets d'ombre

La section «Ombres » montre comment créer un effet d’ombre portée pour un élément rectangulaire à l’aide d’un ` BorderImage` :

    BorderImage {
        anchors.fill: rectangle
        anchors {
            leftMargin: -6
            topMargin: -6
            rightMargin: -8
            bottomMargin: -8
        }
        border {
            left: 10
            top: 10
            right: 10
            bottom: 10
        }
        source: "pics/shadow.png"
    }

Animations de sprites avec AnimatedSprite

AnimatedSprite montre comment afficher une animation simple à l'aide d'un objet « AnimatedSprite » :

    AnimatedSprite {
        id: sprite

        anchors.centerIn: parent
        source: "pics/speaker.png"
        frameCount: 60
        frameSync: true
        frameWidth: 170
        frameHeight: 170
        loops: 3
    }

L’animation du sprite sera répétée trois fois.

Animations de sprites avec SpriteSequence

SpriteSequence montre comment utiliser une séquence de sprites pour dessiner un ours animé et interactif. L'objet SpriteSequence définit cinq sprites différents. L'ours est initialement immobile:

        Sprite {
            name: "still"
            source: "pics/BearSheet.png"
            frameCount: 1
            frameWidth: 256
            frameHeight: 256
            frameDuration: 100
            to: {"still":1, "blink":0.1, "floating":0}
        }

Lorsque l'on clique sur la scène, une animation fait passer la séquence de sprites aux états de chute et anime la propriété y de l'ours.

    SequentialAnimation {
        id: anim

        ScriptAction { script: image.goalSprite = "falling" }
        NumberAnimation {
            target: image
            property: "y"
            to: 480
            duration: 12000
        }
        ScriptAction {
            script: {
                image.goalSprite = ""
                image.jumpTo("still")
            }
        }
        PropertyAction {
            target: image
            property: "y"
            value: 0
        }
    }

À la fin de l’animation, l’ours revient à son état initial.

Exemple de projet sur code.qt.io