/usr/share/qt5/doc/qtdoc/qtquick-usecase-visual.html is in qt5-doc-html 5.3.2-3.
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 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 | <?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" />
<!-- visual.qdoc -->
<title>Use Case - Visual Elements In QML | QtDoc 5.3</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><a href="index.html">Qt 5.3</a></li>
<li>Use Case - Visual Elements In QML</li>
<li id="buildversion">
Qt 5.3.2 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#the-rectangle-type">The Rectangle Type</a></li>
<li class="level1"><a href="#the-image-type">The Image Type</a></li>
<li class="level1"><a href="#shared-visual-properties">Shared Visual Properties</a></li>
<li class="level2"><a href="#opacity-and-visibility">Opacity and Visibility</a></li>
<li class="level2"><a href="#transforms">Transforms</a></li>
</ul>
</div>
<h1 class="title">Use Case - Visual Elements In QML</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-usecase-visual.html-description -->
<div class="descr"> <a name="details"></a>
<a name="the-rectangle-type"></a>
<h2>The Rectangle Type</h2>
<p>For the most basic of visuals, <a href="../qtquick/qtquick-index.html">Qt Quick</a> provides a <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> type to draw rectangles. These rectangles can be colored with a color or a vertical gradient. The <a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a> type can also draw borders on the rectangle.</p>
<p>For drawing custom shapes beyond rectangles, see the <a href="../qtquick/qml-qtquick-canvas.html">Canvas</a> type or display a pre-rendered image using the <a href="../qtquick/qml-qtquick-image.html">Image</a> type.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</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="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"#272822"</span>
<span class="name">width</span>: <span class="number">320</span>
<span class="name">height</span>: <span class="number">480</span>
}
<span class="comment">// This element displays a rectangle with a gradient and a border</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">160</span>
<span class="name">y</span>: <span class="number">20</span>
<span class="name">width</span>: <span class="number">100</span>
<span class="name">height</span>: <span class="number">100</span>
<span class="name">radius</span>: <span class="number">8</span> <span class="comment">// This gives rounded corners to the Rectangle</span>
<span class="name">gradient</span>: <span class="name">Gradient</span> { <span class="comment">// This sets a vertical gradient fill</span>
<span class="type"><a href="../qtquick/qml-qtquick-gradientstop.html">GradientStop</a></span> { <span class="name">position</span>: <span class="number">0.0</span>; <span class="name">color</span>: <span class="string">"aqua"</span> }
<span class="type"><a href="../qtquick/qml-qtquick-gradientstop.html">GradientStop</a></span> { <span class="name">position</span>: <span class="number">1.0</span>; <span class="name">color</span>: <span class="string">"teal"</span> }
}
<span class="type">border</span> { <span class="name">width</span>: <span class="number">3</span>; <span class="name">color</span>: <span class="string">"white"</span> } <span class="comment">// This sets a 3px wide black border to be drawn</span>
}
<span class="comment">// This rectangle is a plain color with no border</span>
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">40</span>
<span class="name">y</span>: <span class="number">20</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">"red"</span>
}
}</pre>
<p class="centerAlign"><img src="images/qml-uses-visual-rectangles.png" alt="" /></p><a name="the-image-type"></a>
<h2>The Image Type</h2>
<p><a href="../qtquick/qtquick-index.html">Qt Quick</a> provides an <a href="../qtquick/qml-qtquick-image.html">Image</a> type which may be used to display images. The <a href="../qtquick/qml-qtquick-image.html">Image</a> type has a <a href="../qtquick/qml-qtquick-image.html#source-prop">source</a> property whose value can be a remote or local URL, or the URL of an image file embedded in a compiled resource file.</p>
<pre class="qml"><span class="comment">// This element displays an image. Because the source is online, it may take some time to fetch</span>
<span class="type"><a href="../qtquick/qml-qtquick-image.html">Image</a></span> {
<span class="name">x</span>: <span class="number">40</span>
<span class="name">y</span>: <span class="number">20</span>
<span class="name">width</span>: <span class="number">61</span>
<span class="name">height</span>: <span class="number">73</span>
<span class="name">source</span>: <span class="string">"http://codereview.qt-project.org/static/logo_qt.png"</span>
}</pre>
<p>For more complex images there are other types similar to <a href="../qtquick/qml-qtquick-image.html">Image</a>. <a href="../qtquick/qml-qtquick-borderimage.html">BorderImage</a> draws an image with grid scaling, suitable for images used as borders. <a href="../qtquick/qml-qtquick-animatedimage.html">AnimatedImage</a> plays animated .gif and .mng images. <a href="../qtquick/qml-qtquick-animatedsprite.html">AnimatedSprite</a> and <a href="../qtquick/qml-qtquick-spritesequence.html">SpriteSequence</a> play animations comprised of multiple frames stored adjacently in a non animated image format.</p>
<p>For displaying video files and camera data, see the <a href="../qtmultimedia/qtmultimedia-index.html">Qt Multimedia</a> module.</p>
<a name="shared-visual-properties"></a>
<h2>Shared Visual Properties</h2>
<p>All visual items provided by <a href="../qtquick/qtquick-index.html">Qt Quick</a> are based on the Item type, which provides a common set of attributes for visual items, including opacity and transform attributes.</p>
<a name="opacity-and-visibility"></a>
<h3>Opacity and Visibility</h3>
<p>The QML object types provided by Qt Quick have built-in support for <a href="../qtquick/qml-qtquick-item.html#opacity-prop">opacity</a>. Opacity can be animated to allow smooth transitions to or from a transparent state. Visibility can also be managed with the <a href="../qtquick/qml-qtquick-item.html#visible-prop">visible</a> property more efficiently, but at the cost of not being able to animate it.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</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="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"#272822"</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="../qtquick/qml-qtquick-item.html">Item</a></span> {
<span class="name">x</span>: <span class="number">20</span>
<span class="name">y</span>: <span class="number">270</span>
<span class="name">width</span>: <span class="number">200</span>
<span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">topRect</span>.<span class="name">visible</span> <span class="operator">=</span> !<span class="name">topRect</span>.<span class="name">visible</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">20</span>
<span class="name">y</span>: <span class="number">20</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">"red"</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">topRect</span>
<span class="name">opacity</span>: <span class="number">0.5</span>
<span class="name">x</span>: <span class="number">100</span>
<span class="name">y</span>: <span class="number">100</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">"blue"</span>
}
}
}</pre>
<p class="centerAlign"><img src="images/qml-uses-visual-opacity.png" alt="" /></p><a name="transforms"></a>
<h3>Transforms</h3>
<p>Qt Quick types have built-in support for transformations. If you wish to have your visual content rotated or scaled, you can set the <a href="../qtquick/qml-qtquick-item.html#rotation-prop">Item::rotation</a> or <a href="../qtquick/qml-qtquick-item.html#scale-prop">Item::scale</a> property. These can also be animated.</p>
<pre class="qml">import QtQuick 2.3
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</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="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"#272822"</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="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">rotation</span>: <span class="number">45</span> <span class="comment">// This rotates the Rectangle by 45 degrees</span>
<span class="name">x</span>: <span class="number">20</span>
<span class="name">y</span>: <span class="number">160</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">"blue"</span>
}
<span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">scale</span>: <span class="number">0.8</span> <span class="comment">// This scales the Rectangle down to 80% size</span>
<span class="name">x</span>: <span class="number">160</span>
<span class="name">y</span>: <span class="number">160</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">"green"</span>
}
}</pre>
<p class="centerAlign"><img src="images/qml-uses-visual-transforms.png" alt="" /></p><p>For more complex transformations, see the <a href="../qtquick/qml-qtquick-item.html#transform-prop">Item::transform</a> property.</p>
</div>
<!-- @@@qtquick-usecase-visual.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2014 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>
|