<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- photosurface.qdoc -->
<title>Qt Quick Demo - Photo Surface | Qt 5.12</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td ><a href="index.html">Qt 5.12</a></td><td >Qt Quick Demo - Photo Surface</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.12.6 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#creating-the-main-window">Creating the Main Window</a></li>
<li class="level1"><a href="#accessing-folder-contents">Accessing Folder Contents</a></li>
<li class="level1"><a href="#displaying-images-on-the-photo-surface">Displaying Images on the Photo Surface</a></li>
<li class="level1"><a href="#handling-pinch-gestures">Handling Pinch Gestures</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Demo - Photo Surface</h1>
<span class="subtitle"></span>
<!-- $$$demos/photosurface-brief -->
<p>A QML app for touch devices that uses a Repeater with a FolderListModel to access content in a folder, and a PinchArea that contains a MouseArea to handle pinch gestures on the fetched content.</p>
<!-- @@@demos/photosurface -->
<!-- $$$demos/photosurface-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qtquick-demo-photosurface-small.png" alt="" /></p><p><i>Photo Surface</i> demonstrates how to use a Repeater with a FolderListModel and a FileDialog to access images from a folder selected by a user and how to handle dragging, rotation and pinch zooming within the same item using a PinchArea that contains a MouseArea.</p>
<p>All the app code is contained in one QML file, photosurface.qml. Inline JavaScript code is used to place, rotate, and scale images on the photo surface.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from <a href="http://doc.qt.io/qtcreator/index.html">Qt Creator</a>, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit <a href="http://doc.qt.io/qtcreator/creator-build-example-application.html">Building and Running an Example</a>.</p>
<a name="creating-the-main-window"></a>
<h2 id="creating-the-main-window">Creating the Main Window</h2>
<p>To create the main window for the Photo Surface app, we use the Window QML type as the root item. It automatically sets up the window for use with Qt Quick graphical types:</p>
<pre class="cpp">
Window {
id: root
visible: true
width: 1024; height: 600
color: "black"
property int highestZ: 0
property real defaultSize: 200
property var currentFrame: undefined
</pre>
<p>To use the Window type, we must import it:</p>
<pre class="cpp">
import <span class="type">QtQuick</span><span class="operator">.</span>Window <span class="number">2.1</span>
</pre>
<a name="accessing-folder-contents"></a>
<h2 id="accessing-folder-contents">Accessing Folder Contents</h2>
<p>We use a Repeater QML type together with the FolderListModel to display GIF, JPG, and PNG images located in a folder:</p>
<pre class="cpp">
Repeater {
model: FolderListModel {
id: folderModel
objectName: "folderModel"
showDirs: false
nameFilters: imageNameFilters
}
</pre>
<p>To use the FolderListModel type, we must import it:</p>
<pre class="cpp">
import <span class="type">Qt</span><span class="operator">.</span>labs<span class="operator">.</span>folderlistmodel <span class="number">1.0</span>
</pre>
<p>We use a FileDialog to enable users to select the folder that contains the images:</p>
<pre class="cpp">
FileDialog {
id: fileDialog
title: "Choose a folder with some images"
selectFolder: true
folder: picturesLocation
onAccepted: folderModel.folder = fileUrl + "/"
}
</pre>
<p>To use the FileDialog type, we must import Qt Quick Dialogs:</p>
<pre class="cpp">
import <span class="type">QtQuick</span><span class="operator">.</span>Dialogs <span class="number">1.0</span>
</pre>
<p>We use the <code>fileDialog.open()</code> function to open the file dialog when the app starts:</p>
<pre class="cpp">
Component<span class="operator">.</span>onCompleted: fileDialog<span class="operator">.</span>open()
</pre>
<p>Users can also click the file dialog icon to open the file dialog. We use an Image QML type to display the icon. Inside the Image type, we use a MouseArea with the <code>onClicked</code> signal handler to call the <code>fileDialog.open()</code> function:</p>
<pre class="cpp">
Image {
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: 10
source: "resources/folder.png"
MouseArea {
anchors.fill: parent
anchors.margins: -10
onClicked: fileDialog.open()
hoverEnabled: true
onPositionChanged: {
tooltip.visible = false
hoverTimer.start()
}
onExited: {
tooltip.visible = false
hoverTimer.stop()
}
</pre>
<a name="displaying-images-on-the-photo-surface"></a>
<h2 id="displaying-images-on-the-photo-surface">Displaying Images on the Photo Surface</h2>
<p>We use a Rectangle as a delegate for a Repeater to provide a frame for each image that the FolderListModel finds in the selected folder. We use JavaScript <code>Math()</code> methods to place the frames randomly on the photo surface and to rotate them at random angles, as well as to scale the images:</p>
<pre class="cpp">
Rectangle {
id: photoFrame
width: image.width * (1 + 0.10 * image.height / image.width)
height: image.height * 1.10
scale: defaultSize / Math.max(image.sourceSize.width, image.sourceSize.height)
Behavior on scale { NumberAnimation { duration: 200 } }
Behavior on x { NumberAnimation { duration: 200 } }
Behavior on y { NumberAnimation { duration: 200 } }
border.color: "black"
border.width: 2
smooth: true
antialiasing: true
Component.onCompleted: {
x = Math.random() * root.width - width / 2
y = Math.random() * root.height - height / 2
rotation = Math.random() * 13 - 6
}
</pre>
<a name="handling-pinch-gestures"></a>
<h2 id="handling-pinch-gestures">Handling Pinch Gestures</h2>
<p>We use a PinchArea that contains a MouseArea in the photo frames to handle dragging, rotation and pinch zooming of the frame:</p>
<pre class="cpp">
PinchArea {
anchors.fill: parent
pinch.target: photoFrame
pinch.minimumRotation: -360
pinch.maximumRotation: 360
pinch.minimumScale: 0.1
pinch.maximumScale: 10
pinch.dragAxis: Pinch.XAndYAxis
onPinchStarted: setFrameColor();
</pre>
<p>We use the <code>pinch</code> group property to control how the photo frames react to pinch gestures. The <code>pinch.target</code> sets <code>photoFrame</code> as the item to manipulate. The rotation properties specify that the frames can be rotated at all angles and the scale properties specify that they can be scaled between <code>0.1</code> and <code>10</code>.</p>
<p>In the MouseArea's <code>onPressed</code> signal handler, we raise the selected photo frame to the top by increasing the value of its <code>z</code> property. The root item stores the z value of the top-most frame. The border color of the photo frame is controlled in the <code>onEntered</code> signal handler to highlight the selected image:</p>
<pre class="cpp">
MouseArea {
id: dragArea
hoverEnabled: true
anchors.fill: parent
drag.target: photoFrame
scrollGestureEnabled: false // 2-finger-flick gesture should pass through to the Flickable
onPressed: {
photoFrame.z = ++root.highestZ;
parent.setFrameColor();
}
onEntered: parent.setFrameColor();
</pre>
<p>To enable you to test the example on the desktop, we use the MouseArea's <code>onWheel</code> signal handler to simulate pinch gestures by using a mouse:</p>
<pre class="cpp">
onWheel: {
if (wheel.modifiers & Qt.ControlModifier) {
photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
if (Math.abs(photoFrame.rotation) < 4)
photoFrame.rotation = 0;
} else {
photoFrame.rotation += wheel.angleDelta.x / 120;
if (Math.abs(photoFrame.rotation) < 0.6)
photoFrame.rotation = 0;
var scaleBefore = photoFrame.scale;
photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
}
}
</pre>
<p>The <code>onWheel</code> signal handler is called in response to mouse wheel gestures. Use the vertical wheel to zoom and Ctrl and the vertical wheel to rotate frames. If the mouse has a horizontal wheel, use it to rotate frames.</p>
<p>Files:</p>
<ul>
<li><a href="qtdoc-demos-photosurface-main-cpp.html">demos/photosurface/main.cpp</a></li>
<li><a href="qtdoc-demos-photosurface-photosurface-pro.html">demos/photosurface/photosurface.pro</a></li>
<li><a href="qtdoc-demos-photosurface-photosurface-qml.html">demos/photosurface/photosurface.qml</a></li>
<li><a href="qtdoc-demos-photosurface-photosurface-qmlproject.html">demos/photosurface/photosurface.qmlproject</a></li>
<li><a href="qtdoc-demos-photosurface-photosurface-qrc.html">demos/photosurface/photosurface.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/demos/photosurface/resources/folder.png">demos/photosurface/resources/folder.png</a></li>
<li><a href="images/used-in-examples/demos/photosurface/resources/icon.png">demos/photosurface/resources/icon.png</a></li>
</ul>
</div>
<p><b>See also </b><a href="qmlapplications.html">QML Applications</a>.</p>
<!-- @@@demos/photosurface -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-updates
>
by-pkgid
>
bdbbdfc3f538bf93bb0eb988a7a43005
>
files
>
483
