aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/imageelements
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/imageelements')
-rw-r--r--examples/quick/imageelements/BorderImageSelector.qml10
-rw-r--r--examples/quick/imageelements/CMakeLists.txt34
-rw-r--r--examples/quick/imageelements/ImageCell.qml8
-rw-r--r--examples/quick/imageelements/MyBorderImage.qml31
-rw-r--r--examples/quick/imageelements/ShadowRectangle.qml20
-rw-r--r--examples/quick/imageelements/animatedimage.qml7
-rw-r--r--examples/quick/imageelements/animatedsprite.qml13
-rw-r--r--examples/quick/imageelements/borderimage.qml88
-rw-r--r--examples/quick/imageelements/doc/src/imageelements.qdoc1
-rw-r--r--examples/quick/imageelements/framestepping.qml6
-rw-r--r--examples/quick/imageelements/image.qml7
-rw-r--r--examples/quick/imageelements/imageelements.qml17
-rw-r--r--examples/quick/imageelements/multiframeborderimage.qml8
-rw-r--r--examples/quick/imageelements/shadows.qml15
-rw-r--r--examples/quick/imageelements/spritesequence.qml26
15 files changed, 203 insertions, 88 deletions
diff --git a/examples/quick/imageelements/BorderImageSelector.qml b/examples/quick/imageelements/BorderImageSelector.qml
index 0ea1b0b551..ae99b35231 100644
--- a/examples/quick/imageelements/BorderImageSelector.qml
+++ b/examples/quick/imageelements/BorderImageSelector.qml
@@ -1,10 +1,12 @@
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
import QtQuick
Item {
id: selector
+
property int curIdx: 0
property int maxIdx: 3
property int gridWidth: 240
@@ -12,11 +14,11 @@ Item {
width: parent.width
height: 64
function advance(steps) {
- var nextIdx = curIdx + steps
+ const nextIdx = curIdx + steps
if (nextIdx < 0 || nextIdx > maxIdx)
- return;
- flickable.contentX += gridWidth * steps;
- curIdx += steps;
+ return
+ flickable.contentX += gridWidth * steps
+ curIdx += steps
}
Image {
source: "pics/arrow.png"
diff --git a/examples/quick/imageelements/CMakeLists.txt b/examples/quick/imageelements/CMakeLists.txt
index 905a70d55d..e13f57af9b 100644
--- a/examples/quick/imageelements/CMakeLists.txt
+++ b/examples/quick/imageelements/CMakeLists.txt
@@ -1,18 +1,12 @@
# Copyright (C) 2022 The Qt Company Ltd.
-# SPDX-License-Identifier: BSD-3-Clause
+# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
cmake_minimum_required(VERSION 3.16)
project(imageelements LANGUAGES CXX)
-if(NOT DEFINED INSTALL_EXAMPLESDIR)
- set(INSTALL_EXAMPLESDIR "examples")
-endif()
-
-set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quick/imageelements")
-
find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick)
-qt_standard_project_setup()
+qt_standard_project_setup(REQUIRES 6.5)
add_subdirectory("../shared" "shared")
@@ -23,15 +17,14 @@ qt_add_executable(imageelementsexample
)
target_link_libraries(imageelementsexample PRIVATE
- Qt::Core
- Qt::Gui
- Qt::Qml
- Qt::Quick
+ Qt6::Core
+ Qt6::Gui
+ Qt6::Qml
+ Qt6::Quick
)
qt_add_qml_module(imageelementsexample
URI imageelements
- AUTO_RESOURCE_PREFIX
QML_FILES
"animatedimage.qml"
"animatedsprite.qml"
@@ -61,9 +54,16 @@ qt_add_qml_module(imageelementsexample
)
install(TARGETS imageelementsexample
- RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
- BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
- LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+ BUNDLE DESTINATION .
+ RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+ LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
)
-bundle_shared(imageelementsexample)
+qt_generate_deploy_qml_app_script(
+ TARGET imageelementsexample
+ OUTPUT_SCRIPT deploy_script
+ MACOS_BUNDLE_POST_BUILD
+ NO_UNSUPPORTED_PLATFORM_ERROR
+ DEPLOY_USER_QML_MODULES_ON_UNSUPPORTED_PLATFORM
+)
+install(SCRIPT ${deploy_script})
diff --git a/examples/quick/imageelements/ImageCell.qml b/examples/quick/imageelements/ImageCell.qml
index a49a6f7e52..537ed2a939 100644
--- a/examples/quick/imageelements/ImageCell.qml
+++ b/examples/quick/imageelements/ImageCell.qml
@@ -9,13 +9,17 @@ Item {
Image {
id: image
- width: parent.width; height: parent.height - captionItem.height
+
+ width: parent.width
+ height: parent.height - captionItem.height
source: "pics/qt-logo.png"
clip: true // only makes a difference if mode is PreserveAspectCrop
}
Label {
id: captionItem
- anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
+
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.bottom: parent.bottom
}
}
diff --git a/examples/quick/imageelements/MyBorderImage.qml b/examples/quick/imageelements/MyBorderImage.qml
index 9b516c242f..ae2d4171bd 100644
--- a/examples/quick/imageelements/MyBorderImage.qml
+++ b/examples/quick/imageelements/MyBorderImage.qml
@@ -17,32 +17,43 @@ Item {
property int maxHeight
property int margin
- width: 240; height: 200
+ width: 240
+ height: 200
BorderImage {
- id: image; anchors.centerIn: parent
+ id: image
+
+ anchors.centerIn: parent
SequentialAnimation on width {
loops: Animation.Infinite
NumberAnimation {
- from: container.minWidth; to: container.maxWidth
- duration: 2000; easing.type: Easing.InOutQuad
+ from: container.minWidth
+ to: container.maxWidth
+ duration: 2000
+ easing.type: Easing.InOutQuad
}
NumberAnimation {
- from: container.maxWidth; to: container.minWidth
- duration: 2000; easing.type: Easing.InOutQuad
+ from: container.maxWidth
+ to: container.minWidth
+ duration: 2000
+ easing.type: Easing.InOutQuad
}
}
SequentialAnimation on height {
loops: Animation.Infinite
NumberAnimation {
- from: container.minHeight; to: container.maxHeight
- duration: 2000; easing.type: Easing.InOutQuad
+ from: container.minHeight
+ to: container.maxHeight
+ duration: 2000
+ easing.type: Easing.InOutQuad
}
NumberAnimation {
- from: container.maxHeight; to: container.minHeight
- duration: 2000; easing.type: Easing.InOutQuad
+ from: container.maxHeight
+ to: container.minHeight
+ duration: 2000
+ easing.type: Easing.InOutQuad
}
}
diff --git a/examples/quick/imageelements/ShadowRectangle.qml b/examples/quick/imageelements/ShadowRectangle.qml
index b81da838fe..2be2fb81f2 100644
--- a/examples/quick/imageelements/ShadowRectangle.qml
+++ b/examples/quick/imageelements/ShadowRectangle.qml
@@ -9,11 +9,25 @@ Item {
//! [shadow]
BorderImage {
anchors.fill: rectangle
- anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
- border { left: 10; top: 10; right: 10; bottom: 10 }
+ anchors {
+ leftMargin: -6
+ topMargin: -6
+ rightMargin: -8
+ bottomMargin: -8
+ }
+ border {
+ left: 10
+ top: 10
+ right: 10
+ bottom: 10
+ }
source: "pics/shadow.png"
}
//! [shadow]
- Rectangle { id: rectangle; anchors.fill: parent }
+ Rectangle {
+ id: rectangle
+
+ anchors.fill: parent
+ }
}
diff --git a/examples/quick/imageelements/animatedimage.qml b/examples/quick/imageelements/animatedimage.qml
index 6a6f12873b..114b5c9075 100644
--- a/examples/quick/imageelements/animatedimage.qml
+++ b/examples/quick/imageelements/animatedimage.qml
@@ -12,6 +12,7 @@ Column {
//! [image]
AnimatedImage {
id: animation
+
source: "pics/Uniflow_steam_engine.gif"
anchors.horizontalCenter: parent.horizontalCenter
speed: speedSlider.value
@@ -23,6 +24,7 @@ Column {
Rectangle {
id: timeline
+
color: "steelblue"
width: animation.width
height: 1
@@ -32,7 +34,8 @@ Column {
Rectangle {
property int frames: animation.frameCount
- width: 4; height: 8
+ width: 4
+ height: 8
x: (animation.width - width) * animation.currentFrame / frames
y: -4
color: "red"
@@ -51,6 +54,7 @@ Column {
Slider {
id: speedSlider
+
from: 0
to: 5
value: 1
@@ -65,6 +69,7 @@ Column {
TextMetrics {
id: fontMetrics
+
text: "100%"
font.pointSize: 12
}
diff --git a/examples/quick/imageelements/animatedsprite.qml b/examples/quick/imageelements/animatedsprite.qml
index ec89a02991..50da7cf0e9 100644
--- a/examples/quick/imageelements/animatedsprite.qml
+++ b/examples/quick/imageelements/animatedsprite.qml
@@ -14,6 +14,7 @@ Item {
//! [sprite]
AnimatedSprite {
id: sprite
+
anchors.centerIn: parent
source: "pics/speaker.png"
frameCount: 60
@@ -34,21 +35,21 @@ Item {
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
onClicked: (mouse) => {
if (!sprite.running) {
- sprite.start();
+ sprite.start()
} else if (!sprite.paused) {
- sprite.pause();
+ sprite.pause()
} else {
if (mouse.button === Qt.LeftButton)
- sprite.resume();
+ sprite.resume()
else if (mouse.button === Qt.MiddleButton)
- sprite.advance(-1);
+ sprite.advance(-1)
else if (mouse.button === Qt.RightButton)
- sprite.advance(1);
+ sprite.advance(1)
}
}
}
- Component.onCompleted: console.log("Press Space to toggle visibility. Click with mouse to pause/resume.")
+ Component.onCompleted: console.log(qsTr("Press Space to toggle visibility. Click with mouse to pause/resume."))
focus: true
Keys.onSpacePressed: sprite.visible = !sprite.visible
}
diff --git a/examples/quick/imageelements/borderimage.qml b/examples/quick/imageelements/borderimage.qml
index cd358de743..7c522a64be 100644
--- a/examples/quick/imageelements/borderimage.qml
+++ b/examples/quick/imageelements/borderimage.qml
@@ -5,11 +5,13 @@ import QtQuick
Rectangle {
id: page
+
width: 320
height: 480
BorderImageSelector {
id: selector
+
curIdx: 0
maxIdx: 3
gridWidth: 240
@@ -20,6 +22,7 @@ Rectangle {
Flickable {
id: mainFlickable
+
width: parent.width
anchors.bottom: parent.bottom
anchors.top: selector.bottom
@@ -29,52 +32,91 @@ Rectangle {
contentWidth: 1030
contentHeight: 420
Grid {
- anchors.centerIn: parent; spacing: 20
+ anchors.centerIn: parent
+ spacing: 20
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
- source: Qt.resolvedUrl("pics/colors.png"); margin: 30
+ minWidth: 120
+ maxWidth: 240
+ minHeight: 120
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/colors.png")
+ margin: 30
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
- source: Qt.resolvedUrl("pics/colors.png"); margin: 30
- horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+ minWidth: 120
+ maxWidth: 240
+ minHeight: 120
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/colors.png")
+ margin: 30
+ horizontalMode: BorderImage.Repeat
+ verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
- source: Qt.resolvedUrl("pics/colors.png"); margin: 30
- horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+ minWidth: 120
+ maxWidth: 240
+ minHeight: 120
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/colors.png")
+ margin: 30
+ horizontalMode: BorderImage.Stretch
+ verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
- source: Qt.resolvedUrl("pics/colors.png"); margin: 30
- horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+ minWidth: 120
+ maxWidth: 240
+ minHeight: 120
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/colors.png")
+ margin: 30
+ horizontalMode: BorderImage.Round
+ verticalMode: BorderImage.Round
}
MyBorderImage {
- minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
- source: Qt.resolvedUrl("pics/bw.png"); margin: 10
+ minWidth: 60
+ maxWidth: 200
+ minHeight: 40
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/bw.png")
+ margin: 10
}
MyBorderImage {
- minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
- source: Qt.resolvedUrl("pics/bw.png"); margin: 10
- horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+ minWidth: 60
+ maxWidth: 200
+ minHeight: 40
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/bw.png")
+ margin: 10
+ horizontalMode: BorderImage.Repeat
+ verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
- source: Qt.resolvedUrl("pics/bw.png"); margin: 10
- horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+ minWidth: 60
+ maxWidth: 200
+ minHeight: 40
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/bw.png")
+ margin: 10
+ horizontalMode: BorderImage.Stretch
+ verticalMode: BorderImage.Repeat
}
MyBorderImage {
- minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
- source: Qt.resolvedUrl("pics/bw.png"); margin: 10
- horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+ minWidth: 60
+ maxWidth: 200
+ minHeight: 40
+ maxHeight: 200
+ source: Qt.resolvedUrl("pics/bw.png")
+ margin: 10
+ horizontalMode: BorderImage.Round
+ verticalMode: BorderImage.Round
}
}
}
diff --git a/examples/quick/imageelements/doc/src/imageelements.qdoc b/examples/quick/imageelements/doc/src/imageelements.qdoc
index 3caf49201b..06fa25ab19 100644
--- a/examples/quick/imageelements/doc/src/imageelements.qdoc
+++ b/examples/quick/imageelements/doc/src/imageelements.qdoc
@@ -6,6 +6,7 @@
\brief This is a collection of QML examples relating to image types.
\image qml-imageelements-example.png
\ingroup qtquickexamples
+ \examplecategory {Graphics}
\e{Image Elements} is a collection of small QML examples relating to image
types. For more information, visit \l{Use Case - Visual Elements In QML}.
diff --git a/examples/quick/imageelements/framestepping.qml b/examples/quick/imageelements/framestepping.qml
index 2f104248d8..a06aaae780 100644
--- a/examples/quick/imageelements/framestepping.qml
+++ b/examples/quick/imageelements/framestepping.qml
@@ -9,6 +9,7 @@ Rectangle {
height: 320
Image {
id: img
+
anchors.centerIn: parent
cache: true
source: "pics/multi.ico"
@@ -30,7 +31,8 @@ Rectangle {
anchors.bottom: parent.bottom
anchors.margins: 6
horizontalAlignment: Text.AlignHCenter
- text: qsTr("frame " + (img.currentFrame + 1) + " of " + img.frameCount +
- "\nPress PgUp/PgDn to switch frames")
+ text: qsTr("frame %1 of %2 \nPress PgUp/PgDn to switch frames")
+ .arg(img.currentFrame + 1)
+ .arg(img.frameCount)
}
}
diff --git a/examples/quick/imageelements/image.qml b/examples/quick/imageelements/image.qml
index 1deaa9827d..11acb51054 100644
--- a/examples/quick/imageelements/image.qml
+++ b/examples/quick/imageelements/image.qml
@@ -1,12 +1,15 @@
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+pragma ComponentBehavior: Bound
import QtQuick
Rectangle {
width: 320
height: 480
Grid {
+ id: grid
+
property int cellWidth: (width - (spacing * (columns - 1))) / columns
property int cellHeight: (height - (spacing * (rows - 1))) / rows
@@ -18,8 +21,8 @@ Rectangle {
spacing: 30
component SizedImageCell: ImageCell {
- width: parent.cellWidth
- height: parent.cellHeight
+ width: grid.cellWidth
+ height: grid.cellHeight
}
SizedImageCell {
diff --git a/examples/quick/imageelements/imageelements.qml b/examples/quick/imageelements/imageelements.qml
index e50362be5f..3470a30879 100644
--- a/examples/quick/imageelements/imageelements.qml
+++ b/examples/quick/imageelements/imageelements.qml
@@ -9,16 +9,17 @@ Item {
width: 320
Shared.LauncherList {
id: ll
+
anchors.fill: parent
Component.onCompleted: {
- 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("AnimatedImage", "An image which plays animated formats", Qt.resolvedUrl("animatedimage.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"));
- addExample("FrameStepping", "A multi-frame non-animated image", Qt.resolvedUrl("framestepping.qml"));
- addExample("MultiBorderImage", "A multi-frame image with scaled borders", Qt.resolvedUrl("multiframeborderimage.qml"));
+ addExample(qsTr("BorderImage"), qsTr("An image with scaled borders"), Qt.resolvedUrl("borderimage.qml"))
+ addExample(qsTr("Image"), qsTr("A showcase of the options available to Image"), Qt.resolvedUrl("image.qml"))
+ addExample(qsTr("Shadows"), qsTr("Rectangles with a drop-shadow effect"), Qt.resolvedUrl("shadows.qml"))
+ addExample(qsTr("AnimatedImage"), qsTr("An image which plays animated formats"), Qt.resolvedUrl("animatedimage.qml"))
+ addExample(qsTr("AnimatedSprite"), qsTr("A simple sprite-based animation"), Qt.resolvedUrl("animatedsprite.qml"))
+ addExample(qsTr("SpriteSequence"), qsTr("A sprite-based animation with complex transitions"), Qt.resolvedUrl("spritesequence.qml"))
+ addExample(qsTr("FrameStepping"), qsTr("A multi-frame non-animated image"), Qt.resolvedUrl("framestepping.qml"))
+ addExample(qsTr("MultiBorderImage"), qsTr("A multi-frame image with scaled borders"), Qt.resolvedUrl("multiframeborderimage.qml"))
}
}
}
diff --git a/examples/quick/imageelements/multiframeborderimage.qml b/examples/quick/imageelements/multiframeborderimage.qml
index fd4e2ba190..b5e76ae976 100644
--- a/examples/quick/imageelements/multiframeborderimage.qml
+++ b/examples/quick/imageelements/multiframeborderimage.qml
@@ -9,11 +9,17 @@ Rectangle {
height: 320
BorderImage {
id: img
+
anchors.fill: parent
anchors.margins: 6
cache: true
source: "pics/multi.ico"
- border { left: 19; top: 19; right: 19; bottom: 19 }
+ border {
+ left: 19
+ top: 19
+ right: 19
+ bottom: 19
+ }
horizontalTileMode: BorderImage.Stretch
Shortcut {
diff --git a/examples/quick/imageelements/shadows.qml b/examples/quick/imageelements/shadows.qml
index db78f04e98..3f345a3937 100644
--- a/examples/quick/imageelements/shadows.qml
+++ b/examples/quick/imageelements/shadows.qml
@@ -6,21 +6,28 @@ import QtQuick
Rectangle {
id: window
- width: 480; height: 320
+ width: 480
+ height: 320
color: "gray"
ShadowRectangle {
- anchors.centerIn: parent; width: 250; height: 250
+ anchors.centerIn: parent
+ width: 250
+ height: 250
color: "lightsteelblue"
}
ShadowRectangle {
- anchors.centerIn: parent; width: 200; height: 200
+ anchors.centerIn: parent
+ width: 200
+ height: 200
color: "steelblue"
}
ShadowRectangle {
- anchors.centerIn: parent; width: 150; height: 150
+ anchors.centerIn: parent
+ width: 150
+ height: 150
color: "thistle"
}
}
diff --git a/examples/quick/imageelements/spritesequence.qml b/examples/quick/imageelements/spritesequence.qml
index 6cd97dee74..d578700195 100644
--- a/examples/quick/imageelements/spritesequence.qml
+++ b/examples/quick/imageelements/spritesequence.qml
@@ -6,20 +6,36 @@ Item {
width: 320
height: 480
MouseArea {
- onClicked: anim.start();
+ onClicked: anim.start()
anchors.fill: parent
}
//! [animation]
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 }
+
+ 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
+ }
}
//! [animation]
SpriteSequence {
id: image
+
width: 256
height: 256
anchors.horizontalCenter: parent.horizontalCenter
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-25 15:37:12 +0000