Qt Quick Examples - Image Elements▲
Image Elements is a collection of small QML examples relating to image types. For more information, visit Use Case - Visual Elements In QML.
Running the Example▲
To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.
Scaling with BorderImage▲
BorderImage shows the various scaling modes of the BorderImage type by setting its horizontalTileMode and verticalTileMode properties.
Image Fill▲
Image shows the various fill modes of the Image type.
Shadow Effects▲
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: "pics/shadow.png"
}Sprite Animations with AnimatedSprite▲
AnimatedSprite shows how to display a simple animation using an AnimatedSprite object:
AnimatedSprite {
id: sprite
anchors.centerIn: parent
source: "pics/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: "pics/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.