<?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.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="qtquick-index.html">Qt Quick</a></td><td >Scene Graph - Painted Item</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="#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-obsolete.html#contentsBoundingRect">contentsBoundingRect()</a> item is called to draw depending on the size of the item. The rectangle returned by the <a href="qquickpainteditem-obsolete.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> 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>
