Qt Quick Examples - Image Elements#
This is a collection of QML examples relating to image types.
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.