/usr/share/qt5/doc/qtquick/qtquick-touchinteraction-example.html is in qtdeclarative5-doc-html 5.2.1-3ubuntu15.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- touchinteraction.qdoc -->
<title>Qt Quick Examples - Touch Interaction | QtQuick 5.2</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.2</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Qt Quick Examples - Touch Interaction</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<h1 class="title">Qt Quick Examples - Touch Interaction</h1>
<span class="subtitle"></span>
<!-- $$$touchinteraction-description -->
<div class="descr"> <a name="details"></a>
<p>This is a collection of QML Touch Interaction examples.<p class="centerAlign"><img src="images/qml-touchinteraction-example.png" alt="" /></p><p>This is a collection of small QML examples relating to touch interaction methods.</p>
<p>Multipoint Flames demonstrates distinguishing different fingers in a <a href="qml-qtquick-multipointtoucharea.html">MultiPointTouchArea</a>, by assigning a different colored flame to each touch point. The <a href="qml-qtquick-multipointtoucharea.html">MultipointTouchArea</a> sets up multiple touch points:</p>
<pre class="qml"> <span class="type"><a href="qml-qtquick-multipointtoucharea.html">MultiPointTouchArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">minimumTouchPoints</span>: <span class="number">1</span>
<span class="name">maximumTouchPoints</span>: <span class="number">5</span>
<span class="name">touchPoints</span>: [
<span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> { <span class="name">id</span>: <span class="name">touch1</span> },
<span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> { <span class="name">id</span>: <span class="name">touch2</span> },
<span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> { <span class="name">id</span>: <span class="name">touch11</span> },
<span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> { <span class="name">id</span>: <span class="name">touch21</span> },
<span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> { <span class="name">id</span>: <span class="name">touch31</span> }
]
}</pre>
<p>The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:</p>
<pre class="qml"> <span class="type">ParticleFlame</span> {
<span class="name">color</span>: <span class="string">"red"</span>
<span class="name">emitterX</span>: <span class="name">touch1</span>.<span class="name">x</span>
<span class="name">emitterY</span>: <span class="name">touch1</span>.<span class="name">y</span>
<span class="name">emitting</span>: <span class="name">touch1</span>.<span class="name">pressed</span>
}</pre>
<p>Bear-Whack demonstrates using a <a href="qml-qtquick-multipointtoucharea.html">MultiPointTouchArea</a> to add multiple finger support to a simple game. The interaction with the game is done through a <a href="qml-qtquick-particles-spritegoal.html">SpriteGoal</a> that follows the <a href="qml-qtquick-touchpoint.html">TouchPoint</a>. The TouchPoints added to the <a href="qml-qtquick-multipointtoucharea.html">MultiPointTouchArea</a> are a component with all this logic embedded into it:</p>
<pre class="qml"><span class="type"><a href="qml-qtquick-touchpoint.html">TouchPoint</a></span> {
<span class="name">id</span>: <span class="name">container</span>
property <span class="type"><a href="qml-qtquick-particles-particlesystem.html">ParticleSystem</a></span> <span class="name">system</span>
<span class="name">onPressedChanged</span>: {
<span class="keyword">if</span> (<span class="name">pressed</span>) {
<span class="name">timer</span>.<span class="name">restart</span>();
<span class="name">child</span>.<span class="name">enabled</span> <span class="operator">=</span> <span class="number">true</span>;
<span class="name">system</span>.<span class="name">explode</span>(<span class="name">x</span>,<span class="name">y</span>);
}
}
property <span class="type">QtObject</span> <span class="name">obj</span>: <span class="name">Timer</span> {
<span class="name">id</span>: <span class="name">timer</span>
<span class="name">interval</span>: <span class="number">100</span>
<span class="name">running</span>: <span class="number">false</span>
<span class="name">repeat</span>: <span class="number">false</span>
<span class="name">onTriggered</span>: <span class="name">child</span>.<span class="name">enabled</span> <span class="operator">=</span> <span class="number">false</span>
}
property <span class="type"><a href="qml-qtquick-item.html">Item</a></span> <span class="name">child</span>: <span class="name">SpriteGoal</span> {
<span class="name">enabled</span>: <span class="number">false</span>
<span class="name">x</span>: <span class="name">container</span>.<span class="name">area</span>.<span class="name">x</span> <span class="operator">-</span> <span class="number">16</span>
<span class="name">y</span>: <span class="name">container</span>.<span class="name">area</span>.<span class="name">y</span> <span class="operator">-</span> <span class="number">16</span>
<span class="name">width</span>: <span class="name">container</span>.<span class="name">area</span>.<span class="name">width</span> <span class="operator">+</span> <span class="number">32</span>
<span class="name">height</span>: <span class="name">container</span>.<span class="name">area</span>.<span class="name">height</span> <span class="operator">+</span> <span class="number">32</span> <span class="comment">//+32 so it doesn't have to hit the exact center</span>
<span class="name">system</span>: <span class="name">container</span>.<span class="name">system</span>
<span class="name">parent</span>: <span class="name">container</span>.<span class="name">system</span>
<span class="name">goalState</span>: <span class="string">"falling"</span>
}
}</pre>
<p>Flick Resize uses a <a href="qml-qtquick-pincharea.html">PinchArea</a> to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the <a href="qml-qtquick-pincharea.html">PinchArea</a> signals and responding to user input.</p>
<pre class="qml"><span class="name">onPinchStarted</span>: {
<span class="name">initialWidth</span> <span class="operator">=</span> <span class="name">flick</span>.<span class="name">contentWidth</span>
<span class="name">initialHeight</span> <span class="operator">=</span> <span class="name">flick</span>.<span class="name">contentHeight</span>
}
<span class="name">onPinchUpdated</span>: {
<span class="comment">// adjust content pos due to drag</span>
<span class="name">flick</span>.<span class="name">contentX</span> <span class="operator">+=</span> <span class="name">pinch</span>.<span class="name">previousCenter</span>.<span class="name">x</span> <span class="operator">-</span> <span class="name">pinch</span>.<span class="name">center</span>.<span class="name">x</span>
<span class="name">flick</span>.<span class="name">contentY</span> <span class="operator">+=</span> <span class="name">pinch</span>.<span class="name">previousCenter</span>.<span class="name">y</span> <span class="operator">-</span> <span class="name">pinch</span>.<span class="name">center</span>.<span class="name">y</span>
<span class="comment">// resize content</span>
<span class="name">flick</span>.<span class="name">resizeContent</span>(<span class="name">initialWidth</span> <span class="operator">*</span> <span class="name">pinch</span>.<span class="name">scale</span>, <span class="name">initialHeight</span> <span class="operator">*</span> <span class="name">pinch</span>.<span class="name">scale</span>, <span class="name">pinch</span>.<span class="name">center</span>)
}
<span class="name">onPinchFinished</span>: {
<span class="comment">// Move its content within bounds.</span>
<span class="name">flick</span>.<span class="name">returnToBounds</span>()
}</pre>
<p>Flickable is a simple example demonstrating the Flickable type. The object inside the flickable is very big, but the flickable itself is very small:</p>
<pre class="qml"><span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
<span class="type"><a href="qml-qtquick-flickable.html">Flickable</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">contentWidth</span>: <span class="number">1200</span>
<span class="name">contentHeight</span>: <span class="number">1200</span>
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">1000</span>
<span class="name">height</span>: <span class="number">1000</span></pre>
<p>Corkboards shows a more complex Flickable usecase, with types on the flickable that respond to mouse and keyboard interaction. This doesn't require special code, the Qt Quick types automatically cooperate with Flickable for accepting the touch events.</p>
<p>Files:</p>
<ul>
<li><a href="qtquick-touchinteraction-touchinteraction-qml.html">touchinteraction/touchinteraction.qml</a></li>
<li><a href="qtquick-touchinteraction-flickable-basic-flickable-qml.html">touchinteraction/flickable/basic-flickable.qml</a></li>
<li><a href="qtquick-touchinteraction-flickable-corkboards-qml.html">touchinteraction/flickable/corkboards.qml</a></li>
<li><a href="qtquick-touchinteraction-flickable-content-panel-qml.html">touchinteraction/flickable/content/Panel.qml</a></li>
<li><a href="qtquick-touchinteraction-multipointtouch-bearwhack-qml.html">touchinteraction/multipointtouch/bearwhack.qml</a></li>
<li><a href="qtquick-touchinteraction-multipointtouch-multiflame-qml.html">touchinteraction/multipointtouch/multiflame.qml</a></li>
<li><a href="qtquick-touchinteraction-multipointtouch-content-augmentedtouchpoint-qml.html">touchinteraction/multipointtouch/content/AugmentedTouchPoint.qml</a></li>
<li><a href="qtquick-touchinteraction-multipointtouch-content-bearwhackparticlesystem-qml.html">touchinteraction/multipointtouch/content/BearWhackParticleSystem.qml</a></li>
<li><a href="qtquick-touchinteraction-multipointtouch-content-particleflame-qml.html">touchinteraction/multipointtouch/content/ParticleFlame.qml</a></li>
<li><a href="qtquick-touchinteraction-pincharea-flickresize-qml.html">touchinteraction/pincharea/flickresize.qml</a></li>
<li><a href="qtquick-touchinteraction-main-cpp.html">touchinteraction/main.cpp</a></li>
<li><a href="qtquick-touchinteraction-touchinteraction-pro.html">touchinteraction/touchinteraction.pro</a></li>
<li><a href="qtquick-touchinteraction-touchinteraction-qmlproject.html">touchinteraction/touchinteraction.qmlproject</a></li>
<li><a href="qtquick-touchinteraction-touchinteraction-qrc.html">touchinteraction/touchinteraction.qrc</a></li>
</ul>
</div>
<!-- @@@touchinteraction -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. 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> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|