Qt Quick 例題 - 画像要素

画像タイプに関する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

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