Qt Quick Examples - Image Elements¶
This is a collection of QML examples relating to image types
animatedimage.qml Example File¶
animatedsprite.qml Example File¶
borderimage.qml Example File¶
image.qml Example File¶
imageelements.qml Example File¶
shadows.qml Example File¶
spritesequence.qml Example File¶
BorderImageSelector.qml Example File¶
ImageCell.qml Example File¶
MyBorderImage.qml Example File¶
ShadowRectangle.qml Example File¶
main.cpp Example File¶
imageelements.pro Example File¶
imageelements.qmlproject Example File¶
imageelements.qrc Example File¶
BearSheet.png Image File¶
Uniflow_steam_engine.gif Image File¶
arrow.png Image File¶
bw.png Image File¶
colors.png Image File¶
qt-logo.png Image File¶
shadow.png Image File¶
speaker.png Image File¶
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 off the various scaling modes of the BorderImage type by setting its horizontalTileMode and verticalTileMode properties.
Image Fill¶
Image shows off 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: "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: "content/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: "content/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.