aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/imageelements
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/imageelements')
-rw-r--r--examples/quick/imageelements/animatedsprite.qml4
-rw-r--r--examples/quick/imageelements/content/ShadowRectangle.qml2
-rw-r--r--examples/quick/imageelements/imageelements.qml24
-rw-r--r--examples/quick/imageelements/spritesequence.qml4
4 files changed, 29 insertions, 5 deletions
diff --git a/examples/quick/imageelements/animatedsprite.qml b/examples/quick/imageelements/animatedsprite.qml
index 337456f785..863a1f67b1 100644
--- a/examples/quick/imageelements/animatedsprite.qml
+++ b/examples/quick/imageelements/animatedsprite.qml
@@ -46,6 +46,8 @@ Item {
anchors.fill: parent
color: "white"
}
+
+//! [sprite]
AnimatedSprite {
id: sprite
width: 170
@@ -58,6 +60,8 @@ Item {
frameHeight: 170
loops: 3
}
+//! [sprite]
+
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
diff --git a/examples/quick/imageelements/content/ShadowRectangle.qml b/examples/quick/imageelements/content/ShadowRectangle.qml
index e6fd13bb26..4ce8915b01 100644
--- a/examples/quick/imageelements/content/ShadowRectangle.qml
+++ b/examples/quick/imageelements/content/ShadowRectangle.qml
@@ -43,12 +43,14 @@ import QtQuick 2.0
Item {
property alias color : rectangle.color
+//! [shadow]
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"; smooth: true
}
+//! [shadow]
Rectangle { id: rectangle; anchors.fill: parent }
}
diff --git a/examples/quick/imageelements/imageelements.qml b/examples/quick/imageelements/imageelements.qml
index adfa43a659..2de56f93c7 100644
--- a/examples/quick/imageelements/imageelements.qml
+++ b/examples/quick/imageelements/imageelements.qml
@@ -49,15 +49,29 @@ import "../../shared"
This is a collection of small QML examples relating to image elements.
- BorderImage shows off the various scaling modes of the BorderImage item.
+ 'BorderImage' shows off the various scaling modes of the BorderImage item
+ by setting its horizontalTileMode and verticalTileMode properties.
- Image shows off the various tiling modes of the Image item.
+ 'Image' shows off the various fill modes of the Image item.
- Shadows shows how to create a drop shadow for a rectangle using a BorderImage.
+ 'Shadows' shows how to create a drop shadow effect for a rectangular item
+ using a BorderImage:
+ \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate
- AnimatedSprite shows a simple use for the AnimatedSprite element.
+ 'AnimatedSprite' shows how to display a simple animation using an
+ AnimatedSprite element:
+ \snippet examples/quick/imageelements/animatedsprite.qml sprite
+ The sprite animation will loop 3 times.
- SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear.
+ 'SpriteSequence' demonstrates using a sprite sequence to draw an animated
+ and interactive bear.
+ The SpriteSequence defines 5 different sprites. The bear is initially in
+ a 'still' state:
+ \snippet examples/quick/imageelements/spritesequence.qml still
+ When the scene is clicked, an animation sets the sprite sequence to the
+ 'falling' states and animates the bear's y property.
+ \snippet examples/quick/imageelements/spritesequence.qml animation
+ At the end of the amimation the bear is set back to its initial state.
*/
Item {
diff --git a/examples/quick/imageelements/spritesequence.qml b/examples/quick/imageelements/spritesequence.qml
index 01f34e5c7a..98c58ee428 100644
--- a/examples/quick/imageelements/spritesequence.qml
+++ b/examples/quick/imageelements/spritesequence.qml
@@ -46,6 +46,7 @@ Item {
onClicked: anim.start();
anchors.fill: parent
}
+//! [animation]
SequentialAnimation {
id: anim
ScriptAction { script: image.goalSprite = "falling"; }
@@ -53,6 +54,7 @@ Item {
ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
PropertyAction { target: image; property: "y"; value: 0 }
}
+//! [animation]
SpriteSequence {
id: image
width: 256
@@ -60,6 +62,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
interpolate: false
goalSprite: ""
+//! [still]
Sprite{
name: "still"
source: "content/BearSheet.png"
@@ -69,6 +72,7 @@ Item {
frameDuration: 100
to: {"still":1, "blink":0.1, "floating":0}
}
+//! [still]
Sprite{
name: "blink"
source: "content/BearSheet.png"