Qt 5.11 | Qt Quick | Qt Quick Examples - Image Elements

Qt 5.11.3 Reference Documentation

# 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 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.

Files:

- imageelements/animatedimage.qml
- imageelements/animatedsprite.qml
- imageelements/borderimage.qml
- imageelements/content/BorderImageSelector.qml
- imageelements/content/ImageCell.qml
- imageelements/content/MyBorderImage.qml
- imageelements/content/ShadowRectangle.qml
- imageelements/image.qml
- imageelements/imageelements.pro
- imageelements/imageelements.qml
- imageelements/imageelements.qmlproject
- imageelements/imageelements.qrc
- imageelements/main.cpp
- imageelements/shadows.qml
- imageelements/spritesequence.qml

Images:

- imageelements/content/BearSheet.png
- imageelements/content/Uniflow_steam_engine.gif
- imageelements/content/arrow.png
- imageelements/content/bw.png
- imageelements/content/colors.png
- imageelements/content/qt-logo.png
- imageelements/content/shadow.png
- imageelements/content/speaker.png