Qt Quick Beispiele – Bildelemente

„Bildelemente“ ist eine Sammlung kleiner QML-Beispiele zum Thema Bildtypen. Weitere Informationen finden Sie unter „Anwendungsfall – Visuelle Elemente in QML“.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator: Tutorial: Erstellen und Ausführen“.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Skalierung mit „BorderImage“

BorderImage veranschaulicht die verschiedenen Skalierungsmodi des Typs „ BorderImage “, indem es dessen Eigenschaften „horizontalTileMode“ und „verticalTileMode“ festlegt.

Bildfüllung

„Image“ zeigt die verschiedenen Füllmodi des Typs „ Image “ an.

Schatteneffekte

„Schatten“ zeigt, wie man mit einem ` BorderImage` einen Schlagschatteneffekt für ein rechteckiges Element erstellt:

    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 mithilfe eines „ AnimatedSprite “-Objekts eine einfache Animation 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 zum Zeichnen eines animierten und interaktiven Bären. Das „ SpriteSequence “-Objekt definiert fünf verschiedene Sprites. Der Bär befindet sich zunächst in einem ruhenden 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 auf die Szene geklickt wird, setzt eine Animation die Sprite-Sequenz auf die „fallenden“ Zustände 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 wieder in seinen Ausgangszustand zurückversetzt.

Beispielprojekt @ code.qt.io