Qt Quick 示例 - 图片元素

这是一系列关于图片类型的 QML 示例的集合。

图片元素 是一个关于图片类型的小 QML 示例集合。更多详细信息，请访问用例 - QML 中的视觉元素。

运行示例

要从 Qt Creator 运行此示例，请打开欢迎模式并从示例中选择此示例。更多详细信息，请访问构建和运行示例。

使用 BorderImage 进行缩放

BorderImage 通过设置其水平平铺模式和垂直平铺模式属性来显示 BorderImage 类型的各种缩放模式。

图像填充

Image 显示 Image 类型的各种填充模式。

阴影效果

Shadows 演示了如何使用 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"
    }

使用 AnimatedSprite 的精灵动画

AnimatedSprite 展示了如何使用一个 AnimatedSprite 对象来显示简单动画

    AnimatedSprite {
        id: sprite

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

精灵动画将循环三次。

使用 SpriteSequence 的精灵动画

SpriteSequence 展示了如何使用精灵序列来绘制一个可交互的动画熊。The SpriteSequence 对象定义了五个不同的精灵。熊最初处于静止状态

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

当场景被点击时，动画将精灵序列设置为坠落状态，并动画化熊的 y 属性。

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

动画结束时，熊将恢复到其初始状态。

示例项目 @ code.qt.io