Qt Quick 範例 - 圖像元素

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

圖像元素 is a collection of small QML examples relating to image types. For more information, visit 用例 - QML 中的視覺元素 .

運行範例

要運行範例從 Qt Creator ，打開歡迎模式，然後選擇範例從範例。更多信息，拜訪構建和運行範例 .

Scaling with BorderImage

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

圖像填充

圖像 shows the various fill modes of the Image 類型。

陰影效果

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: "shadow.png"
    }

采用 AnimatedSprite 子畫麵動畫

AnimatedSprite shows how to display a simple animation using an AnimatedSprite 對象：

    AnimatedSprite {
        id: sprite
        anchors.centerIn: parent
        source: "content/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: "content/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 = ""; image.jumpTo("still");} }
        PropertyAction { target: image; property: "y"; value: 0 }
    }

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

範例工程 @ code.qt.io