/usr/share/qt5/doc/qtquick/qtquick-customitems-painteditem-example.html is in qtdeclarative5-doc-html 5.5.1-2ubuntu6.
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 190 191 192 193 194 195 196 197 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- textballoons.qdoc -->
<title>Scene Graph - Painted Item | Qt Quick 5.5</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.5</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li>Scene Graph - Painted Item</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</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="#textballoon-class-declaration">TextBalloon Class Declaration</a></li>
<li class="level1"><a href="#textballoon-class-definition">TextBalloon Class Definition</a></li>
<li class="level1"><a href="#textballoons-qml-file">Textballoons.qml File</a></li>
<li class="level2"><a href="#balloonview">BalloonView</a></li>
<li class="level2"><a href="#controls">Controls</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Scene Graph - Painted Item</h1>
<span class="subtitle"></span>
<!-- $$$customitems/painteditem-description -->
<div class="descr"> <a name="details"></a>
<p>The Painted Item example shows how to use the QML Scene Graph framework to implement custom scenegraph items using QPainter.</p>
<p class="centerAlign"><img src="images/declarative-textballoons_example.png" alt="" /></p><p>The <a href="qquickpainteditem.html">QQuickPaintedItem</a> class is a class derived from <a href="qquickitem.html">QQuickItem</a> for implementing custom QML Scene Graph items using the QPainter interfaces.</p>
<p>The example consists of an item class, a plugin class and a QML file to use this plugin. The <code>TextBalloon</code> class represents the individual text balloons extending <a href="qquickpainteditem.html">QQuickPaintedItem</a>, the <code>TextBalloonPlugin</code> class represents the skeleton code for a <a href="qtquick-index.html">Qt Quick</a> plugin and the <code>textballoons.qml</code> file is used to load the plugin and display the text balloons.</p>
<p>We will focus on the <code>TextBalloon</code> class first and continue with the <code>textballoons.qml</code> file. For an example on how to implement a <a href="qtquick-index.html">Qt Quick</a> plugin please look at Writing an Extension Plugin</p>
<a name="textballoon-class-declaration"></a>
<h2 id="textballoon-class-declaration">TextBalloon Class Declaration</h2>
<p>The <code>TextBalloon</code> class inherits from <a href="qquickpainteditem.html">QQuickPaintedItem</a>. <a href="qquickpainteditem.html">QQuickPaintedItem</a> is the base class for all QPainter based items in the QML Scene Graph framework.</p>
<pre class="cpp"><span class="keyword">class</span> TextBalloon : <span class="keyword">public</span> <span class="type"><a href="qquickpainteditem.html">QQuickPaintedItem</a></span>
{
Q_OBJECT
Q_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)
<span class="keyword">public</span>:
TextBalloon(<span class="type"><a href="qquickitem.html">QQuickItem</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type">void</span> paint(<span class="type">QPainter</span> <span class="operator">*</span>painter);
bool isRightAligned();
<span class="type">void</span> setRightAligned(bool rightAligned);
<span class="keyword">private</span>:
bool rightAligned;
<span class="keyword">signals</span>:
<span class="type">void</span> rightAlignedChanged();
};</pre>
<p>To implement a <a href="qquickpainteditem.html">QQuickPaintedItem</a> you must implement QQuickPaintedIem's pure virtual function <a href="qquickpainteditem.html#paint">paint()</a> which implements the painting of the type.</p>
<a name="textballoon-class-definition"></a>
<h2 id="textballoon-class-definition">TextBalloon Class Definition</h2>
<p>We have to be sure to initialize the rightAligned property for a TextBalloon item.</p>
<pre class="cpp">TextBalloon<span class="operator">::</span>TextBalloon(<span class="type"><a href="qquickitem.html">QQuickItem</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qquickpainteditem.html">QQuickPaintedItem</a></span>(parent)
<span class="operator">,</span> rightAligned(<span class="keyword">false</span>)
{
}</pre>
<p>Then we implement the <code>paint()</code> function which is automatically called by the Scene Graph framework to paint the contents of the item. The function paints the item in local coordinates.</p>
<pre class="cpp"><span class="type">void</span> TextBalloon<span class="operator">::</span>paint(<span class="type">QPainter</span> <span class="operator">*</span>painter)
{
<span class="type">QBrush</span> brush(<span class="type">QColor</span>(<span class="string">"#007430"</span>));
painter<span class="operator">-</span><span class="operator">></span>setBrush(brush);
painter<span class="operator">-</span><span class="operator">></span>setPen(<span class="type">Qt</span><span class="operator">::</span>NoPen);
painter<span class="operator">-</span><span class="operator">></span>setRenderHint(<span class="type">QPainter</span><span class="operator">::</span>Antialiasing);
painter<span class="operator">-</span><span class="operator">></span>drawRoundedRect(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>width()<span class="operator">,</span> boundingRect()<span class="operator">.</span>height() <span class="operator">-</span> <span class="number">10</span><span class="operator">,</span> <span class="number">10</span><span class="operator">,</span> <span class="number">10</span>);
<span class="keyword">if</span> (rightAligned)
{
<span class="keyword">const</span> <span class="type">QPointF</span> points<span class="operator">[</span><span class="number">3</span><span class="operator">]</span> <span class="operator">=</span> {
<span class="type">QPointF</span>(boundingRect()<span class="operator">.</span>width() <span class="operator">-</span> <span class="number">10.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height() <span class="operator">-</span> <span class="number">10.0</span>)<span class="operator">,</span>
<span class="type">QPointF</span>(boundingRect()<span class="operator">.</span>width() <span class="operator">-</span> <span class="number">20.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height())<span class="operator">,</span>
<span class="type">QPointF</span>(boundingRect()<span class="operator">.</span>width() <span class="operator">-</span> <span class="number">30.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height() <span class="operator">-</span> <span class="number">10.0</span>)<span class="operator">,</span>
};
painter<span class="operator">-</span><span class="operator">></span>drawConvexPolygon(points<span class="operator">,</span> <span class="number">3</span>);
}
<span class="keyword">else</span>
{
<span class="keyword">const</span> <span class="type">QPointF</span> points<span class="operator">[</span><span class="number">3</span><span class="operator">]</span> <span class="operator">=</span> {
<span class="type">QPointF</span>(<span class="number">10.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height() <span class="operator">-</span> <span class="number">10.0</span>)<span class="operator">,</span>
<span class="type">QPointF</span>(<span class="number">20.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height())<span class="operator">,</span>
<span class="type">QPointF</span>(<span class="number">30.0</span><span class="operator">,</span> boundingRect()<span class="operator">.</span>height() <span class="operator">-</span> <span class="number">10.0</span>)<span class="operator">,</span>
};
painter<span class="operator">-</span><span class="operator">></span>drawConvexPolygon(points<span class="operator">,</span> <span class="number">3</span>);
}
}</pre>
<p>We start with setting the pen and brush on the item to define the look of the item. After that we start drawing. Note that the <a href="qquickpainteditem.html#contentsBoundingRect">contentsBoundingRect()</a> item is called to draw depending on the size of the item. The rectangle returned by the <a href="qquickpainteditem.html#contentsBoundingRect">contentsBoundingRect()</a> function is the size of the item as defined in the QML file.</p>
<a name="textballoons-qml-file"></a>
<h2 id="textballoons-qml-file">Textballoons.qml File</h2>
<p>The Interface consists of two main parts. The scrollable area with the textballoons and the controls button to add new balloons.</p>
<a name="balloonview"></a>
<h3 >BalloonView</h3>
<pre class="qml"><span class="type">ListModel</span> {
<span class="name">id</span>: <span class="name">balloonModel</span>
<span class="type">ListElement</span> {
<span class="name">balloonWidth</span>: <span class="number">200</span>
}
<span class="type">ListElement</span> {
<span class="name">balloonWidth</span>: <span class="number">120</span>
}
}
<span class="type"><a href="qml-qtquick-listview.html">ListView</a></span> {
<span class="name">anchors</span>.bottom: <span class="name">controls</span>.<span class="name">top</span>
<span class="name">anchors</span>.bottomMargin: <span class="number">2</span>
<span class="name">anchors</span>.top: <span class="name">parent</span>.<span class="name">top</span>
<span class="name">id</span>: <span class="name">balloonView</span>
<span class="name">delegate</span>: <span class="name">TextBalloon</span> {
<span class="name">anchors</span>.right: <span class="name">index</span> <span class="operator">%</span> <span class="number">2</span> <span class="operator">==</span> <span class="number">0</span> ? <span class="name">undefined</span> : <span class="name">parent</span>.<span class="name">right</span>
<span class="name">height</span>: <span class="number">60</span>
<span class="name">rightAligned</span>: <span class="name">index</span> <span class="operator">%</span> <span class="number">2</span> <span class="operator">==</span> <span class="number">0</span> ? <span class="number">false</span> : <span class="number">true</span>
<span class="name">width</span>: <span class="name">balloonWidth</span>
}
<span class="name">model</span>: <span class="name">balloonModel</span>
<span class="name">spacing</span>: <span class="number">5</span>
<span class="name">width</span>: <span class="name">parent</span>.<span class="name">width</span>
}</pre>
<p>The balloonModel contains two types at application start which will be displayed by the <a href="qtquick-customitems-painteditem-example.html#balloonview">balloonView</a>. The <a href="qtquick-customitems-painteditem-example.html#balloonview">balloonView</a> alernates the TextBalloon delegate items between left-aligned and right-aligned.</p>
<a name="controls"></a>
<h3 >Controls</h3>
<pre class="qml"><span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">controls</span>
<span class="name">anchors</span>.bottom: <span class="name">parent</span>.<span class="name">bottom</span>
<span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span>
<span class="name">anchors</span>.margins: <span class="number">1</span>
<span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
<span class="name">border</span>.width: <span class="number">2</span>
<span class="name">color</span>: <span class="string">"white"</span>
<span class="name">height</span>: <span class="name">parent</span>.<span class="name">height</span> <span class="operator">*</span> <span class="number">0.15</span>
<span class="type"><a href="qml-qtquick-text.html">Text</a></span> {
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">text</span>: <span class="string">"Add another balloon"</span>
}
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">hoverEnabled</span>: <span class="number">true</span>
<span class="name">onClicked</span>: {
<span class="name">balloonModel</span>.<span class="name">append</span>({"balloonWidth": <span class="name">Math</span>.<span class="name">floor</span>(<span class="name">Math</span>.<span class="name">random</span>() <span class="operator">*</span> <span class="number">200</span> <span class="operator">+</span> <span class="number">100</span>)})
<span class="name">balloonView</span>.<span class="name">positionViewAtIndex</span>(<span class="name">balloonView</span>.<span class="name">count</span> <span class="operator">-</span><span class="number">1</span>, <span class="name">ListView</span>.<span class="name">End</span>)
}
<span class="name">onEntered</span>: {
<span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">"#8ac953"</span>
}
<span class="name">onExited</span>: {
<span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">"white"</span>
}
}
}</pre>
<p>The controls part of the UI contains a rectangle with a <a href="qml-qtquick-mousearea.html">MouseArea</a> which changes color when the mouse hovers over it. This control 'button' adds a new object to the end of the model with a random width.</p>
<p>Files:</p>
<ul>
<li><a href="qtquick-customitems-painteditem-textballoon-cpp.html">customitems/painteditem/textballoon.cpp</a></li>
<li><a href="qtquick-customitems-painteditem-textballoon-h.html">customitems/painteditem/textballoon.h</a></li>
<li><a href="qtquick-customitems-painteditem-textballoons-qml.html">customitems/painteditem/textballoons.qml</a></li>
<li><a href="qtquick-customitems-painteditem-textballoonplugin-plugin-h.html">customitems/painteditem/TextBalloonPlugin/plugin.h</a></li>
<li><a href="qtquick-customitems-painteditem-painteditem-pro.html">customitems/painteditem/painteditem.pro</a></li>
<li><a href="qtquick-customitems-painteditem-painteditem-qrc.html">customitems/painteditem/painteditem.qrc</a></li>
<li><a href="qtquick-customitems-painteditem-textballoonplugin-qmldir.html">customitems/painteditem/TextBalloonPlugin/qmldir</a></li>
</ul>
</div>
<!-- @@@customitems/painteditem -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 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>
|