Qt Quick Examples - Image Elements#

This is a collection of QML examples relating to image types.


Image Elements is a collection of small QML examples relating to image types. For more information, visit Use Case - Visual Elements In QML.

Running the Example#

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Scaling with BorderImage#

BorderImage shows the various scaling modes of the BorderImage type by setting its horizontalTileMode and verticalTileMode properties.

Image Fill#

Image shows the various fill modes of the Image type.

Shadow Effects#

Shadows shows how to create a drop shadow effect for a rectangular item using a 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"

Sprite Animations with AnimatedSprite#

AnimatedSprite shows how to display a simple animation using an AnimatedSprite object:

AnimatedSprite {
    id: sprite

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

The sprite animation will loop three times.

Sprite Animations with SpriteSequence#

SpriteSequence demonstrates using a sprite sequence to draw an animated and interactive bear. The SpriteSequence object defines five different sprites. The bear is initially in a still state:

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

When the scene is clicked, an animation sets the sprite sequence to the falling states and animates the bear’s y property.

SequentialAnimation {
    id: anim

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

At the end of the animation the bear is set back to its initial state.

Example project @ code.qt.io