Qt 快速示例 - 图像元素

这是一个关于图像类型的 QML 示例集合。

图像元素 是一个关于图像类型的小型 QML 示例集合。有关更多信息，请访问 Use Case - Visual Elements In QML。

运行示例

要从 Qt Creator 中运行示例，请打开欢迎模式并从示例中选择。有关更多信息，请参阅构建和运行示例。

使用 BorderImage 缩放

BorderImage 通过设置其 horizontalTileMode 和 verticalTileMode 属性来显示 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 通过定义五个不同的精灵，演示使用精灵序列绘制动画且交互式的熊。在开始时，熊处于 静止 状态

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