Qt Quick Exemples - Éléments d'image

Image Elements est une collection de petits exemples QML relatifs aux types d'images. Pour plus d'informations, voir Cas d'utilisation - Éléments visuels en QML.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Mise à l'échelle avec BorderImage

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

Remplissage de l'image

Image montre les différents modes de remplissage du type Image.

Effets d'ombre

Shadows 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 bouclera 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 place la séquence de sprites dans les é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 est ramené à son état initial.

Exemple de projet @ code.qt.io