1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\title Photo Surface
\ingroup qtquickdemos
\example demos/photosurface
\brief A QML app for touch devices that uses a Repeater with a
FolderListModel to access content in a folder, and a PinchHandler
to handle pinch gestures on the fetched content.
\image qtquick-demo-photosurface-small.png
\meta {tag} {quick,touch}
\meta {category} {Application Examples}
\e{Photo Surface} demonstrates how to use a \l{Repeater} with a
\l FolderListModel and a \l FolderDialog to access images from a folder selected
by a user, and how to handle dragging, rotation and pinch zooming within the
same item using \l {Qt Quick Input Handlers}.
All the app code is contained in one QML file, \c photosurface.qml. Inline
JavaScript code is used to place, rotate, and scale images on the photo
surface.
\include examples-run.qdocinc
\section1 Creating the Main Window
To create the main window for the Photo Surface app, we use the \l{Window}
QML type as the root item. It automatically sets up the window for use with
\l{Qt Quick} graphical types:
\quotefromfile demos/photosurface/photosurface.qml
\skipto Window {
\printuntil imageNameFilters
\section1 Accessing Folder Contents
We use a \l{Repeater} QML type together with the \l FolderListModel to display
at least the GIF, JPG, and PNG images located in a folder (although main.cpp
may expand the list of supported image types):
\quotefromfile demos/photosurface/photosurface.qml
\skipto Repeater
\printuntil }
To use the FolderListModel type, we must import it:
\code
import Qt.labs.folderlistmodel
\endcode
We use a FolderDialog to enable users to select the folder that contains
the images:
\quotefromfile demos/photosurface/photosurface.qml
\skipto FolderDialog
\printuntil }
To use the FolderDialog type, we add the following import statement:
\code
import QtQuick.Dialogs
\endcode
We use the \c {folderDialog.open()} function to open the file dialog when the
app starts, if a folder path has not already been given as a command-line argument:
\skipto StandardKey.Quit
\skipto Component.onCompleted: {
\printuntil }
Users can also click the folder dialog icon to open it. We use
an \l{Image} QML type to display the icon. Inside the \l{Image} type,
we use a \l TapHandler with the \c onTapped signal handler to call the
\c {folderDialog.open()} function:
\quotefromfile demos/photosurface/photosurface.qml
\skipuntil Image {
\skipto Image {
\printuntil Shortcut {
\printuntil }
\printuntil }
\section1 Displaying Images on the Photo Surface
We use a \l{Rectangle} as a delegate for a \l{Repeater} to provide a frame
for each image that the \l FolderListModel finds in the selected folder. We use
JavaScript \c Math() methods to place the frames randomly on the photo
surface and to rotate them at random angles, as well as to scale the images.
The border color indicates the state of interaction:
\quotefromfile demos/photosurface/photosurface.qml
\skipto Rectangle
\printuntil Image
\printuntil }
\section1 Handling Drag and Pinch Gestures, and the Mouse
We use a \l DragHandler and a \l PinchHandler in each photo frame to
handle dragging, pinch zooming and rotation:
\skipto PinchHandler
\printto HoverHandler
Because the PinchHandler is declared inside the Rectangle, the
\c PinchHandler.target property is implicitly set so that pinch gestures
manipulate the Rectangle. The rotation properties specify that the frames
can be rotated to all angles, and the scale properties specify that they
can be scaled between \c 0.1 and \c 10. The pinch gesture works equally
well on a touchscreen or multi-touch touchpad. Transforming the frame
transforms its contents (the \l Image).
The \c DragHandler.target property is implicitly set as well, so that you
can drag a photo with one finger on a touchscreen or touchpad, or with a
mouse. In the DragHandler's \c onActiveChanged signal handler, we raise the
selected photo frame to the top by increasing the value of its \c z
property (while the shared \c highestZ property holds the largest \c z
value that has been used so far). When dragging ends, we begin an animation
to keep it moving in the same direction for a little while, slowing down
and coming to a stop. If you "fling" a photo past the edge of the surface,
the surface expands to accommodate its new position. You can move around to
view different parts of the surface via the ScrollView that contains the
Repeater and all the photo frames that it populates.
Since you can drag two photos with two fingers via their DragHandlers, and
you can also pinch one PinchHandler with two fingers, and collections of
photos tend to pile on top of each other, we need to adjust
\c grabPermissions so that the PinchHandler has priority: when the pinch
gesture begins, it does not allow the DragHandlers to take over the
touchpoint grabs again.
To make the example more interactive on computers without touch devices, we
add the \l HoverHandler on which the border.color above depends, and two
\l {WheelHandler}{WheelHandlers}. One allows you to hold down the Ctrl key
and use the mouse wheel to twirl the photo around the mouse cursor; with
the other, you can hold down the Shift key and use the mouse wheel to zoom
in or out of the position under the cursor. Both of these also raise the
photo in the same way that the DragHandler above does it:
\skipto HoverHandler
\printuntil }
\printuntil }
\printuntil }
\sa {QML Applications}
*/
|
