<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- basicdrawing.qdoc -->
<title>Basic Drawing 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 >Basic Drawing 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="#window-class-definition">Window Class Definition</a></li>
<li class="level1"><a href="#window-class-implementation">Window Class Implementation</a></li>
<li class="level1"><a href="#renderarea-class-definition">RenderArea Class Definition</a></li>
<li class="level1"><a href="#renderarea-class-implementation">RenderArea Class Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Basic Drawing Example</h1>
<span class="subtitle"></span>
<!-- $$$painting/basicdrawing-brief -->
<p>The Basic Drawing example shows how to display basic graphics primitives in a variety of styles using the <a href="../qtgui/qpainter.html">QPainter</a> class.</p>
<!-- @@@painting/basicdrawing -->
<!-- $$$painting/basicdrawing-description -->
<div class="descr"> <a name="details"></a>
<p><a href="../qtgui/qpainter.html">QPainter</a> performs low-level painting on widgets and other paint devices. The class can draw everything from simple lines to complex shapes like pies and chords. It can also draw aligned text and pixmaps. Normally, it draws in a "natural" coordinate system, but it can in addition do view and world transformation.</p>
<p class="centerAlign"><img src="images/basicdrawing-example.png" alt="" /></p><p>The example provides a render area, displaying the currently active shape, and lets the user manipulate the rendered shape and its appearance using the <a href="../qtgui/qpainter.html">QPainter</a> parameters: The user can change the active shape (<b>Shape</b>), and modify the <a href="../qtgui/qpainter.html">QPainter</a>'s pen (<b>Pen Width</b>, <b>Pen Style</b>, <b>Pen Cap</b>, <b>Pen Join</b>), brush (<b>Brush Style</b>) and render hints (<b>Antialiasing</b>). In addition the user can rotate a shape (<b>Transformations</b>); behind the scenes we use <a href="../qtgui/qpainter.html">QPainter</a>'s ability to manipulate the coordinate system to perform the rotation.</p>
<p>The Basic Drawing example consists of two classes:</p>
<ul>
<li><code>RenderArea</code> is a custom widget that renders multiple copies of the currently active shape.</li>
<li><code>Window</code> is the application's main window displaying a <code>RenderArea</code> widget in addition to several parameter widgets.</li>
</ul>
<p>First we will review the <code>Window</code> class, then we will take a look at the <code>RenderArea</code> class.</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 displaying a <code>RenderArea</code> widget in addition to several parameter widgets.</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="keyword">slots</span>:
<span class="type">void</span> shapeChanged();
<span class="type">void</span> penChanged();
<span class="type">void</span> brushChanged();
<span class="keyword">private</span>:
RenderArea <span class="operator">*</span>renderArea;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>shapeLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>penWidthLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>penStyleLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>penCapLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>penJoinLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>brushStyleLabel;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>otherOptionsLabel;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>shapeComboBox;
<span class="type"><a href="qspinbox.html">QSpinBox</a></span> <span class="operator">*</span>penWidthSpinBox;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>penStyleComboBox;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>penCapComboBox;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>penJoinComboBox;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>brushStyleComboBox;
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span> <span class="operator">*</span>antialiasingCheckBox;
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span> <span class="operator">*</span>transformationsCheckBox;
};
</pre>
<p>We declare the various widgets, and three private slots updating the <code>RenderArea</code> widget: The <code>shapeChanged()</code> slot updates the <code>RenderArea</code> widget when the user changes the currently active shape. We call the <code>penChanged()</code> slot when either of the <a href="../qtgui/qpainter.html">QPainter</a>'s pen parameters changes. And the <code>brushChanged()</code> slot updates the <code>RenderArea</code> widget when the user changes the painter's brush style.</p>
<a name="window-class-implementation"></a>
<h2 id="window-class-implementation">Window Class Implementation</h2>
<p>In the constructor we create and initialize the various widgets appearing in the main application window.</p>
<pre class="cpp">
Window<span class="operator">::</span>Window()
{
renderArea <span class="operator">=</span> <span class="keyword">new</span> RenderArea;
shapeComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Polygon"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Polygon);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Rectangle"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Rect);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Rounded Rectangle"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>RoundedRect);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Ellipse"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Ellipse);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Pie"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Pie);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Chord"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Chord);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Path"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Path);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Line"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Line);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Polyline"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Polyline);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Arc"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Arc);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Points"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Points);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Text"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Text);
shapeComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Pixmap"</span>)<span class="operator">,</span> RenderArea<span class="operator">::</span>Pixmap);
shapeLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"&Shape:"</span>));
shapeLabel<span class="operator">-</span><span class="operator">></span>setBuddy(shapeComboBox);
</pre>
<p>First we create the <code>RenderArea</code> widget that will render the currently active shape. Then we create the <b>Shape</b> combobox, and add the associated items (i.e. the different shapes a <a href="../qtgui/qpainter.html">QPainter</a> can draw).</p>
<pre class="cpp">
penWidthSpinBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qspinbox.html">QSpinBox</a></span>;
penWidthSpinBox<span class="operator">-</span><span class="operator">></span>setRange(<span class="number">0</span><span class="operator">,</span> <span class="number">20</span>);
penWidthSpinBox<span class="operator">-</span><span class="operator">></span>setSpecialValueText(tr(<span class="string">"0 (cosmetic pen)"</span>));
penWidthLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Pen &Width:"</span>));
penWidthLabel<span class="operator">-</span><span class="operator">></span>setBuddy(penWidthSpinBox);
</pre>
<p><a href="../qtgui/qpainter.html">QPainter</a>'s pen is a <a href="../qtgui/qpen.html">QPen</a> object; the <a href="../qtgui/qpen.html">QPen</a> class defines how a painter should draw lines and outlines of shapes. A pen has several properties: Width, style, cap and join.</p>
<p>A pen's width can be <i>zero</i> or greater, but the most common width is zero. Note that this doesn't mean 0 pixels, but implies that the shape is drawn as smoothly as possible although perhaps not mathematically correct.</p>
<p>We create a <a href="qspinbox.html">QSpinBox</a> for the <b>Pen Width</b> parameter.</p>
<pre class="cpp">
penStyleComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Solid"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>SolidLine));
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dash"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>DashLine));
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dot"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>DotLine));
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dash Dot"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>DashDotLine));
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dash Dot Dot"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>DashDotDotLine));
penStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"None"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>NoPen));
penStyleLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"&Pen Style:"</span>));
penStyleLabel<span class="operator">-</span><span class="operator">></span>setBuddy(penStyleComboBox);
penCapComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
penCapComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Flat"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>FlatCap);
penCapComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Square"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>SquareCap);
penCapComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Round"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>RoundCap);
penCapLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Pen &Cap:"</span>));
penCapLabel<span class="operator">-</span><span class="operator">></span>setBuddy(penCapComboBox);
penJoinComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
penJoinComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Miter"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>MiterJoin);
penJoinComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Bevel"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>BevelJoin);
penJoinComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Round"</span>)<span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>RoundJoin);
penJoinLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Pen &Join:"</span>));
penJoinLabel<span class="operator">-</span><span class="operator">></span>setBuddy(penJoinComboBox);
</pre>
<p>The pen style defines the line type. The default style is solid (<a href="../qtcore/qt.html#PenStyle-enum">Qt::SolidLine</a>). Setting the style to none (<a href="../qtcore/qt.html#PenStyle-enum">Qt::NoPen</a>) tells the painter to not draw lines or outlines. The pen cap defines how the end points of lines are drawn. And the pen join defines how two lines join when multiple connected lines are drawn. The cap and join only apply to lines with a width of 1 pixel or greater.</p>
<p>We create <a href="qcombobox.html">QComboBox</a>es for each of the <b>Pen Style</b>, <b>Pen Cap</b> and <b>Pen Join</b> parameters, and adds the associated items (i.e the values of the <a href="../qtcore/qt.html#PenStyle-enum">Qt::PenStyle</a>, <a href="../qtcore/qt.html#PenCapStyle-enum">Qt::PenCapStyle</a> and <a href="../qtcore/qt.html#PenJoinStyle-enum">Qt::PenJoinStyle</a> enums respectively).</p>
<pre class="cpp">
brushStyleComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Linear Gradient"</span>)<span class="operator">,</span>
<span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>LinearGradientPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Radial Gradient"</span>)<span class="operator">,</span>
<span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>RadialGradientPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Conical Gradient"</span>)<span class="operator">,</span>
<span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>ConicalGradientPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Texture"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>TexturePattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Solid"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>SolidPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Horizontal"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>HorPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Vertical"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>VerPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Cross"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>CrossPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Backward Diagonal"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>BDiagPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Forward Diagonal"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>FDiagPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Diagonal Cross"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>DiagCrossPattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 1"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense1Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 2"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense2Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 3"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense3Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 4"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense4Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 5"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense5Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 6"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense6Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"Dense 7"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>Dense7Pattern));
brushStyleComboBox<span class="operator">-</span><span class="operator">></span>addItem(tr(<span class="string">"None"</span>)<span class="operator">,</span> <span class="keyword">static_cast</span><span class="operator"><</span><span class="type">int</span><span class="operator">></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>NoBrush));
brushStyleLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"&Brush:"</span>));
brushStyleLabel<span class="operator">-</span><span class="operator">></span>setBuddy(brushStyleComboBox);
</pre>
<p>The <a href="../qtgui/qbrush.html">QBrush</a> class defines the fill pattern of shapes drawn by a <a href="../qtgui/qpainter.html">QPainter</a>. The default brush style is <a href="../qtcore/qt.html#BrushStyle-enum">Qt::NoBrush</a>. This style tells the painter to not fill shapes. The standard style for filling is <a href="../qtcore/qt.html#BrushStyle-enum">Qt::SolidPattern</a>.</p>
<p>We create a <a href="qcombobox.html">QComboBox</a> for the <b>Brush Style</b> parameter, and add the associated items (i.e. the values of the <a href="../qtcore/qt.html#BrushStyle-enum">Qt::BrushStyle</a> enum).</p>
<pre class="cpp">
otherOptionsLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Options:"</span>));
antialiasingCheckBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>(tr(<span class="string">"&Antialiasing"</span>));
</pre>
<p>Antialiasing is a feature that "smoothes" the pixels to create more even and less jagged lines, and can be applied using <a href="../qtgui/qpainter.html">QPainter</a>'s render hints. <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.</p>
<p>We simply create a <a href="qcheckbox.html">QCheckBox</a> for the <b>Antialiasing</b> option.</p>
<pre class="cpp">
transformationsCheckBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>(tr(<span class="string">"&Transformations"</span>));
</pre>
<p>The <b>Transformations</b> option implies a manipulation of the coordinate system that will appear as if the rendered shape is rotated in three dimensions.</p>
<p>We use the <a href="../qtgui/qpainter.html#translate-1">QPainter::translate</a>(), <a href="../qtgui/qpainter.html#rotate">QPainter::rotate</a>() and <a href="../qtgui/qpainter.html#scale">QPainter::scale</a>() functions to implement this feature represented in the main application window by a simple <a href="qcheckbox.html">QCheckBox</a>.</p>
<pre class="cpp">
connect(shapeComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(shapeChanged()));
connect(penWidthSpinBox<span class="operator">,</span> SIGNAL(valueChanged(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(penChanged()));
connect(penStyleComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(penChanged()));
connect(penCapComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(penChanged()));
connect(penJoinComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(penChanged()));
connect(brushStyleComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type">int</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(brushChanged()));
connect(antialiasingCheckBox<span class="operator">,</span> SIGNAL(toggled(bool))<span class="operator">,</span>
renderArea<span class="operator">,</span> SLOT(setAntialiased(bool)));
connect(transformationsCheckBox<span class="operator">,</span> SIGNAL(toggled(bool))<span class="operator">,</span>
renderArea<span class="operator">,</span> SLOT(setTransformed(bool)));
</pre>
<p>Then we connect the parameter widgets with their associated slots using the static <a href="../qtcore/qobject.html#connect-4">QObject::connect</a>() function, ensuring that the <code>RenderArea</code> widget is updated whenever the user changes the shape, or any of the other parameters.</p>
<pre class="cpp">
<span class="type"><a href="qgridlayout.html">QGridLayout</a></span> <span class="operator">*</span>mainLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgridlayout.html">QGridLayout</a></span>;
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">0</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">3</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(renderArea<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">4</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(shapeLabel<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(shapeComboBox<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penWidthLabel<span class="operator">,</span> <span class="number">3</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penWidthSpinBox<span class="operator">,</span> <span class="number">3</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penStyleLabel<span class="operator">,</span> <span class="number">4</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penStyleComboBox<span class="operator">,</span> <span class="number">4</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penCapLabel<span class="operator">,</span> <span class="number">3</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penCapComboBox<span class="operator">,</span> <span class="number">3</span><span class="operator">,</span> <span class="number">3</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penJoinLabel<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(penJoinComboBox<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">3</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(brushStyleLabel<span class="operator">,</span> <span class="number">4</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(brushStyleComboBox<span class="operator">,</span> <span class="number">4</span><span class="operator">,</span> <span class="number">3</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(otherOptionsLabel<span class="operator">,</span> <span class="number">5</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(antialiasingCheckBox<span class="operator">,</span> <span class="number">5</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(transformationsCheckBox<span class="operator">,</span> <span class="number">5</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignRight);
setLayout(mainLayout);
shapeChanged();
penChanged();
brushChanged();
antialiasingCheckBox<span class="operator">-</span><span class="operator">></span>setChecked(<span class="keyword">true</span>);
setWindowTitle(tr(<span class="string">"Basic Drawing"</span>));
}
</pre>
<p>Finally, we add the various widgets to a layout, and call the <code>shapeChanged()</code>, <code>penChanged()</code>, and <code>brushChanged()</code> slots to initialize the application. We also turn on antialiasing.</p>
<pre class="cpp">
<span class="type">void</span> Window<span class="operator">::</span>shapeChanged()
{
RenderArea<span class="operator">::</span>Shape shape <span class="operator">=</span> RenderArea<span class="operator">::</span>Shape(shapeComboBox<span class="operator">-</span><span class="operator">></span>itemData(
shapeComboBox<span class="operator">-</span><span class="operator">></span>currentIndex()<span class="operator">,</span> IdRole)<span class="operator">.</span>toInt());
renderArea<span class="operator">-</span><span class="operator">></span>setShape(shape);
}
</pre>
<p>The <code>shapeChanged()</code> slot is called whenever the user changes the currently active shape.</p>
<p>First we retrieve the shape the user has chosen using the <a href="qcombobox.html#itemData">QComboBox::itemData</a>() function. This function returns the data for the given role in the given index in the combobox. We use <a href="qcombobox.html#currentIndex-prop">QComboBox::currentIndex</a>() to retrieve the index of the shape, and the role is defined by the <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::ItemDataRole</a> enum; <code>IdRole</code> is an alias for <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a>.</p>
<p>Note that <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a> is only the first role that can be used for application-specific purposes. If you need to store different data in the same index, you can use different roles by simply incrementing the value of <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a>, for example: '<a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a> + 1' and '<a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a> + 2'. However, it is a good programming practice to give each role their own name: 'myFirstRole = <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a> + 1' and 'mySecondRole = <a href="../qtcore/qt.html#ItemDataRole-enum">Qt::UserRole</a> + 2'. Even though we only need a single role in this particular example, we add the following line of code to the beginning of the <code>window.cpp</code> file.</p>
<pre class="cpp">
<span class="keyword">const</span> <span class="type">int</span> IdRole <span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>UserRole;
</pre>
<p>The <a href="qcombobox.html#itemData">QComboBox::itemData</a>() function returns the data as a <a href="../qtcore/qvariant.html">QVariant</a>, so we need to cast the data to <code>RenderArea::Shape</code>. If there is no data for the given role, the function returns QVariant::Invalid.</p>
<p>In the end we call the <code>RenderArea::setShape()</code> slot to update the <code>RenderArea</code> widget.</p>
<pre class="cpp">
<span class="type">void</span> Window<span class="operator">::</span>penChanged()
{
<span class="type">int</span> width <span class="operator">=</span> penWidthSpinBox<span class="operator">-</span><span class="operator">></span>value();
<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenStyle style <span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenStyle(penStyleComboBox<span class="operator">-</span><span class="operator">></span>itemData(
penStyleComboBox<span class="operator">-</span><span class="operator">></span>currentIndex()<span class="operator">,</span> IdRole)<span class="operator">.</span>toInt());
<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenCapStyle cap <span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenCapStyle(penCapComboBox<span class="operator">-</span><span class="operator">></span>itemData(
penCapComboBox<span class="operator">-</span><span class="operator">></span>currentIndex()<span class="operator">,</span> IdRole)<span class="operator">.</span>toInt());
<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenJoinStyle join <span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>PenJoinStyle(penJoinComboBox<span class="operator">-</span><span class="operator">></span>itemData(
penJoinComboBox<span class="operator">-</span><span class="operator">></span>currentIndex()<span class="operator">,</span> IdRole)<span class="operator">.</span>toInt());
renderArea<span class="operator">-</span><span class="operator">></span>setPen(<span class="type"><a href="../qtgui/qpen.html">QPen</a></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>blue<span class="operator">,</span> width<span class="operator">,</span> style<span class="operator">,</span> cap<span class="operator">,</span> join));
}
</pre>
<p>We call the <code>penChanged()</code> slot whenever the user changes any of the pen parameters. Again we use the <a href="qcombobox.html#itemData">QComboBox::itemData</a>() function to retrieve the parameters, and then we call the <code>RenderArea::setPen()</code> slot to update the <code>RenderArea</code> widget.</p>
<pre class="cpp">
<span class="type">void</span> Window<span class="operator">::</span>brushChanged()
{
<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>BrushStyle style <span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>BrushStyle(brushStyleComboBox<span class="operator">-</span><span class="operator">></span>itemData(
</pre>
<p>The brushChanged() slot is called whenever the user changes the brush parameter which we retrieve using the <a href="qcombobox.html#itemData">QComboBox::itemData</a>() function as before.</p>
<pre class="cpp">
<span class="keyword">if</span> (style <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>LinearGradientPattern) {
<span class="type"><a href="../qtgui/qlineargradient.html">QLinearGradient</a></span> linearGradient(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">100</span>);
linearGradient<span class="operator">.</span>setColorAt(<span class="number">0.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>white);
linearGradient<span class="operator">.</span>setColorAt(<span class="number">0.2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>green);
linearGradient<span class="operator">.</span>setColorAt(<span class="number">1.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>black);
renderArea<span class="operator">-</span><span class="operator">></span>setBrush(linearGradient);
</pre>
<p>If the brush parameter is a gradient fill, special actions are required.</p>
<p>The <a href="../qtgui/qgradient.html">QGradient</a> class is used in combination with <a href="../qtgui/qbrush.html">QBrush</a> to specify gradient fills. Qt currently supports three types of gradient fills: linear, radial and conical. Each of these is represented by a subclass of <a href="../qtgui/qgradient.html">QGradient</a>: <a href="../qtgui/qlineargradient.html">QLinearGradient</a>, <a href="../qtgui/qradialgradient.html">QRadialGradient</a> and <a href="../qtgui/qconicalgradient.html">QConicalGradient</a>.</p>
<p>So if the brush style is <a href="../qtcore/qt.html#BrushStyle-enum">Qt::LinearGradientPattern</a>, we first create a <a href="../qtgui/qlineargradient.html">QLinearGradient</a> object with interpolation area between the coordinates passed as arguments to the constructor. The positions are specified using logical coordinates. Then we set the gradient's colors using the <a href="../qtgui/qgradient.html#setColorAt">QGradient::setColorAt</a>() function. The colors is defined using stop points which are composed by a position (between 0 and 1) and a <a href="../qtgui/qcolor.html">QColor</a>. The set of stop points describes how the gradient area should be filled. A gradient can have an arbitrary number of stop points.</p>
<p>In the end we call <code>RenderArea::setBrush()</code> slot to update the <code>RenderArea</code> widget's brush with the <a href="../qtgui/qlineargradient.html">QLinearGradient</a> object.</p>
<pre class="cpp">
} <span class="keyword">else</span> <span class="keyword">if</span> (style <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>RadialGradientPattern) {
<span class="type"><a href="../qtgui/qradialgradient.html">QRadialGradient</a></span> radialGradient(<span class="number">50</span><span class="operator">,</span> <span class="number">50</span><span class="operator">,</span> <span class="number">50</span><span class="operator">,</span> <span class="number">70</span><span class="operator">,</span> <span class="number">70</span>);
radialGradient<span class="operator">.</span>setColorAt(<span class="number">0.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>white);
radialGradient<span class="operator">.</span>setColorAt(<span class="number">0.2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>green);
radialGradient<span class="operator">.</span>setColorAt(<span class="number">1.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>black);
renderArea<span class="operator">-</span><span class="operator">></span>setBrush(radialGradient);
} <span class="keyword">else</span> <span class="keyword">if</span> (style <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>ConicalGradientPattern) {
<span class="type"><a href="../qtgui/qconicalgradient.html">QConicalGradient</a></span> conicalGradient(<span class="number">50</span><span class="operator">,</span> <span class="number">50</span><span class="operator">,</span> <span class="number">150</span>);
conicalGradient<span class="operator">.</span>setColorAt(<span class="number">0.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>white);
conicalGradient<span class="operator">.</span>setColorAt(<span class="number">0.2</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>green);
conicalGradient<span class="operator">.</span>setColorAt(<span class="number">1.0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>black);
renderArea<span class="operator">-</span><span class="operator">></span>setBrush(conicalGradient);
</pre>
<p>A similar pattern of actions, as the one used for <a href="../qtgui/qlineargradient.html">QLinearGradient</a>, is used in the cases of <a href="../qtcore/qt.html#BrushStyle-enum">Qt::RadialGradientPattern</a> and <a href="../qtcore/qt.html#BrushStyle-enum">Qt::ConicalGradientPattern</a>.</p>
<p>The only difference is the arguments passed to the constructor: Regarding the <a href="../qtgui/qradialgradient.html">QRadialGradient</a> constructor the first argument is the center, and the second the radial gradient's radius. The third argument is optional, but can be used to define the focal point of the gradient inside the circle (the default focal point is the circle center). Regarding the <a href="../qtgui/qconicalgradient.html">QConicalGradient</a> constructor, the first argument specifies the center of the conical, and the second specifies the start angle of the interpolation.</p>
<pre class="cpp">
} <span class="keyword">else</span> <span class="keyword">if</span> (style <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>TexturePattern) {
renderArea<span class="operator">-</span><span class="operator">></span>setBrush(<span class="type"><a href="../qtgui/qbrush.html">QBrush</a></span>(<span class="type"><a href="../qtgui/qpixmap.html">QPixmap</a></span>(<span class="string">":/images/brick.png"</span>)));
</pre>
<p>If the brush style is <a href="../qtcore/qt.html#BrushStyle-enum">Qt::TexturePattern</a> we create a <a href="../qtgui/qbrush.html">QBrush</a> from a <a href="../qtgui/qpixmap.html">QPixmap</a>. Then we call <code>RenderArea::setBrush()</code> slot to update the <code>RenderArea</code> widget with the newly created brush.</p>
<pre class="cpp">
} <span class="keyword">else</span> {
renderArea<span class="operator">-</span><span class="operator">></span>setBrush(<span class="type"><a href="../qtgui/qbrush.html">QBrush</a></span>(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>green<span class="operator">,</span> style));
}
}
</pre>
<p>Otherwise we simply create a brush with the given style and a green color, and then call <code>RenderArea::setBrush()</code> slot to update the <code>RenderArea</code> widget with the newly created brush.</p>
<a name="renderarea-class-definition"></a>
<h2 id="renderarea-class-definition">RenderArea Class Definition</h2>
<p>The <code>RenderArea</code> class inherits <a href="qwidget.html">QWidget</a>, and renders multiple copies of the currently active shape using a <a href="../qtgui/qpainter.html">QPainter</a>.</p>
<pre class="cpp">
<span class="keyword">class</span> RenderArea : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
<span class="keyword">enum</span> Shape { Line<span class="operator">,</span> Points<span class="operator">,</span> Polyline<span class="operator">,</span> Polygon<span class="operator">,</span> Rect<span class="operator">,</span> RoundedRect<span class="operator">,</span> Ellipse<span class="operator">,</span> Arc<span class="operator">,</span>
Chord<span class="operator">,</span> Pie<span class="operator">,</span> Path<span class="operator">,</span> Text<span class="operator">,</span> Pixmap };
RenderArea(<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"><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> setShape(Shape shape);
<span class="type">void</span> setPen(<span class="keyword">const</span> <span class="type"><a href="../qtgui/qpen.html">QPen</a></span> <span class="operator">&</span>pen);
<span class="type">void</span> setBrush(<span class="keyword">const</span> <span class="type"><a href="../qtgui/qbrush.html">QBrush</a></span> <span class="operator">&</span>brush);
<span class="type">void</span> setAntialiased(bool antialiased);
<span class="type">void</span> setTransformed(bool transformed);
<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>:
Shape shape;
<span class="type"><a href="../qtgui/qpen.html">QPen</a></span> pen;
<span class="type"><a href="../qtgui/qbrush.html">QBrush</a></span> brush;
bool antialiased;
bool transformed;
<span class="type"><a href="../qtgui/qpixmap.html">QPixmap</a></span> pixmap;
};
</pre>
<p>First we define a public <code>Shape</code> enum to hold the different shapes that can be rendered by the widget (i.e the shapes that can be rendered by a <a href="../qtgui/qpainter.html">QPainter</a>). Then we reimplement the constructor as well as two of <a href="qwidget.html">QWidget</a>'s public functions: <a href="qwidget.html#minimumSizeHint-prop">minimumSizeHint()</a> and <a href="qwidget.html#sizeHint-prop">sizeHint()</a>.</p>
<p>We also reimplement the <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>() function to be able to draw the currently active shape according to the specified parameters.</p>
<p>We declare several private slots: The <code>setShape()</code> slot changes the <code>RenderArea</code>'s shape, the <code>setPen()</code> and <code>setBrush()</code> slots modify the widget's pen and brush, and the <code>setAntialiased()</code> and <code>setTransformed()</code> slots modify the widget's respective properties.</p>
<a name="renderarea-class-implementation"></a>
<h2 id="renderarea-class-implementation">RenderArea Class Implementation</h2>
<p>In the constructor we initialize some of the widget's variables.</p>
<pre class="cpp">
RenderArea<span class="operator">::</span>RenderArea(<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)
{
shape <span class="operator">=</span> Polygon;
antialiased <span class="operator">=</span> <span class="keyword">false</span>;
transformed <span class="operator">=</span> <span class="keyword">false</span>;
pixmap<span class="operator">.</span>load(<span class="string">":/images/qt-logo.png"</span>);
setBackgroundRole(<span class="type"><a href="../qtgui/qpalette.html">QPalette</a></span><span class="operator">::</span>Base);
setAutoFillBackground(<span class="keyword">true</span>);
}
</pre>
<p>We set its shape to be a <b>Polygon</b>, its antialiased property to be false and we load an image into the widget's pixmap variable. In the end we set the widget's background role, defining the brush from the widget's <a href="qwidget.html#palette-prop">palette</a> that will be used to render the background. <a href="../qtgui/qpalette.html#ColorRole-enum">QPalette::Base</a> is typically white.</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> RenderArea<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">400</span><span class="operator">,</span> <span class="number">200</span>);
}
</pre>
<p>The <code>RenderArea</code> inherits <a href="qwidget.html">QWidget</a>'s <a href="qwidget.html#sizeHint-prop">sizeHint</a> property holding the recommended size for the widget. If the value of this property is an invalid size, no size is recommended.</p>
<p>The default implementation of the <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>() function returns an invalid size if there is no layout for the widget, and returns the layout's preferred size otherwise.</p>
<p>Our reimplementation of the function returns a <a href="../qtcore/qsize.html">QSize</a> with a 400 pixels width and a 200 pixels height.</p>
<pre class="cpp">
<span class="type"><a href="../qtcore/qsize.html">QSize</a></span> RenderArea<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">100</span><span class="operator">,</span> <span class="number">100</span>);
}
</pre>
<p><code>RenderArea</code> also inherits <a href="qwidget.html">QWidget</a>'s <a href="qwidget.html#minimumSizeHint-prop">minimumSizeHint</a> property holding the recommended minimum size for the widget. Again, if the value of this property is an invalid size, no size is recommended.</p>
<p>The default implementation of <a href="qwidget.html#minimumSizeHint-prop">QWidget::minimumSizeHint</a>() returns an invalid size if there is no layout for the widget, and returns the layout's minimum size otherwise.</p>
<p>Our reimplementation of the function returns a <a href="../qtcore/qsize.html">QSize</a> with a 100 pixels width and a 100 pixels height.</p>
<pre class="cpp">
<span class="type">void</span> RenderArea<span class="operator">::</span>setShape(Shape shape)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>shape <span class="operator">=</span> shape;
update();
}
<span class="type">void</span> RenderArea<span class="operator">::</span>setPen(<span class="keyword">const</span> <span class="type"><a href="../qtgui/qpen.html">QPen</a></span> <span class="operator">&</span>pen)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>pen <span class="operator">=</span> pen;
update();
}
<span class="type">void</span> RenderArea<span class="operator">::</span>setBrush(<span class="keyword">const</span> <span class="type"><a href="../qtgui/qbrush.html">QBrush</a></span> <span class="operator">&</span>brush)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>brush <span class="operator">=</span> brush;
update();
}
</pre>
<p>The public <code>setShape()</code>, <code>setPen()</code> and <code>setBrush()</code> slots are called whenever we want to modify a <code>RenderArea</code> widget's shape, pen or brush. We set the shape, pen or brush according to the slot parameter, and call <a href="qwidget.html#update">QWidget::update</a>() to make the changes visible in the <code>RenderArea</code> widget.</p>
<p>The <a href="qwidget.html#update">QWidget::update</a>() slot does not cause an immediate repaint; instead it schedules a paint event for processing when Qt returns to the main event loop.</p>
<pre class="cpp">
<span class="type">void</span> RenderArea<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();
}
<span class="type">void</span> RenderArea<span class="operator">::</span>setTransformed(bool transformed)
{
<span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>transformed <span class="operator">=</span> transformed;
update();
}
</pre>
<p>With the <code>setAntialiased()</code> and <code>setTransformed()</code> slots we change the state of the properties according to the slot parameter, and call the <a href="qwidget.html#update">QWidget::update</a>() slot to make the changes visible in the <code>RenderArea</code> widget.</p>
<pre class="cpp">
<span class="type">void</span> RenderArea<span class="operator">::</span>paintEvent(<span class="type"><a href="../qtgui/qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span> <span class="comment">/* event */</span>)
{
<span class="keyword">static</span> <span class="keyword">const</span> <span class="type"><a href="../qtcore/qpoint.html">QPoint</a></span> points<span class="operator">[</span><span class="number">4</span><span class="operator">]</span> <span class="operator">=</span> {
<span class="type"><a href="../qtcore/qpoint.html">QPoint</a></span>(<span class="number">10</span><span class="operator">,</span> <span class="number">80</span>)<span class="operator">,</span>
<span class="type"><a href="../qtcore/qpoint.html">QPoint</a></span>(<span class="number">20</span><span class="operator">,</span> <span class="number">10</span>)<span class="operator">,</span>
<span class="type"><a href="../qtcore/qpoint.html">QPoint</a></span>(<span class="number">80</span><span class="operator">,</span> <span class="number">30</span>)<span class="operator">,</span>
<span class="type"><a href="../qtcore/qpoint.html">QPoint</a></span>(<span class="number">90</span><span class="operator">,</span> <span class="number">70</span>)
};
<span class="type"><a href="../qtcore/qrect.html">QRect</a></span> rect(<span class="number">10</span><span class="operator">,</span> <span class="number">20</span><span class="operator">,</span> <span class="number">80</span><span class="operator">,</span> <span class="number">60</span>);
<span class="type"><a href="../qtgui/qpainterpath.html">QPainterPath</a></span> path;
path<span class="operator">.</span>moveTo(<span class="number">20</span><span class="operator">,</span> <span class="number">80</span>);
path<span class="operator">.</span>lineTo(<span class="number">20</span><span class="operator">,</span> <span class="number">30</span>);
path<span class="operator">.</span>cubicTo(<span class="number">80</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">50</span><span class="operator">,</span> <span class="number">50</span><span class="operator">,</span> <span class="number">80</span><span class="operator">,</span> <span class="number">80</span>);
<span class="type">int</span> startAngle <span class="operator">=</span> <span class="number">20</span> <span class="operator">*</span> <span class="number">16</span>;
<span class="type">int</span> arcLength <span class="operator">=</span> <span class="number">120</span> <span class="operator">*</span> <span class="number">16</span>;
</pre>
<p>Then we reimplement the <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>() function. The first thing we do is to create the graphical objects we will need to draw the various shapes.</p>
<p>We create a vector of four <a href="../qtcore/qpoint.html">QPoint</a>s. We use this vector to render the <b>Points</b>, <b>Polyline</b> and <b>Polygon</b> shapes. Then we create a <a href="../qtcore/qrect.html">QRect</a>, defining a rectangle in the plane, which we use as the bounding rectangle for all the shapes excluding the <b>Path</b> and the <b>Pixmap</b>.</p>
<p>We also create a <a href="../qtgui/qpainterpath.html">QPainterPath</a>. The <a href="../qtgui/qpainterpath.html">QPainterPath</a> class provides a container for painting operations, enabling graphical shapes to be constructed and reused. A painter path is an object composed of a number of graphical building blocks, such as rectangles, ellipses, lines, and curves. For more information about the <a href="../qtgui/qpainterpath.html">QPainterPath</a> class, see the <a href="qtwidgets-painting-painterpaths-example.html">Painter Paths</a> example. In this example, we create a painter path composed of one straight line and a Bezier curve.</p>
<p>In addition we define a start angle and an arc length that we will use when drawing the <b>Arc</b>, <b>Chord</b> and <b>Pie</b> shapes.</p>
<pre class="cpp">
<span class="type"><a href="../qtgui/qpainter.html">QPainter</a></span> painter(<span class="keyword">this</span>);
painter<span class="operator">.</span>setPen(pen);
painter<span class="operator">.</span>setBrush(brush);
<span class="keyword">if</span> (antialiased)
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> <span class="keyword">true</span>);
</pre>
<p>We create a <a href="../qtgui/qpainter.html">QPainter</a> for the <code>RenderArea</code> widget, and set the painters pen and brush according to the <code>RenderArea</code>'s pen and brush. If the <b>Antialiasing</b> parameter option is checked, we also set the painter's render hints. <a href="../qtgui/qpainter.html#RenderHint-enum">QPainter::Antialiasing</a> indicates that the engine should antialias edges of primitives if possible.</p>
<pre class="cpp">
<span class="keyword">for</span> (<span class="type">int</span> x <span class="operator">=</span> <span class="number">0</span>; x <span class="operator"><</span> width(); x <span class="operator">+</span><span class="operator">=</span> <span class="number">100</span>) {
<span class="keyword">for</span> (<span class="type">int</span> y <span class="operator">=</span> <span class="number">0</span>; y <span class="operator"><</span> height(); y <span class="operator">+</span><span class="operator">=</span> <span class="number">100</span>) {
painter<span class="operator">.</span>save();
painter<span class="operator">.</span>translate(x<span class="operator">,</span> y);
</pre>
<p>Finally, we render the multiple copies of the <code>RenderArea</code>'s shape. The number of copies is depending on the size of the <code>RenderArea</code> widget, and we calculate their positions using two <code>for</code> loops and the widgets height and width.</p>
<p>For each copy we first save the current painter state (pushes the state onto a stack). Then we translate the coordinate system, using the <a href="../qtgui/qpainter.html#translate-1">QPainter::translate</a>() function, to the position determined by the variables of the <code>for</code> loops. If we omit this translation of the coordinate system all the copies of the shape will be rendered on top of each other in the top left cormer of the <code>RenderArea</code> widget.</p>
<pre class="cpp">
<span class="keyword">if</span> (transformed) {
painter<span class="operator">.</span>translate(<span class="number">50</span><span class="operator">,</span> <span class="number">50</span>);
painter<span class="operator">.</span>rotate(<span class="number">60.0</span>);
painter<span class="operator">.</span>scale(<span class="number">0.6</span><span class="operator">,</span> <span class="number">0.9</span>);
painter<span class="operator">.</span>translate(<span class="operator">-</span><span class="number">50</span><span class="operator">,</span> <span class="operator">-</span><span class="number">50</span>);
}
</pre>
<p>If the <b>Transformations</b> parameter option is checked, we do an additional translation of the coordinate system before we rotate the coordinate system 60 degrees clockwise using the <a href="../qtgui/qpainter.html#rotate">QPainter::rotate</a>() function and scale it down in size using the <a href="../qtgui/qpainter.html#scale">QPainter::scale</a>() function. In the end we translate the coordinate system back to where it was before we rotated and scaled it.</p>
<p>Now, when rendering the shape, it will appear as if it was rotated in three dimensions.</p>
<pre class="cpp">
<span class="keyword">switch</span> (shape) {
<span class="keyword">case</span> Line:
painter<span class="operator">.</span>drawLine(rect<span class="operator">.</span>bottomLeft()<span class="operator">,</span> rect<span class="operator">.</span>topRight());
<span class="keyword">break</span>;
<span class="keyword">case</span> Points:
painter<span class="operator">.</span>drawPoints(points<span class="operator">,</span> <span class="number">4</span>);
<span class="keyword">break</span>;
<span class="keyword">case</span> Polyline:
painter<span class="operator">.</span>drawPolyline(points<span class="operator">,</span> <span class="number">4</span>);
<span class="keyword">break</span>;
<span class="keyword">case</span> Polygon:
painter<span class="operator">.</span>drawPolygon(points<span class="operator">,</span> <span class="number">4</span>);
<span class="keyword">break</span>;
<span class="keyword">case</span> Rect:
painter<span class="operator">.</span>drawRect(rect);
<span class="keyword">break</span>;
<span class="keyword">case</span> RoundedRect:
painter<span class="operator">.</span>drawRoundedRect(rect<span class="operator">,</span> <span class="number">25</span><span class="operator">,</span> <span class="number">25</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>RelativeSize);
<span class="keyword">break</span>;
<span class="keyword">case</span> Ellipse:
painter<span class="operator">.</span>drawEllipse(rect);
<span class="keyword">break</span>;
<span class="keyword">case</span> Arc:
painter<span class="operator">.</span>drawArc(rect<span class="operator">,</span> startAngle<span class="operator">,</span> arcLength);
<span class="keyword">break</span>;
<span class="keyword">case</span> Chord:
painter<span class="operator">.</span>drawChord(rect<span class="operator">,</span> startAngle<span class="operator">,</span> arcLength);
<span class="keyword">break</span>;
<span class="keyword">case</span> Pie:
painter<span class="operator">.</span>drawPie(rect<span class="operator">,</span> startAngle<span class="operator">,</span> arcLength);
<span class="keyword">break</span>;
<span class="keyword">case</span> Path:
painter<span class="operator">.</span>drawPath(path);
<span class="keyword">break</span>;
<span class="keyword">case</span> Text:
painter<span class="operator">.</span>drawText(rect<span class="operator">,</span>
<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignCenter<span class="operator">,</span>
tr(<span class="string">"Qt by\nThe Qt Company"</span>));
<span class="keyword">break</span>;
<span class="keyword">case</span> Pixmap:
painter<span class="operator">.</span>drawPixmap(<span class="number">10</span><span class="operator">,</span> <span class="number">10</span><span class="operator">,</span> pixmap);
}
</pre>
<p>Next, we identify the <code>RenderArea</code>'s shape, and render it using the associated <a href="../qtgui/qpainter.html">QPainter</a> drawing function:</p>
<ul>
<li><a href="../qtgui/qpainter.html#drawLine-1">QPainter::drawLine</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawPoints-2">QPainter::drawPoints</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawPolyline-2">QPainter::drawPolyline</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawPolygon-2">QPainter::drawPolygon</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawRect-2">QPainter::drawRect</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawRoundedRect-2">QPainter::drawRoundedRect</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawEllipse-4">QPainter::drawEllipse</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawArc-1">QPainter::drawArc</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawChord-2">QPainter::drawChord</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawPie-2">QPainter::drawPie</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawPath">QPainter::drawPath</a>(),</li>
<li><a href="../qtgui/qpainter.html#drawText-1">QPainter::drawText</a>() or</li>
<li><a href="../qtgui/qpainter.html#drawPixmap-7">QPainter::drawPixmap</a>()</li>
</ul>
<p>Before we started rendering, we saved the current painter state (pushes the state onto a stack). The rationale for this is that we calculate each shape copy's position relative to the same point in the coordinate system. When translating the coordinate system, we lose the knowledge of this point unless we save the current painter state <i>before</i> we start the translating process.</p>
<pre class="cpp">
painter<span class="operator">.</span>restore();
}
}
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> <span class="keyword">false</span>);
painter<span class="operator">.</span>setPen(palette()<span class="operator">.</span>dark()<span class="operator">.</span>color());
painter<span class="operator">.</span>setBrush(<span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>NoBrush);
painter<span class="operator">.</span>drawRect(<span class="type"><a href="../qtcore/qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> width() <span class="operator">-</span> <span class="number">1</span><span class="operator">,</span> height() <span class="operator">-</span> <span class="number">1</span>));
}
</pre>
<p>Then, when we are finished rendering a copy of the shape we can restore the original painter state, with its associated coordinate system, using the <a href="../qtgui/qpainter.html#restore">QPainter::restore</a>() function. In this way we ensure that the next shape copy will be rendered in the correct position.</p>
<p>We could translate the coordinate system back using <a href="../qtgui/qpainter.html#translate-1">QPainter::translate</a>() instead of saving the painter state. But since we in addition to translating the coordinate system (when the <b>Transformation</b> parameter option is checked) both rotate and scale the coordinate system, the easiest solution is to save the current painter state.</p>
<p>Files:</p>
<ul>
<li><a href="qtwidgets-painting-basicdrawing-basicdrawing-pro.html">painting/basicdrawing/basicdrawing.pro</a></li>
<li><a href="qtwidgets-painting-basicdrawing-basicdrawing-qrc.html">painting/basicdrawing/basicdrawing.qrc</a></li>
<li><a href="qtwidgets-painting-basicdrawing-main-cpp.html">painting/basicdrawing/main.cpp</a></li>
<li><a href="qtwidgets-painting-basicdrawing-renderarea-cpp.html">painting/basicdrawing/renderarea.cpp</a></li>
<li><a href="qtwidgets-painting-basicdrawing-renderarea-h.html">painting/basicdrawing/renderarea.h</a></li>
<li><a href="qtwidgets-painting-basicdrawing-window-cpp.html">painting/basicdrawing/window.cpp</a></li>
<li><a href="qtwidgets-painting-basicdrawing-window-h.html">painting/basicdrawing/window.h</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/painting/basicdrawing/images/brick.png">painting/basicdrawing/images/brick.png</a></li>
<li><a href="images/used-in-examples/painting/basicdrawing/images/qt-logo.png">painting/basicdrawing/images/qt-logo.png</a></li>
</ul>
</div>
<!-- @@@painting/basicdrawing -->
</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
>
4706
