File: qml-rotation.html

package info (click to toggle)
qt4-x11 4%3A4.8.2%2Bdfsg-11
  • links: PTS, VCS
  • area: main
  • in suites: wheezy
  • size: 701,696 kB
  • sloc: cpp: 2,686,179; ansic: 375,485; python: 25,859; sh: 19,349; xml: 17,091; perl: 14,765; yacc: 5,383; asm: 5,038; makefile: 1,259; lex: 555; ruby: 526; objc: 347; cs: 112; pascal: 112; php: 54; sed: 34
file content (133 lines) | stat: -rw-r--r-- 10,436 bytes parent folder | download 
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
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<!-- qdeclarativeitem.cpp -->
  <title>Qt 4.8: QML Rotation Element</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="content"> 
    <a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
  </div>
  <div class="breadcrumb toolblock">
    <ul>
      <li class="first"><a href="index.html">Home</a></li>
      <!--  Breadcrumbs go here -->
<li><a href="qdeclarativeelements.html">QML Elements</a></li>
<li>QML Rotation Element</li>
    </ul>
  </div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<h1 class="title">QML Rotation Element</h1>
<span class="subtitle"></span>
<!-- $$$Rotation-brief -->
<p>The Rotation object provides a way to rotate an Item. <a href="#details">More...</a></p>
<!-- @@@Rotation -->
<p>Rotation instantiates the C++ class <a href="qgraphicsrotation.html">QGraphicsRotation</a></p>
<p>This element was introduced in Qt 4.7.</p>
<ul>
<li><a href="qml-rotation-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-rotation.html#angle-prop">angle</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-rotation.html#axis.x-prop">axis.x</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-rotation.html#axis.y-prop">axis.y</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-rotation.html#axis.z-prop">axis.z</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-rotation.html#origin.x-prop">origin.x</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-rotation.html#origin.y-prop">origin.y</a></b></b> : real</li>
</ul>
<!-- $$$Rotation-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>The Rotation object gives more control over rotation than using <a href="qml-item.html">Item</a>'s <a href="qml-item.html#rotation-prop">rotation</a> property. Specifically, it allows (z axis) rotation to be relative to an arbitrary point.</p>
<p>The following example rotates a Rectangle around its interior point 25, 25:</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
     <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
     <span class="name">color</span>: <span class="string">&quot;blue&quot;</span>
     <span class="name">transform</span>: <span class="name">Rotation</span> { <span class="name">origin</span>.x: <span class="number">25</span>; <span class="name">origin</span>.y: <span class="number">25</span>; <span class="name">angle</span>: <span class="number">45</span>}
 }</pre>
<p>Rotation also provides a way to specify 3D-like rotations for Items. For these types of rotations you must specify the axis to rotate around in addition to the origin point.</p>
<p>The following example shows various 3D-like rotations applied to an <a href="qml-image.html">Image</a>.</p>
<pre class="qml"> import QtQuick 1.0

 <span class="type"><a href="qml-row.html">Row</a></span> {
     <span class="name">x</span>: <span class="number">10</span>; <span class="name">y</span>: <span class="number">10</span>
     <span class="name">spacing</span>: <span class="number">10</span>

     <span class="type"><a href="qml-image.html">Image</a></span> { <span class="name">source</span>: <span class="string">&quot;pics/qt.png&quot;</span> }
     <span class="type"><a href="qml-image.html">Image</a></span> {
         <span class="name">source</span>: <span class="string">&quot;pics/qt.png&quot;</span>
         <span class="name">transform</span>: <span class="name">Rotation</span> { <span class="name">origin</span>.x: <span class="number">30</span>; <span class="name">origin</span>.y: <span class="number">30</span>; <span class="type">axis</span> { <span class="name">x</span>: <span class="number">0</span>; <span class="name">y</span>: <span class="number">1</span>; <span class="name">z</span>: <span class="number">0</span> } <span class="name">angle</span>: <span class="number">18</span> }
         <span class="name">smooth</span>: <span class="number">true</span>
     }
     <span class="type"><a href="qml-image.html">Image</a></span> {
         <span class="name">source</span>: <span class="string">&quot;pics/qt.png&quot;</span>
         <span class="name">transform</span>: <span class="name">Rotation</span> { <span class="name">origin</span>.x: <span class="number">30</span>; <span class="name">origin</span>.y: <span class="number">30</span>; <span class="type">axis</span> { <span class="name">x</span>: <span class="number">0</span>; <span class="name">y</span>: <span class="number">1</span>; <span class="name">z</span>: <span class="number">0</span> } <span class="name">angle</span>: <span class="number">36</span> }
         <span class="name">smooth</span>: <span class="number">true</span>
     }
     <span class="type"><a href="qml-image.html">Image</a></span> {
         <span class="name">source</span>: <span class="string">&quot;pics/qt.png&quot;</span>
         <span class="name">transform</span>: <span class="name">Rotation</span> { <span class="name">origin</span>.x: <span class="number">30</span>; <span class="name">origin</span>.y: <span class="number">30</span>; <span class="type">axis</span> { <span class="name">x</span>: <span class="number">0</span>; <span class="name">y</span>: <span class="number">1</span>; <span class="name">z</span>: <span class="number">0</span> } <span class="name">angle</span>: <span class="number">54</span> }
         <span class="name">smooth</span>: <span class="number">true</span>
     }
     <span class="type"><a href="qml-image.html">Image</a></span> {
         <span class="name">source</span>: <span class="string">&quot;pics/qt.png&quot;</span>
         <span class="name">transform</span>: <span class="name">Rotation</span> { <span class="name">origin</span>.x: <span class="number">30</span>; <span class="name">origin</span>.y: <span class="number">30</span>; <span class="type">axis</span> { <span class="name">x</span>: <span class="number">0</span>; <span class="name">y</span>: <span class="number">1</span>; <span class="name">z</span>: <span class="number">0</span> } <span class="name">angle</span>: <span class="number">72</span> }
         <span class="name">smooth</span>: <span class="number">true</span>
     }
 }</pre>
<p class="centerAlign"><img src="images/axisrotation.png" alt="" /></p><p><b>See also </b><a href="declarative-ui-components-dialcontrol.html">Dial Control example</a> and <a href="declarative-toys-clocks.html">Clocks example</a>.</p>
<!-- @@@Rotation -->
<h2>Property Documentation</h2>
<!-- $$$angle -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="angle-prop"></a><span class="name">angle</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr></table></div><div class="qmldoc"><p>The angle to rotate, in degrees clockwise.</p>
</div></div><!-- @@@angle -->
<br/>
<!-- $$$axis.x -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="axis.x-prop"></a><span class="name">axis.x</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="axis.y-prop"></a><span class="name">axis.y</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="axis.z-prop"></a><span class="name">axis.z</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr></table></div><div class="qmldoc"><p>The axis to rotate around. For simple (2D) rotation around a point, you do not need to specify an axis, as the default axis is the z axis (<tt>axis { x: 0; y: 0; z: 1 }</tt>).</p>
<p>For a typical 3D-like rotation you will usually specify both the origin and the axis.</p>
<p class="centerAlign"><img src="images/3d-rotation-axis.png" alt="" /></p></div></div><!-- @@@axis.x -->
<br/>
<!-- $$$origin.x -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="origin.x-prop"></a><span class="name">origin.x</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="origin.y-prop"></a><span class="name">origin.y</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr></table></div><div class="qmldoc"><p>The origin point of the rotation (i.e&#x2e;, the point that stays fixed relative to the parent as the rest of the item rotates). By default the origin is 0, 0.</p>
</div></div><!-- @@@origin.x -->
<br/>
  <div class="ft">
    <span></span>
  </div>
</div> 
<div class="footer">
    <p>
      <acronym title="Copyright">&copy;</acronym> 2012 Nokia Corporation and/or its
      subsidiaries. Documentation contributions included herein are the copyrights of
      their respective owners.</p>
    <br />
    <p>
      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.</p>
    <p>
      Documentation sources may be obtained from <a href="http://www.qt-project.org">
      www.qt-project.org</a>.</p>
    <br />
    <p>
      Nokia, Qt and their respective logos are trademarks of Nokia Corporation 
      in Finland and/or other countries worldwide. All other trademarks are property
      of their respective owners. <a title="Privacy Policy"
      href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>