This example demonstrates the positioners and some of their animations.
*/
/*!
- \title QML Examples - Image Elements
- \example declarative/imageelements
- \brief This is a collection of QML examples
- \image qml-imageelements-example.png
-
- This is a collection of small QML examples relating to image elements. Each example is
- a small QML file, usually containing or emphasizing a particular element or
- feature. You can run and observe the behavior of each example.
-*/
-/*!
\title QML Examples - Models and Views
\example declarative/modelviews
\brief This is a collection of QML examples
import QtQuick 2.0
Item {
- width: 400
- height: 400
+ width: 320
+ height: 480
Rectangle {
anchors.fill: parent
color: "white"
}
AnimatedSprite {
id: sprite
- anchors.fill: parent
+ width: 170
+ height: 170
+ anchors.centerIn: parent
source: "content/speaker.png"
frameCount: 60
frameSync: true
width: 320
height: 480
+ BorderImageSelector {
+ id: selector
+ curIdx: 0
+ maxIdx: 3
+ gridWidth: 240
+ flickable: mainFlickable
+ width: parent.width
+ height: 64
+ }
+
Flickable {
- anchors.fill: parent
+ id: mainFlickable
+ width: parent.width
+ anchors.bottom: parent.bottom
+ anchors.top: selector.bottom
+ interactive: false //Animated through selector control
+ contentX: -120
+ Behavior on contentX { NumberAnimation {}}
contentWidth: 1030
- contentHeight: 540
+ contentHeight: 420
Grid {
anchors.centerIn: parent; spacing: 20
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+ minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
source: "content/colors.png"; margin: 30
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+ minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
source: "content/colors.png"; margin: 30
horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+ minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
source: "content/colors.png"; margin: 30
horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+ minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
source: "content/colors.png"; margin: 30
horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+ id: selector
+ property int curIdx: 0
+ property int maxIdx: 3
+ property int gridWidth: 240
+ property Flickable flickable
+ width: parent.width
+ height: 64
+ function advance(steps) {
+ var nextIdx = curIdx + steps
+ if (nextIdx < 0 || nextIdx > maxIdx)
+ return;
+ flickable.contentX += gridWidth * steps;
+ curIdx += steps;
+ }
+ Image {
+ source: "../../../shared/images/back.png"
+ MouseArea{
+ anchors.fill: parent
+ onClicked: selector.advance(-1)
+ }
+ anchors.left: parent.left
+ anchors.leftMargin: 8
+ anchors.verticalCenter: parent.verticalCenter
+ opacity: selector.curIdx == 0 ? 0.2 : 1.0
+ Behavior on opacity {NumberAnimation{}}
+ }
+ Image {
+ source: "../../../shared/images/back.png"
+ mirror: true
+ MouseArea{
+ anchors.fill: parent
+ onClicked: selector.advance(1)
+ }
+ opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0
+ Behavior on opacity {NumberAnimation{}}
+ anchors.right: parent.right
+ anchors.rightMargin: 8
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ Repeater {
+ model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ]
+ delegate: Text {
+ text: model.modelData
+ anchors.verticalCenter: parent.verticalCenter
+
+ x: (index - selector.curIdx) * 80 + 140
+ Behavior on x { NumberAnimation{} }
+
+ opacity: selector.curIdx == index ? 1.0 : 0.0
+ Behavior on opacity { NumberAnimation{} }
+ }
+ }
+}
property int maxHeight
property int margin
- width: 240; height: 240
+ width: 240; height: 200
BorderImage {
id: image; anchors.centerIn: parent
Rectangle {
width: 320
height: 480
- Flickable {
- anchors.fill: parent
- contentWidth: 490
- contentHeight: 285
-
- Grid {
- property int cellWidth: (width - (spacing * (columns - 1))) / columns
- property int cellHeight: (height - (spacing * (rows - 1))) / rows
+ Grid {
+ property int cellWidth: (width - (spacing * (columns - 1))) / columns
+ property int cellHeight: (height - (spacing * (rows - 1))) / rows
- anchors.fill: parent
- anchors.margins: 30
+ anchors.fill: parent
+ anchors.margins: 30
- columns: 3
- rows: 2
- spacing: 30
+ columns: 2
+ rows: 3
+ spacing: 30
- ImageCell { mode: Image.Stretch; caption: "Stretch" }
- ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
- ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }
+ ImageCell { mode: Image.Stretch; caption: "Stretch" }
+ ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
+ ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }
- ImageCell { mode: Image.Tile; caption: "Tile" }
- ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" }
- ImageCell { mode: Image.TileVertically; caption: "TileVertically" }
- }
+ ImageCell { mode: Image.Tile; caption: "Tile" }
+ ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" }
+ ImageCell { mode: Image.TileVertically; caption: "TileVertically" }
}
}
--- /dev/null
+TEMPLATE = app
+
+QT += quick declarative
+SOURCES += main.cpp
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements
+qml.files = borderimage.qml content imageelements.qml image.qml shadows.qml simplesprite.qml spriteimage.qml
+qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements
+INSTALLS += target qml
+
import QtQuick 2.0
import "../../shared"
+/*!
+ \title QML Examples - Image Elements
+ \example declarative/imageelements
+ \brief This is a collection of QML examples
+ \image qml-imageelements-example.png
+
+ This is a collection of small QML examples relating to image elements.
+
+ BorderImage shows off the various scaling modes of the BorderImage item.
+
+ Image shows off the various tiling modes of the Image item.
+
+ Shadows shows how to create a drop shadow for a rectangle using a BorderImage.
+
+ AnimatedSprite shows a simple use for the AnimatedSprite element.
+
+ SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear.
+*/
+
Item {
height: 480
- width: 640
+ width: 320
LauncherList {
id: ll
anchors.fill: parent
addExample("BorderImage", "An image with scaled borders", Qt.resolvedUrl("borderimage.qml"));
addExample("Image", "A showcase of the options available to Image", Qt.resolvedUrl("image.qml"));
addExample("Shadows", "Rectangles with a drop-shadow effect", Qt.resolvedUrl("shadows.qml"));
- addExample("Simple Sprite", "A simple sprite-based animation", Qt.resolvedUrl("simplesprite.qml"));
- addExample("Sprite Image", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spriteimage.qml"));
+ addExample("AnimatedSprite", "A simple sprite-based animation", Qt.resolvedUrl("animatedsprite.qml"));
+ addExample("SpriteSequence", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spritesequence.qml"));
}
}
}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+** * Redistributions of source code must retain the above copyright
+** notice, this list of conditions and the following disclaimer.
+** * Redistributions in binary form must reproduce the above copyright
+** notice, this list of conditions and the following disclaimer in
+** the documentation and/or other materials provided with the
+** distribution.
+** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+** the names of its contributors may be used to endorse or promote
+** products derived from this software without specific prior written
+** permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "../../shared/shared.h"
+DECLARATIVE_EXAMPLE_MAIN(imageelements)
import QtQuick 2.0
Item {
- width: 480
- height: 1280
+ width: 320
+ height: 480
MouseArea {
onClicked: anim.start();
anchors.fill: parent
SequentialAnimation {
id: anim
ScriptAction { script: image.goalSprite = "falling"; }
- NumberAnimation { target: image; property: "y"; to: 1480; duration: 12000; }
+ NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; }
ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
PropertyAction { target: image; property: "y"; value: 0 }
}
projects / profile / ivi / qtdeclarative.git / commitdiff