<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qt4-arthur.qdoc -->
<title>Qt 4.8: The Arthur Paint System</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>The Arthur Paint System</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qt4-interview.html" />
<link rel="next" href="qt4-scribe.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qt4-interview.html">The Interview Framework</a>
<a class="nextPage" href="qt4-scribe.html">The Scribe Classes</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#architecture">Architecture</a></li>
<li class="level2"><a href="#a-look-back-at-qt-3">A Look Back at Qt 3</a></li>
<li class="level2"><a href="#how-painting-is-done-in-qt-4">How Painting is Done in Qt 4</a></li>
<li class="level1"><a href="#new-features-in-the-qt-4-paint-system">New Features in the Qt 4 Paint System</a></li>
<li class="level2"><a href="#gradient-brushes">Gradient Brushes</a></li>
<li class="level2"><a href="#alpha-blended-drawing">Alpha-Blended Drawing</a></li>
<li class="level2"><a href="#qpainter-and-qglwidget">QPainter and QGLWidget</a></li>
<li class="level2"><a href="#anti-aliased-edges">Anti-Aliased Edges</a></li>
<li class="level2"><a href="#extensive-use-of-native-graphics-operations">Extensive Use of Native Graphics Operations</a></li>
<li class="level2"><a href="#painter-paths">Painter Paths</a></li>
<li class="level2"><a href="#widget-double-buffering">Widget Double-Buffering</a></li>
<li class="level2"><a href="#pen-and-brush-transformation">Pen and Brush Transformation</a></li>
<li class="level2"><a href="#custom-filled-pens">Custom Filled Pens</a></li>
<li class="level2"><a href="#qimage-as-a-paint-device">QImage as a Paint Device</a></li>
<li class="level2"><a href="#svg-rendering-support">SVG Rendering Support</a></li>
</ul>
</div>
<h1 class="title">The Arthur Paint System</h1>
<span class="subtitle"></span>
<!-- $$$qt4-arthur.html-description -->
<div class="descr"> <a name="details"></a>
<p>This document describes Qt 4's painting system, providing a comparison between the approaches used by Qt when rendering graphics in Qt 3 and Qt 4.</p>
<a name="architecture"></a>
<h2>Architecture</h2>
<p>The Qt 4 Paint System is primarily based on the classes <a href="qpainter.html">QPainter</a>, <a href="qpaintdevice.html">QPaintDevice</a>, and <a href="qpaintengine.html">QPaintEngine</a>. <a href="qpainter.html">QPainter</a> is the class used to perform drawing operations, such as drawLine() and drawRect(). <a href="qpaintdevice.html">QPaintDevice</a> represents a device that can be painted on using a <a href="qpainter.html">QPainter</a>; both <a href="qwidget.html">QWidget</a> and <a href="qpixmap.html">QPixmap</a> are QPaintDevices. <a href="qpaintengine.html">QPaintEngine</a> provides the interface that the painter uses to draw onto different types of devices.</p>
<a name="a-look-back-at-qt-3"></a>
<h3>A Look Back at Qt 3</h3>
<p>In Qt 3, <a href="qpainter.html">QPainter</a> could be used to draw on widgets and pixmaps. (It could also be used to draw to printers on Windows and Mac OS X.) When other paint devices needed to be supported, such as <a href="qprinter.html">QPrinter</a> on X11, this was done by deriving from <a href="qpaintdevice.html">QPaintDevice</a> and reimplementing the virtual function QPaintDevice::cmd(). A reimplemented paint device was treated as an external device.</p>
<p><a href="qpainter.html">QPainter</a> was capable of recognizing external devices and could serialize each paint operation to the reimplemented cmd() function. This allowed reimplementation of arbitrary devices, but the approach has some disadvantages which we have addressed in Qt 4. One of these is that an external device could not reuse any functionality implemented in <a href="qpainter.html">QPainter</a> since <a href="qpainter.html">QPainter</a> was tied to widget/pixmap painting on that platform. Supporting multiple device backends, such as OpenGL, was therefore inconvenient and not very efficient.</p>
<p>This has led us to devise a more convenient and intuitive API for Qt 4.</p>
<a name="how-painting-is-done-in-qt-4"></a>
<h3>How Painting is Done in Qt 4</h3>
<p>In Qt 4 we have introduced the <a href="qpaintengine.html">QPaintEngine</a> abstract class. Implementations of this class provide the concrete functionality needed to draw to specific device types. The <a href="qpaintengine.html">QPaintEngine</a> class is only used internally by <a href="qpainter.html">QPainter</a> and <a href="qpaintdevice.html">QPaintDevice</a>, and it is hidden from application programmers unless they reimplement their own device types for their own <a href="qpaintengine.html">QPaintEngine</a> subclasses. Qt currently provides paint engines for the following platforms and APIs:</p>
<ul>
<li>A pixel-based engine for the Windows platform that is also used to draw onto QImages on all platforms</li>
<li>OpenGL on all platforms</li>
<li>PostScript on Linux, Unix, and Mac OS X</li>
<li>QuickDraw and CoreGraphics on Mac OS X</li>
<li>X11 and the X Render Extension on Linux and Unix systems</li>
</ul>
<p>To implement support for a new backend, you must derive from <a href="qpaintengine.html">QPaintEngine</a> and reimplement its virtual functions. You also need to derive from <a href="qpaintdevice.html">QPaintDevice</a> and reimplement the virtual function <a href="qpaintdevice.html#paintEngine">QPaintDevice::paintEngine</a>() to tell <a href="qpainter.html">QPainter</a> which paint engine should be used to draw on this particular device.</p>
<p>The main benefit of this approach is that all painting follows the same painting pipeline. This means that adding support for new features and providing default implementations for unsupported ones has become much simpler.</p>
<a name="new-features-in-the-qt-4-paint-system"></a>
<h2>New Features in the Qt 4 Paint System</h2>
<a name="gradient-brushes"></a>
<h3>Gradient Brushes</h3>
<p>With Qt 4 it is possible to fill shapes using gradient brushes. A gradient in this case is used to describe the transition from one color at a given point to different color at another point. A gradient can span from one color to another or over a number of colors by specifying multiple colors at positions in the gradient area. Qt 4 supports linear, radial, and conical gradients.</p>
<p>Linear gradients are specified using two control points. Setting a linear gradient brush is done by creating a <a href="qlineargradient.html">QLinearGradient</a> object and setting it as a brush.</p>
<pre class="cpp"> <span class="type"><a href="qlineargradient.html">QLinearGradient</a></span> gradient(<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>);
gradient<span class="operator">.</span>setColorAt(<span class="number">0</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>red);
gradient<span class="operator">.</span>setColorAt(<span class="number">0.5</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>green);
gradient<span class="operator">.</span>setColorAt(<span class="number">1</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>blue);
painter<span class="operator">.</span>setBrush(gradient);
painter<span class="operator">.</span>drawRect(<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>);</pre>
<p>The code shown above produces a pattern as show in the following pixmap:</p>
<p class="centerAlign"><img src="images/diagonalGradient.png" alt="" /></p><p>Radial gradients are specified using a center, a radius, and a focal point. Setting a radial brush is done by creating a <a href="qradialgradient.html">QRadialGradient</a> object and setting it as a brush.</p>
<pre class="cpp"> <span class="type"><a href="qradialgradient.html">QRadialGradient</a></span> gradient(<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">30</span><span class="operator">,</span> <span class="number">30</span>);
gradient<span class="operator">.</span>setColorAt(<span class="number">0.2</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white);
gradient<span class="operator">.</span>setColorAt(<span class="number">0.8</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>green);
gradient<span class="operator">.</span>setColorAt(<span class="number">1</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>black);
painter<span class="operator">.</span>setBrush(gradient);
painter<span class="operator">.</span>drawEllipse(<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>);</pre>
<p>The code shown above produces a pattern as shown in the following pixmap:</p>
<p class="centerAlign"><img src="images/radialGradient.png" alt="" /></p><p>Conical gradients are specified using a center and a start angle. Setting a conical brush is done by creating a <a href="qconicalgradient.html">QConicalGradient</a> object and setting it as a brush.</p>
<pre class="cpp"> <span class="type"><a href="qconicalgradient.html">QConicalGradient</a></span> gradient(<span class="number">60</span><span class="operator">,</span> <span class="number">40</span><span class="operator">,</span> <span class="number">0</span>);
gradient<span class="operator">.</span>setColorAt(<span class="number">0</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>black);
gradient<span class="operator">.</span>setColorAt(<span class="number">0.4</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>green);
gradient<span class="operator">.</span>setColorAt(<span class="number">0.6</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white);
gradient<span class="operator">.</span>setColorAt(<span class="number">1</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>black);
painter<span class="operator">.</span>setBrush(gradient);
painter<span class="operator">.</span>drawEllipse(<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>);</pre>
<p>The code shown above produces a pattern as shown in the following pixmap:</p>
<p class="centerAlign"><img src="images/conicalGradient.png" alt="" /></p><a name="alpha-blended-drawing"></a>
<h3>Alpha-Blended Drawing</h3>
<p>With Qt 4 we support alpha-blended outlining and filling. The alpha channel of a color is defined through <a href="qcolor.html">QColor</a>. The alpha channel specifies the transparency effect, 0 represents a fully transparent color, while 255 represents a fully opaque color. For example:</p>
<pre class="cpp"> <span class="comment">// Specfiy semi-transparent red</span>
painter<span class="operator">.</span>setBrush(<span class="type"><a href="qcolor.html">QColor</a></span>(<span class="number">255</span><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">127</span>));
painter<span class="operator">.</span>drawRect(<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">2</span><span class="operator">,</span> height());
<span class="comment">// Specify semi-transparent blue</span>
painter<span class="operator">.</span>setBrush(<span class="type"><a href="qcolor.html">QColor</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">255</span><span class="operator">,</span> <span class="number">127</span>));
painter<span class="operator">.</span>drawRect(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> width()<span class="operator">,</span> height()<span class="operator">/</span><span class="number">2</span>);</pre>
<p>The code shown above produces the following output:</p>
<p class="centerAlign"><img src="images/alphafill.png" alt="" /></p><p>Alpha-blended drawing is supported on Windows, Mac OS X, and on X11 systems that have the X Render extension installed.</p>
<a name="qpainter-and-qglwidget"></a>
<h3>QPainter and QGLWidget</h3>
<p>It is now possible to open a <a href="qpainter.html">QPainter</a> on a <a href="qglwidget.html">QGLWidget</a> as if it were a normal <a href="qwidget.html">QWidget</a>. One huge benefit from this is that we utilize the high performance of OpenGL for most drawing operations, such as transformations and pixmap drawing.</p>
<a name="anti-aliased-edges"></a>
<h3>Anti-Aliased Edges</h3>
<p>On platforms where this is supported by the native drawing API, we provide the option of turning on anti-aliased edges when drawing graphics primitives.</p>
<pre class="cpp"> <span class="comment">// One line without anti-aliasing</span>
painter<span class="operator">.</span>drawLine(<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">2</span><span class="operator">,</span> height());
<span class="comment">// One line with anti-aliasing</span>
painter<span class="operator">.</span>setRenderHint(<span class="type"><a href="qpainter.html">QPainter</a></span><span class="operator">::</span>Antialiasing);
painter<span class="operator">.</span>drawLine(width()<span class="operator">/</span><span class="number">2</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> width()<span class="operator">,</span> height());</pre>
<p>This produces the following output:</p>
<p class="centerAlign"><img src="images/antialiased.png" alt="" /></p><p>Anti-aliasing is supported when drawing to a <a href="qimage.html">QImage</a> and on all systems, except on X11 when XRender is not present.</p>
<a name="extensive-use-of-native-graphics-operations"></a>
<h3>Extensive Use of Native Graphics Operations</h3>
<p>Where this makes sense, Qt uses native graphics operations. The benefit we gain from this is that these operations can potentially be performed in hardware, giving significant speed improvements over many pure-software implementations.</p>
<p>Among these are native transformations (Mac OS X and OpenGL), making painting with a world matrix much faster. Some pixmap operations have also been moved closer to the underlying hardware implementations.</p>
<a name="painter-paths"></a>
<h3>Painter Paths</h3>
<p>A painter path is an object composed of a number of graphical building blocks, such as rectangles, ellipses, lines, and curves. A painter path can be used for filling, outlining, and for clipping. The main advantage of painter paths over normal drawing operations is that it is possible to build up non-linear shapes which can be drawn later in one go.</p>
<p>Building blocks can be joined in closed subpaths, such as a rectangle or an ellipse, or they can exist independently as unclosed subpaths, although an unclosed path will not be filled.</p>
<p>Below is a code example on how a path can be used. The painter in this case has a pen width of 3 and a light blue brush. We first add a rectangle, which becomes a closed subpath. We then add two bezier curves, and finally draw the entire path.</p>
<pre class="cpp"> <span class="type"><a href="qpainterpath.html">QPainterPath</a></span> path;
path<span class="operator">.</span>addRect(<span class="number">20</span><span class="operator">,</span> <span class="number">20</span><span class="operator">,</span> <span class="number">60</span><span class="operator">,</span> <span class="number">60</span>);
path<span class="operator">.</span>moveTo(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span>);
path<span class="operator">.</span>cubicTo(<span class="number">99</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">99</span><span class="operator">,</span> <span class="number">99</span>);
path<span class="operator">.</span>cubicTo(<span class="number">0</span><span class="operator">,</span> <span class="number">99</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">0</span><span class="operator">,</span> <span class="number">0</span>);
painter<span class="operator">.</span>drawPath(path);</pre>
<p>The code above produces the following output:</p>
<p class="centerAlign"><img src="images/pathexample.png" alt="" /></p><a name="widget-double-buffering"></a>
<h3>Widget Double-Buffering</h3>
<p>In Qt 4, all widgets are double-buffered by default.</p>
<p>In previous versions of Qt double-buffering was achieved by painting to an off-screen pixmap then copying the pixmap to the screen. For example:</p>
<pre class="cpp"> <span class="type"><a href="qpixmap.html">QPixmap</a></span> buffer(size());
<span class="type"><a href="qpainter.html">QPainter</a></span> painter(<span class="operator">&</span>buffer);
<span class="comment">// Paint code here</span>
painter<span class="operator">.</span>end();
bitBlt(<span class="keyword">this</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="operator">&</span>buffer);</pre>
<p>Since the double-buffering is handled by <a href="qwidget.html">QWidget</a> internally this now becomes:</p>
<pre class="cpp"> <span class="type"><a href="qpainter.html">QPainter</a></span> painter(<span class="keyword">this</span>);
<span class="comment">// Paint code here</span>
painter<span class="operator">.</span>end();</pre>
<p>Double-buffering is turned on by default, but can be turned off for individual widgets by setting the widget attribute <a href="qt.html#WidgetAttribute-enum">Qt::WA_PaintOnScreen</a>.</p>
<pre class="cpp"> unbufferedWidget<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_PaintOnScreen);</pre>
<a name="pen-and-brush-transformation"></a>
<h3>Pen and Brush Transformation</h3>
<p>In Qt 3, pens and brushes weren't affected by the painter's transformation matrix. For example, if you drew a rectangle with a pen width of 1 using a scaled painter, the resulting line width would still be 1. This made it difficult to implement features such as zooming and high-resolution printing.</p>
<p>In Qt 4, pens and brushes honor the painter's transformation matrix.</p>
<p>Note that this feature is still in development and not yet supported on all platforms.</p>
<a name="custom-filled-pens"></a>
<h3>Custom Filled Pens</h3>
<p>In Qt 4, it is possible to specify how an outline should be filled. It can be a solid color or a <a href="qbrush.html">QBrush</a>, which makes it possible to specify both texture and gradient fills for both text and outlines.</p>
<pre class="cpp"> <span class="type"><a href="qlineargradient.html">QLinearGradient</a></span> gradient(<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>);
gradient<span class="operator">.</span>setColorAt(<span class="number">0</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>blue);
gradient<span class="operator">.</span>setColorAt(<span class="number">1</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>red);
painter<span class="operator">.</span>setPen(<span class="type"><a href="qpen.html">QPen</a></span>(gradient<span class="operator">,</span> <span class="number">0</span>));
<span class="keyword">for</span> (<span class="type">int</span> y<span class="operator">=</span>fontSize; y<span class="operator"><</span><span class="number">100</span>; y<span class="operator">+</span><span class="operator">=</span>fontSize)
drawText(<span class="number">0</span><span class="operator">,</span> y<span class="operator">,</span> text);</pre>
<p>The code above produces the following output:</p>
<p class="centerAlign"><img src="images/gradientText.png" alt="" /></p><a name="qimage-as-a-paint-device"></a>
<h3>QImage as a Paint Device</h3>
<p>A great improvement of Qt 4 over previous versions it that it now provides a pixel-based raster paint engine which allows users to open a painter on a <a href="qimage.html">QImage</a>. The <a href="qimage.html">QImage</a> paint engine supports the full feature set of <a href="qpainter.html">QPainter</a> (paths, antialiasing, alphablending, etc.) and can be used on all platforms.</p>
<p>One advantage of this is that it is possible to guarantee the pixel exactness of any drawing operation in a platform-independent way.</p>
<p>Painting on an image is as simple as drawing on any other paint device.</p>
<pre class="cpp"> <span class="type"><a href="qimage.html">QImage</a></span> image(<span class="number">100</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">32</span>);
<span class="type"><a href="qpainter.html">QPainter</a></span> painter(<span class="operator">&</span>image);
<span class="comment">// painter commands.</span>
painter<span class="operator">.</span>end();</pre>
<a name="svg-rendering-support"></a>
<h3>SVG Rendering Support</h3>
<p><a href="http://www.w3.org/Graphics/SVG/About.html#scalable-vector-graphics">Scalable Vector Graphics</a> (SVG) is an language for describing both static and animated two-dimensional vector graphics. Qt includes support for the <a href="http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static">static features</a> of <a href="http://www.w3.org/TR/SVGMobile12/">SVG 1.2 Tiny</a>, taking advantage of the improved paint system in Qt 4. SVG drawings can be rendered onto any <a href="qpaintdevice.html">QPaintDevice</a> subclass, such as <a href="qwidget.html">QWidget</a>, <a href="qimage.html">QImage</a>, and <a href="qglwidget.html">QGLWidget</a>, to take advantage of specific advantages of each device. This approach gives developers the flexibility to experiment, in order to find the best solution for each application.</p>
<p class="centerAlign"><img src="images/svg-image.png" alt="" /></p><p>Since SVG is an XML-based format, the <a href="qtxml.html">QtXml</a> module is required to read SVG files. For this reason, classes for SVG handling are provided separately in the <a href="qtsvg.html">QtSvg</a> module.</p>
<p>Displaying an SVG drawing in an application is as simple as displaying a bitmap image. <a href="qsvgwidget.html">QSvgWidget</a> is a display widget that can be placed in an appropriate place in a user interface, and new content can be loaded as required. For example, a predetermined file can be loaded and displayed in a widget with little effort:</p>
<pre class="cpp"> <span class="type"><a href="qsvgwidget.html">QSvgWidget</a></span> window(<span class="string">":/files/spheres.svg"</span>);
window<span class="operator">.</span>show();</pre>
<p>For applications with more specialized requirements, the <a href="qsvgrenderer.html">QSvgRenderer</a> class provides more control over the way SVG drawings are rendered and animated.</p>
</div>
<!-- @@@qt4-arthur.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qt4-interview.html">The Interview Framework</a>
<a class="nextPage" href="qt4-scribe.html">The Scribe Classes</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
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.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
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. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
