<?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>