<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- imagegestures.qdoc -->
<title>Image Gestures Example | Qt Widgets 5.9</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 >Qt 5.9</td><td ><a href="qtwidgets-index.html">Qt Widgets</a></td><td >Image Gestures Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 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="#imagewidget-class-definition">ImageWidget Class Definition</a></li>
<li class="level1"><a href="#imagewidget-class-implementation">ImageWidget Class Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Image Gestures Example</h1>
<span class="subtitle"></span>
<!-- $$$gestures/imagegestures-description -->
<div class="descr"> <a name="details"></a>
<p>This example shows how to enable gestures for a widget and use gesture input to perform actions.</p>
<p class="centerAlign"><img src="images/imagegestures-example.jpg" alt="" /></p><p>We use two classes to create the user interface for the application: <code>MainWidget</code> and <code>ImageWidget</code>. The <code>MainWidget</code> class is simply used as a container for the <code>ImageWidget</code> class, which we will configure to accept gesture input. Since we are interested in the way gestures are used, we will concentrate on the implementation of the <code>ImageWidget</code> class.</p>
<a name="imagewidget-class-definition"></a>
<h2 id="imagewidget-class-definition">ImageWidget Class Definition</h2>
<p>The <code>ImageWidget</code> class is a simple <a href="qwidget.html">QWidget</a> subclass that reimplements the general <a href="qwidget.html#event">QWidget::event</a>() handler function in addition to several more specific event handlers:</p>
<pre class="cpp">
<span class="keyword">class</span> ImageWidget : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
ImageWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type">void</span> openDirectory(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qstring.html">QString</a></span> <span class="operator">&</span>path);
<span class="type">void</span> grabGestures(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>GestureType<span class="operator">></span> <span class="operator">&</span>gestures);
<span class="keyword">protected</span>:
bool event(<span class="type"><a href="../qtcore/qevent.html">QEvent</a></span> <span class="operator">*</span>event) override;
<span class="type">void</span> paintEvent(<span class="type"><a href="../qtgui/qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event) override;
<span class="type">void</span> resizeEvent(<span class="type"><a href="../qtgui/qresizeevent.html">QResizeEvent</a></span> <span class="operator">*</span>event) override;
<span class="type">void</span> mouseDoubleClickEvent(<span class="type"><a href="../qtgui/qmouseevent.html">QMouseEvent</a></span> <span class="operator">*</span>event) override;
<span class="keyword">private</span>:
bool gestureEvent(<span class="type"><a href="qgestureevent.html">QGestureEvent</a></span> <span class="operator">*</span>event);
<span class="type">void</span> panTriggered(<span class="type"><a href="qpangesture.html">QPanGesture</a></span><span class="operator">*</span>);
<span class="type">void</span> pinchTriggered(<span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span><span class="operator">*</span>);
<span class="type">void</span> swipeTriggered(<span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span><span class="operator">*</span>);
...
};
</pre>
<p>We also implement a private helper function, <code>gestureEvent()</code>, to help manage gesture events delivered to the widget, and three functions to perform actions based on gestures: <code>panTriggered()</code>, <code>pinchTriggered()</code> and <code>swipeTriggered()</code>.</p>
<a name="imagewidget-class-implementation"></a>
<h2 id="imagewidget-class-implementation">ImageWidget Class Implementation</h2>
<p>In the widget's constructor, we begin by setting up various parameters that will be used to control the way images are displayed.</p>
<pre class="cpp">
ImageWidget<span class="operator">::</span>ImageWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)<span class="operator">,</span>
position(<span class="number">0</span>)<span class="operator">,</span>
horizontalOffset(<span class="number">0</span>)<span class="operator">,</span>
verticalOffset(<span class="number">0</span>)<span class="operator">,</span>
rotationAngle(<span class="number">0</span>)<span class="operator">,</span>
scaleFactor(<span class="number">1</span>)<span class="operator">,</span>
currentStepScaleFactor(<span class="number">1</span>)
{
setMinimumSize(<span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(<span class="number">100</span><span class="operator">,</span><span class="number">100</span>));
}
</pre>
<p>We enable three of the standard gestures for the widget by calling <a href="qwidget.html#grabGesture">QWidget::grabGesture</a>() with the types of gesture we need. These will be recognized by the application's default gesture recognizer, and events will be delivered to our widget.</p>
<p>Since <a href="qwidget.html">QWidget</a> does not define a specific event handler for gestures, the widget needs to reimplement the general <a href="qwidget.html#event">QWidget::event</a>() to receive gesture events.</p>
<pre class="cpp">
bool ImageWidget<span class="operator">::</span>event(<span class="type"><a href="../qtcore/qevent.html">QEvent</a></span> <span class="operator">*</span>event)
{
<span class="keyword">if</span> (event<span class="operator">-</span><span class="operator">></span>type() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qevent.html">QEvent</a></span><span class="operator">::</span>Gesture)
<span class="keyword">return</span> gestureEvent(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qgestureevent.html">QGestureEvent</a></span><span class="operator">*</span><span class="operator">></span>(event));
<span class="keyword">return</span> <span class="type"><a href="qwidget.html">QWidget</a></span><span class="operator">::</span>event(event);
}
</pre>
<p>We implement the event handler to delegate gesture events to a private function specifically written for the task, and pass all other events to <a href="qwidget.html">QWidget</a>'s implementation.</p>
<p>The <code>gestureHandler()</code> function examines the gestures supplied by the newly-delivered <a href="qgestureevent.html">QGestureEvent</a>. Since only one gesture of a given type can be used on a widget at any particular time, we can check for each gesture type using the <a href="qgestureevent.html#gesture">QGestureEvent::gesture</a>() function:</p>
<pre class="cpp">
bool ImageWidget<span class="operator">::</span>gestureEvent(<span class="type"><a href="qgestureevent.html">QGestureEvent</a></span> <span class="operator">*</span>event)
{
qCDebug(lcExample) <span class="operator"><</span><span class="operator"><</span> <span class="string">"gestureEvent():"</span> <span class="operator"><</span><span class="operator"><</span> event;
<span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>swipe <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>SwipeGesture))
swipeTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qswipegesture.html">QSwipeGesture</a></span> <span class="operator">*</span><span class="operator">></span>(swipe));
<span class="keyword">else</span> <span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>pan <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PanGesture))
panTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qpangesture.html">QPanGesture</a></span> <span class="operator">*</span><span class="operator">></span>(pan));
<span class="keyword">if</span> (<span class="type"><a href="qgesture.html">QGesture</a></span> <span class="operator">*</span>pinch <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>gesture(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PinchGesture))
pinchTriggered(<span class="keyword">static_cast</span><span class="operator"><</span><span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span> <span class="operator">*</span><span class="operator">></span>(pinch));
<span class="keyword">return</span> <span class="keyword">true</span>;
}
</pre>
<p>If a <a href="qgesture.html">QGesture</a> object is supplied for a certain type of gesture, we call a special purpose function to deal with it, casting the gesture object to the appropriate <a href="qgesture.html">QGesture</a> subclass.</p>
<p>To illustrate how a standard gesture can be interpreted by an application, we show the implementation of the <code>pinchTriggered()</code> function, which handles the pinch gesture when the user moves two fingers around on the display or input device:</p>
<pre class="cpp">
<span class="type">void</span> ImageWidget<span class="operator">::</span>pinchTriggered(<span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span> <span class="operator">*</span>gesture)
{
<span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span><span class="operator">::</span>ChangeFlags changeFlags <span class="operator">=</span> gesture<span class="operator">-</span><span class="operator">></span>changeFlags();
<span class="keyword">if</span> (changeFlags <span class="operator">&</span> <span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span><span class="operator">::</span>RotationAngleChanged) {
<span class="type"><a href="../qtcore/qtglobal.html#qreal-typedef">qreal</a></span> rotationDelta <span class="operator">=</span> gesture<span class="operator">-</span><span class="operator">></span>rotationAngle() <span class="operator">-</span> gesture<span class="operator">-</span><span class="operator">></span>lastRotationAngle();
rotationAngle <span class="operator">+</span><span class="operator">=</span> rotationDelta;
qCDebug(lcExample) <span class="operator"><</span><span class="operator"><</span> <span class="string">"pinchTriggered(): rotate by"</span> <span class="operator"><</span><span class="operator"><</span>
rotationDelta <span class="operator"><</span><span class="operator"><</span> <span class="string">"->"</span> <span class="operator"><</span><span class="operator"><</span> rotationAngle;
}
<span class="keyword">if</span> (changeFlags <span class="operator">&</span> <span class="type"><a href="qpinchgesture.html">QPinchGesture</a></span><span class="operator">::</span>ScaleFactorChanged) {
currentStepScaleFactor <span class="operator">=</span> gesture<span class="operator">-</span><span class="operator">></span>totalScaleFactor();
qCDebug(lcExample) <span class="operator"><</span><span class="operator"><</span> <span class="string">"pinchTriggered(): zoom by"</span> <span class="operator"><</span><span class="operator"><</span>
gesture<span class="operator">-</span><span class="operator">></span>scaleFactor() <span class="operator"><</span><span class="operator"><</span> <span class="string">"->"</span> <span class="operator"><</span><span class="operator"><</span> currentStepScaleFactor;
}
<span class="keyword">if</span> (gesture<span class="operator">-</span><span class="operator">></span>state() <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>GestureFinished) {
scaleFactor <span class="operator">*</span><span class="operator">=</span> currentStepScaleFactor;
currentStepScaleFactor <span class="operator">=</span> <span class="number">1</span>;
}
update();
}
</pre>
<p>The <a href="qpinchgesture.html">QPinchGesture</a> class provides properties to interpret the changing distance between the two touch points as a zoom factor, and the angle delta as a rotation to be applied to the image. The center point between the touch points could be used to drag the image, but in this example we use the pan gesture for that purpose.</p>
<p>The <code>scaleFactor()</code> is a relative value representing how much the zoom should change from one event to the next, whereas <code>totalScaleFactor()</code> provides the amount of zoom that has been expressed since the gesture began. When the touch points are released and another gesture begins, <code>totalScaleFactor()</code> will begin again at 1.0. In this case we store <code>totalScaleFactor()</code> into the <code>currentStepScaleFactor</code> variable so that it can be used in <code>paintEvent()</code> to scale the image. Alternatively it would be possible to simply multiply the stored total scale factor by <code>scaleFactor()</code> here in the pinch handler.</p>
<p>In contrast, <code>rotationAngle()</code> represents the amount of rotation since the pinch gesture began, while <code>lastRotationAngle()</code> provides the previous value. So it is necessary to subtract in order to get an incremental delta. When the user begins a new pinch gesture, <code>rotationAngle()</code> will start from zero, and we want the image to begin to rotate from its current angle. This is achieved by adding the delta to the stored <code>rotationAngle</code> (which will be applied in <code>paintEvent()</code>). If we simply assigned <code>totalRotationAngle()</code> to the stored <code>rotationAngle</code>, a new gesture would cause the image to reset to a right-side-up orientation before beginning to rotate again. But it would be possible to store the rotation angle since the gesture began and add it to <code>rotationAngle</code> in <code>paintEvent()</code>, just as we store the amount of zoom since the gesture began.</p>
<p>The pan and swipe gestures in this example are also handled in separate functions, and use the values of properties from the <a href="qgesture.html">QGesture</a> objects passed to them.</p>
<pre class="cpp">
<span class="type">void</span> ImageWidget<span class="operator">::</span>paintEvent(<span class="type"><a href="../qtgui/qpaintevent.html">QPaintEvent</a></span><span class="operator">*</span>)
{
<span class="type"><a href="../qtgui/qpainter.html">QPainter</a></span> p(<span class="keyword">this</span>);
<span class="keyword">const</span> <span class="type"><a href="../qtcore/qtglobal.html#qreal-typedef">qreal</a></span> iw <span class="operator">=</span> currentImage<span class="operator">.</span>width();
<span class="keyword">const</span> <span class="type"><a href="../qtcore/qtglobal.html#qreal-typedef">qreal</a></span> ih <span class="operator">=</span> currentImage<span class="operator">.</span>height();
<span class="keyword">const</span> <span class="type"><a href="../qtcore/qtglobal.html#qreal-typedef">qreal</a></span> wh <span class="operator">=</span> height();
<span class="keyword">const</span> <span class="type"><a href="../qtcore/qtglobal.html#qreal-typedef">qreal</a></span> ww <span class="operator">=</span> width();
p<span class="operator">.</span>translate(ww<span class="operator">/</span><span class="number">2</span><span class="operator">,</span> wh<span class="operator">/</span><span class="number">2</span>);
p<span class="operator">.</span>translate(horizontalOffset<span class="operator">,</span> verticalOffset);
p<span class="operator">.</span>rotate(rotationAngle);
p<span class="operator">.</span>scale(currentStepScaleFactor <span class="operator">*</span> scaleFactor<span class="operator">,</span> currentStepScaleFactor <span class="operator">*</span> scaleFactor);
p<span class="operator">.</span>translate(<span class="operator">-</span>iw<span class="operator">/</span><span class="number">2</span><span class="operator">,</span> <span class="operator">-</span>ih<span class="operator">/</span><span class="number">2</span>);
p<span class="operator">.</span>drawImage(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> currentImage);
}
</pre>
<p>In <code>paintEvent()</code>, scaleFactor represents the zoom level before the pinch gesture began, while currentStepScaleFactor represents the additional zoom factor while a pinch gesture is in progress. But for rotation, only the current rotationAngle is stored. The horizontal and vertical offsets represent the distance that the image has been dragged by the pan gesture.</p>
<p>Files:</p>
<ul>
<li><a href="qtwidgets-gestures-imagegestures-imagewidget-cpp.html">gestures/imagegestures/imagewidget.cpp</a></li>
<li><a href="qtwidgets-gestures-imagegestures-imagewidget-h.html">gestures/imagegestures/imagewidget.h</a></li>
<li><a href="qtwidgets-gestures-imagegestures-mainwidget-cpp.html">gestures/imagegestures/mainwidget.cpp</a></li>
<li><a href="qtwidgets-gestures-imagegestures-mainwidget-h.html">gestures/imagegestures/mainwidget.h</a></li>
<li><a href="qtwidgets-gestures-imagegestures-main-cpp.html">gestures/imagegestures/main.cpp</a></li>
<li><a href="qtwidgets-gestures-imagegestures-imagegestures-pro.html">gestures/imagegestures/imagegestures.pro</a></li>
</ul>
</div>
<!-- @@@gestures/imagegestures -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 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
>
6
>
armv5tl
>
media
>
core-updates
>
by-pkgid
>
768f7d9f703884aa2562bf0a651086df
>
files
>
3823
