Qt Quick Beispiele - Bildelemente

Image Elements ist eine Sammlung von kleinen QML-Beispielen für Bildtypen. Weitere Informationen finden Sie unter Anwendungsfall - Visuelle Elemente in QML.

Ausführen des Beispiels

Um das Beispiel auszuführen Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel unter Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Skalierung mit BorderImage

BorderImage zeigt die verschiedenen Skalierungsmodi des Typs BorderImage durch Einstellen seiner Eigenschaften horizontalTileMode und verticalTileMode.

Image Fill

Image zeigt die verschiedenen Füllmodi des Typs Image.

Schatteneffekte

Shadows zeigt, wie man mit BorderImage einen Schlagschatteneffekt für ein rechteckiges Element erzeugt:

    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"
    }

Sprite-Animationen mit AnimatedSprite

AnimatedSprite zeigt, wie man eine einfache Animation mit einem AnimatedSprite Objekt anzeigt:

    AnimatedSprite {
        id: sprite

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

Die Sprite-Animation wird dreimal wiederholt.

Sprite-Animationen mit SpriteSequence

SpriteSequence demonstriert die Verwendung einer Sprite-Sequenz, um einen animierten und interaktiven Bären zu zeichnen. Das Objekt SpriteSequence definiert fünf verschiedene Sprites. Der Bär befindet sich zunächst in einem unbewegten Zustand:

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

Wenn die Szene angeklickt wird, setzt eine Animation die Sprite-Sequenz in den fallenden Zustand und animiert die y-Eigenschaft des Bären.

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

Am Ende der Animation wird der Bär in seinen Ausgangszustand zurückversetzt.

Beispielprojekt @ code.qt.io