Qt Quick Examples - Image Elements | Qt Quick (original) (raw)

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, see Qt Creator: Tutorial: Build and run.

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](qml-qtquick-borderimage.html) {
    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](qml-qtquick-animatedsprite.html) {
    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](qml-qtquick-sprite.html) {
        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.

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

Example project @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.