Qt クイックサンプル - 画像要素

画像タイプに関するQMLのサンプル集です。

Image Elementsは、画像タイプに関連する小さなQMLのサンプル集です。詳しくは、使用例 - QMLのビジュアル要素を参照してください。

例の実行

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

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
    }

スプライト・アニメーションは3回ループします。

SpriteSequence によるスプライト・アニメーション

SpriteSequenceはスプライトシーケンスを使って、アニメーションとインタラクティブなクマを描く方法を示しています。SpriteSequence オブジェクトは5つの異なるスプライトを定義しています。クマは最初は静止しています：

        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

©2024 The Qt Company Ltd. 本文書に含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。