Qt Quick Ejemplos - Elementos de imagen

Esta es una colección de ejemplos QML relacionados con los tipos de imagen.

Elementos de imagen es una colección de pequeños ejemplos QML relacionados con los tipos de imagen. Para más información, visite Caso de uso - Elementos visuales en QML.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Escalado con BorderImage

BorderImage muestra los distintos modos de escalado del tipo BorderImage estableciendo sus propiedades horizontalTileMode y verticalTileMode.

Relleno con Image

Image muestra los distintos modos de relleno del tipo Image.

Efectos de Sombra

Sombras muestra como crear un efecto de sombra para un elemento rectangular usando 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"
    }

Animaciones de Sprite con AnimatedSprite

AnimatedSprite muestra cómo mostrar una animación simple utilizando un objeto AnimatedSprite:

    AnimatedSprite {
        id: sprite

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

La animación del sprite se repetirá tres veces.

Animaciones con SpriteSequence

SpriteSequence demuestra el uso de una secuencia de sprites para dibujar un oso animado e interactivo. El objeto SpriteSequence define cinco sprites diferentes. El oso está inicialmente en un estado inmóvil:

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

Cuando se hace clic en la escena, una animación establece la secuencia de sprites a los estados de caída y anima la propiedad y del oso.

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

Al final de la animación, el oso vuelve a su estado inicial.

Proyecto de ejemplo @ code.qt.io

© 2026 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.