<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- concentriccircles.qdoc -->
<title>Concentric Circles Example | Qt Widgets 5.12.6</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.12</td><td ><a href="qtwidgets-index.html">Qt Widgets</a></td><td ><a href="examples-painting.html">Painting Examples</a></td><td >Concentric Circles Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtwidgets-index.html">Qt 5.12.6 Reference Documentation</a></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="#circlewidget-class-definition">CircleWidget Class Definition</a></li>
<li class="level1"><a href="#circlewidget-class-implementation">CircleWidget Class Implementation</a></li>
<li class="level1"><a href="#window-class-definition">Window Class Definition</a></li>
<li class="level1"><a href="#window-class-implementation">Window Class Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Concentric Circles Example</h1>
<span class="subtitle"></span>
<!-- $$$painting/concentriccircles-brief -->
<p>Demonstrates the improved quality that antialiasing and floating point precision gives.</p>
<!-- @@@painting/concentriccircles -->
<!-- $$$painting/concentriccircles-description -->
<div class="descr"> <a name="details"></a>
<p>The application's main window displays several widgets which are drawn using the various combinations of precision and anti-aliasing.</p>
<p class="centerAlign"><img src="images/concentriccircles-example.png" alt="" /></p><p>Anti-aliasing is one of <a href="../qtgui/qpainter.html">QPainter</a>'s render hints. The <a href="../qtgui/qpainter.html#RenderHint-enum">QPainter::RenderHints</a> are used to specify flags to <a href="../qtgui/qpainter.html">QPainter</a> that may, or may not, be respected by any given engine. <a href="../qtgui/qpainter.html#RenderHint-enum">QPainter::Antialiasing</a> indicates that the engine should anti-alias the edges of primitives if possible, i.e. put additional pixels around the original ones to smooth the edges.</p>
<p>The difference between floating point precision and integer precision is a matter of accuracy, and is visible in the application's main window: Even though the logic that is calculating the circles' geometry is the same, floating points ensure that the white spaces between each circle are of the same size, while integers make two and two circles appear as if they belong together. The reason is that the integer based precision rely on rounding off non-integer calculations.</p>
<p>The example consists of two classes:</p>
<ul>
<li><code>CircleWidget</code> is a custom widget which renders several animated concentric circles.</li>
<li><code>Window</code> is the application's main window displaying four <code>CircleWidget</code>s drawn using different combinations of precision and aliasing.</li>
</ul>
<p>First we will review the CircleWidget class, then we will take a look at the Window class.</p>
<a name="circlewidget-class-definition"></a>
<h2 id="circlewidget-class-definition">CircleWidget Class Definition</h2>
<p>The CircleWidget class inherits <a href="qwidget.html">QWidget</a>, and is a custom widget which renders several animated concentric circles.</p>
<pre class="cpp">
<span class="keyword">class</span> CircleWidget : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
CircleWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type">void</span> setFloatBased(bool floatBased);
<span class="type">void</span> setAntialiased(bool antialiased);
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> minimumSizeHint() <span class="keyword">const</span> override;
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> sizeHint() <span class="keyword">const</span> override;
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> nextAnimationFrame();
<span class="keyword">protected</span>:
<span class="type">void</span> paintEvent(<span class="type"><a href="../qtgui/qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event) override;
<span class="keyword">private</span>:
bool floatBased;
bool antialiased;
<span class="type">int</span> frameNo;
};
</pre>
<p>We declare the <code>floatBased</code> and <code>antialiased</code> variables to hold whether an instance of the class should be rendered with integer or float based precision, and whether the rendering should be anti-aliased or not. We also declare functions setting each of these variables.</p>
<p>In addition we reimplement the <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>() function to apply the various combinations of precision and anti-aliasing when rendering, and to support the animation. We reimplement the <a href="qwidget.html#minimumSizeHint-prop">QWidget::minimumSizeHint</a>() and <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>() functions to give the widget a reasonable size within our application.</p>
<p>We declare the private <code>nextAnimationFrame()</code> slot, and the associated <code>frameNo</code> variable holding the number of "animation frames" for the widget, to facilitate the animation.</p>
<a name="circlewidget-class-implementation"></a>
<h2 id="circlewidget-class-implementation">CircleWidget Class Implementation</h2>
<p>In the constructor we make the widget's rendering integer based and aliased by default:</p>
<pre class="cpp">
CircleWidget<span class="operator">::</span>CircleWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)
{
floatBased <span class="operator">=</span> <span class="keyword">false</span>;
antialiased <span class="operator">=</span> <span class="keyword">false</span>;
frameNo <span class="operator">=</span> <span class="number">0</span>;
setBackgroundRole(<span class="type"><a href="../qtgui/qpalette.html">QPalette</a></span><span class="operator">::</span>Base);
setSizePolicy(<span class="type"><a href="qsizepolicy.html">QSizePolicy</a></span><span class="operator">::</span>Expanding<span class="operator">,</span> <span class="type"><a href="qsizepolicy.html">QSizePolicy</a></span><span class="operator">::</span>Expanding);
}
</pre>
<p>We initialize the widget's <code>frameNo</code> variable, and set the widget's background color using the QWidget::setBackgroundColor() function which takes a <a href="../qtgui/qpalette.html#ColorRole-enum">color role</a> as argument; the <a href="../qtgui/qpalette.html#ColorRole-enum">QPalette::Base</a> color role is typically white.</p>
<p>Then we set the widgets size policy using the <a href="qwidget.html#sizePolicy-prop">QWidget::setSizePolicy</a>() function. <a href="qsizepolicy.html#Policy-enum">QSizePolicy::Expanding</a> means that the widget's <a href="qwidget.html#sizeHint-prop">sizeHint()</a> is a sensible size, but that the widget can be shrunk and still be useful. The widget can also make use of extra space, so it should get as much space as possible.</p>
<pre class="cpp">
<span class="type">void</span> CircleWidget<span class="operator">::</span>setFloatBased(bool floatBased)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>floatBased <span class="operator">=</span> floatBased;
update();
}
<span class="type">void</span> CircleWidget<span class="operator">::</span>setAntialiased(bool antialiased)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>antialiased <span class="operator">=</span> antialiased;
update();
}
</pre>
<p>The public <code>setFloatBased()</code> and <code>setAntialiased()</code> functions update the widget's rendering preferences, i.e. whether the widget should be rendered with integer or float based precision, and whether the rendering should be anti-aliased or not.</p>
<p>The functions also generate a paint event by calling the <a href="qwidget.html#update">QWidget::update</a>() function, forcing a repaint of the widget with the new rendering preferences.</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> CircleWidget<span class="operator">::</span>minimumSizeHint() <span class="keyword">const</span>
{
<span class="keyword">return</span> <span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(<span class="number">50</span><span class="operator">,</span> <span class="number">50</span>);
}
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> CircleWidget<span class="operator">::</span>sizeHint() <span class="keyword">const</span>
{
<span class="keyword">return</span> <span class="type"><a href="../qtcore/qsize.html">QSize</a></span>(<span class="number">180</span><span class="operator">,</span> <span class="number">180</span>);
}
</pre>
<p>The default implementations of the <a href="qwidget.html#minimumSizeHint-prop">QWidget::minimumSizeHint</a>() and <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>() functions return invalid sizes if there is no layout for the widget, otherwise they return the layout's minimum and preferred size, respectively.</p>
<p>We reimplement the functions to give the widget minimum and preferred sizes which are reasonable within our application.</p>
<pre class="cpp">
<span class="type">void</span> CircleWidget<span class="operator">::</span>nextAnimationFrame()
{
<span class="operator">+</span><span class="operator">+</span>frameNo;
update();
}
</pre>
<p>The nextAnimationFrame() slot simply increments the <code>frameNo</code> variable's value, and calls the <a href="qwidget.html#update">QWidget::update</a>() function which schedules a paint event for processing when Qt returns to the main event loop.</p>
<pre class="cpp">
<span class="type">void</span> CircleWidget<span class="operator">::</span>paintEvent(<span class="type"><a href="../qtgui/qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>)
{
<span class="type"><a href="../qtgui/qpainter.html">QPainter</a></span> painter(<span class="keyword">this</span>);
painter<span class="operator">.</span>setRenderHint(<span class="type"><a href="../qtgui/qpainter.html">QPainter</a></span><span class="operator">::</span>Antialiasing<span class="operator">,</span> antialiased);
painter<span class="operator">.</span>translate(width() <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> height() <span class="operator">/</span> <span class="number">2</span>);
</pre>
<p>A paint event is a request to repaint all or part of the widget. The <code>paintEvent()</code> function is an event handler that can be reimplemented to receive the widget's paint events. We reimplement the event handler to apply the various combinations of precision and anti-aliasing when rendering the widget, and to support the animation.</p>
<p>First, we create a <a href="../qtgui/qpainter.html">QPainter</a> for the widget, and set its antialiased flag to the widget's preferred aliasing. We also translate the painters coordinate system, preparing to draw the widget's cocentric circles. The translation ensures that the center of the circles will be equivalent to the widget's center.</p>
<pre class="cpp">
<span class="keyword">for</span> (<span class="type">int</span> diameter <span class="operator">=</span> <span class="number">0</span>; diameter <span class="operator"><</span> <span class="number">256</span>; diameter <span class="operator">+</span><span class="operator">=</span> <span class="number">9</span>) {
<span class="type">int</span> delta <span class="operator">=</span> abs((frameNo <span class="operator">%</span> <span class="number">128</span>) <span class="operator">-</span> diameter <span class="operator">/</span> <span class="number">2</span>);
<span class="type">int</span> alpha <span class="operator">=</span> <span class="number">255</span> <span class="operator">-</span> (delta <span class="operator">*</span> delta) <span class="operator">/</span> <span class="number">4</span> <span class="operator">-</span> diameter;
</pre>
<p>When painting a circle, we use the number of "animation frames" to determine the alpha channel of the circle's color. The alpha channel specifies the color's transparency effect, 0 represents a fully transparent color, while 255 represents a fully opaque color.</p>
<pre class="cpp">
<span class="keyword">if</span> (alpha <span class="operator">></span> <span class="number">0</span>) {
painter<span class="operator">.</span>setPen(<span class="type"><a href="../qtgui/qpen.html">QPen</a></span>(<span class="type"><a href="../qtgui/qcolor.html">QColor</a></span>(<span class="number">0</span><span class="operator">,</span> diameter <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> <span class="number">127</span><span class="operator">,</span> alpha)<span class="operator">,</span> <span class="number">3</span>));
<span class="keyword">if</span> (floatBased)
painter<span class="operator">.</span>drawEllipse(<span class="type"><a href="../qtcore/qrectf.html">QRectF</a></span>(<span class="operator">-</span>diameter <span class="operator">/</span> <span class="number">2.0</span><span class="operator">,</span> <span class="operator">-</span>diameter <span class="operator">/</span> <span class="number">2.0</span><span class="operator">,</span> diameter<span class="operator">,</span> diameter));
<span class="keyword">else</span>
painter<span class="operator">.</span>drawEllipse(<span class="type"><a href="../qtcore/qrect.html">QRect</a></span>(<span class="operator">-</span>diameter <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> <span class="operator">-</span>diameter <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> diameter<span class="operator">,</span> diameter));
}
}
}
</pre>
<p>If the calculated alpha channel is fully transparent, we don't draw anything since that would be equivalent to drawing a white circle on a white background. Instead we skip to the next circle still creating a white space. If the calculated alpha channel is fully opaque, we set the pen (the <a href="../qtgui/qcolor.html">QColor</a> passed to the <a href="../qtgui/qpen.html">QPen</a> constructor is converted into the required <a href="../qtgui/qbrush.html">QBrush</a> by default) and draw the circle. If the widget's preferred precision is float based, we specify the circle's bounding rectangle using <a href="../qtcore/qrectf.html">QRectF</a> and double values, otherwise we use <a href="../qtcore/qrect.html">QRect</a> and integers.</p>
<p>The animation is controlled by the public <code>nextAnimationFrame()</code> slot: Whenever the <code>nextAnimationFrame()</code> slot is called the number of frames is incremented and a paint event is scheduled. Then, when the widget is repainted, the alpha-blending of the circles' colors change and the circles appear as animated.</p>
<a name="window-class-definition"></a>
<h2 id="window-class-definition">Window Class Definition</h2>
<p>The Window class inherits <a href="qwidget.html">QWidget</a>, and is the application's main window rendering four <code>CircleWidget</code>s using different combinations of precision and aliasing.</p>
<pre class="cpp">
<span class="keyword">class</span> Window : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
Window();
<span class="keyword">private</span>:
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>createLabel(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qstring.html">QString</a></span> <span class="operator">&</span>text);
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>aliasedLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>antialiasedLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>intLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>floatLabel;
CircleWidget <span class="operator">*</span>circleWidgets<span class="operator">[</span><span class="number">2</span><span class="operator">]</span><span class="operator">[</span><span class="number">2</span><span class="operator">]</span>;
};
</pre>
<p>We declare the various components of the main window, i.e., the text labels and a double array that will hold reference to the four <code>CircleWidget</code>s. In addition we declare the private <code>createLabel()</code> function to simplify the constructor.</p>
<a name="window-class-implementation"></a>
<h2 id="window-class-implementation">Window Class Implementation</h2>
<pre class="cpp">
Window<span class="operator">::</span>Window()
{
aliasedLabel <span class="operator">=</span> createLabel(tr(<span class="string">"Aliased"</span>));
antialiasedLabel <span class="operator">=</span> createLabel(tr(<span class="string">"Antialiased"</span>));
intLabel <span class="operator">=</span> createLabel(tr(<span class="string">"Int"</span>));
floatLabel <span class="operator">=</span> createLabel(tr(<span class="string">"Float"</span>));
<span class="type"><a href="qgridlayout.html">QGridLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgridlayout.html">QGridLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(aliasedLabel<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(antialiasedLabel<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">2</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(intLabel<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span>);
layout<span class="operator">-</span><span class="operator">></span>addWidget(floatLabel<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">0</span>);
</pre>
<p>In the constructor, we first create the various labels and put them in a <a href="qgridlayout.html">QGridLayout</a>.</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qtimer.html">QTimer</a></span> <span class="operator">*</span>timer <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="../qtcore/qtimer.html">QTimer</a></span>(<span class="keyword">this</span>);
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> <span class="number">2</span>; <span class="operator">+</span><span class="operator">+</span>i) {
<span class="keyword">for</span> (<span class="type">int</span> j <span class="operator">=</span> <span class="number">0</span>; j <span class="operator"><</span> <span class="number">2</span>; <span class="operator">+</span><span class="operator">+</span>j) {
circleWidgets<span class="operator">[</span>i<span class="operator">]</span><span class="operator">[</span>j<span class="operator">]</span> <span class="operator">=</span> <span class="keyword">new</span> CircleWidget;
circleWidgets<span class="operator">[</span>i<span class="operator">]</span><span class="operator">[</span>j<span class="operator">]</span><span class="operator">-</span><span class="operator">></span>setAntialiased(j <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span>);
circleWidgets<span class="operator">[</span>i<span class="operator">]</span><span class="operator">[</span>j<span class="operator">]</span><span class="operator">-</span><span class="operator">></span>setFloatBased(i <span class="operator">!</span><span class="operator">=</span> <span class="number">0</span>);
connect(timer<span class="operator">,</span> SIGNAL(timeout())<span class="operator">,</span>
circleWidgets<span class="operator">[</span>i<span class="operator">]</span><span class="operator">[</span>j<span class="operator">]</span><span class="operator">,</span> SLOT(nextAnimationFrame()));
layout<span class="operator">-</span><span class="operator">></span>addWidget(circleWidgets<span class="operator">[</span>i<span class="operator">]</span><span class="operator">[</span>j<span class="operator">]</span><span class="operator">,</span> i <span class="operator">+</span> <span class="number">1</span><span class="operator">,</span> j <span class="operator">+</span> <span class="number">1</span>);
}
}
</pre>
<p>Then we create a <a href="../qtcore/qtimer.html">QTimer</a>. The <a href="../qtcore/qtimer.html">QTimer</a> class is a high-level programming interface for timers, and provides repetitive and single-shot timers.</p>
<p>We create a timer to facilitate the animation of our concentric circles; when we create the four CircleWidget instances (and add them to the layout), we connect the <a href="../qtcore/qtimer.html#timeout">QTimer::timeout</a>() signal to each of the widgets' <code>nextAnimationFrame()</code> slots.</p>
<pre class="cpp">
timer<span class="operator">-</span><span class="operator">></span>start(<span class="number">100</span>);
setLayout(layout);
setWindowTitle(tr(<span class="string">"Concentric Circles"</span>));
}
</pre>
<p>Before we set the layout and window title for our main window, we make the timer start with a timeout interval of 100 milliseconds, using the <a href="../qtcore/qtimer.html#start-1">QTimer::start</a>() function. That means that the <a href="../qtcore/qtimer.html#timeout">QTimer::timeout</a>() signal will be emitted, forcing a repaint of the four <code>CircleWidget</code>s, every 100 millisecond which is the reason the circles appear as animated.</p>
<pre class="cpp">
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>Window<span class="operator">::</span>createLabel(<span class="keyword">const</span> <span class="type"><a href="../qtcore/qstring.html">QString</a></span> <span class="operator">&</span>text)
{
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>label <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(text);
label<span class="operator">-</span><span class="operator">></span>setAlignment(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignCenter);
label<span class="operator">-</span><span class="operator">></span>setMargin(<span class="number">2</span>);
label<span class="operator">-</span><span class="operator">></span>setFrameStyle(<span class="type"><a href="qframe.html">QFrame</a></span><span class="operator">::</span>Box <span class="operator">|</span> <span class="type"><a href="qframe.html">QFrame</a></span><span class="operator">::</span>Sunken);
<span class="keyword">return</span> label;
}
</pre>
<p>The private <code>createLabel()</code> function is implemented to simlify the constructor.</p>
<p>Files:</p>
<ul>
<li><a href="qtwidgets-painting-concentriccircles-circlewidget-cpp.html">painting/concentriccircles/circlewidget.cpp</a></li>
<li><a href="qtwidgets-painting-concentriccircles-circlewidget-h.html">painting/concentriccircles/circlewidget.h</a></li>
<li><a href="qtwidgets-painting-concentriccircles-concentriccircles-pro.html">painting/concentriccircles/concentriccircles.pro</a></li>
<li><a href="qtwidgets-painting-concentriccircles-main-cpp.html">painting/concentriccircles/main.cpp</a></li>
<li><a href="qtwidgets-painting-concentriccircles-window-cpp.html">painting/concentriccircles/window.cpp</a></li>
<li><a href="qtwidgets-painting-concentriccircles-window-h.html">painting/concentriccircles/window.h</a></li>
</ul>
</div>
<!-- @@@painting/concentriccircles -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-updates
>
by-pkgid
>
d5e62c01ae8d1e579463c6a871dd44bf
>
files
>
4721
