Qt Quick 例 - 画像要素
ここでは、画像タイプに関連するQMLのサンプルをまとめています。
「画像要素」は、画像タイプに関連する簡単なQMLのサンプル集です。詳細については、「QMLにおけるユースケース - ビジュアル要素」をご覧ください。
例の動作確認
以下の手順でサンプルを実行できます。
- Qt Creator
Welcome モードを開き、Examples からサンプルを選択します。詳細については、「Qt Creator ：チュートリアル：ビルドと実行」を参照してください。
- Qt Extension for Visual Studio Code
Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからこのサンプルを選択します。詳細については、Qt Extension for Visual Studio Code ：チュートリアル「ビルドと実行」を参照してください。
BorderImage を使用したスケーリング
BorderImageは、BorderImage 型のhorizontalTileModeおよびverticalTileModeプロパティを設定することで、さまざまなスケーリングモードを表示します。
画像の塗りつぶし
「Image」では、Image タイプのさまざまな塗りつぶしモードを示しています。
シャドウ効果
「シャドウ」では、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
}
}アニメーションの終了時に、クマは初期状態に戻されます。
© 2026 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.
