<?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" />
<!-- svggenerator.qdoc -->
<title>Qt 4.8: SVG Generator Example</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><a href="all-examples.html">Examples</a></li>
<li>SVG Generator Example</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">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#the-displaywidget-class">The DisplayWidget Class</a></li>
<li class="level1"><a href="#the-window-class">The Window Class</a></li>
<li class="level1"><a href="#further-reading">Further Reading</a></li>
</ul>
</div>
<h1 class="title">SVG Generator Example</h1>
<span class="subtitle"></span>
<!-- $$$painting/svggenerator-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="painting-svggenerator-displaywidget-cpp.html">painting/svggenerator/displaywidget.cpp</a></li>
<li><a href="painting-svggenerator-displaywidget-h.html">painting/svggenerator/displaywidget.h</a></li>
<li><a href="painting-svggenerator-window-cpp.html">painting/svggenerator/window.cpp</a></li>
<li><a href="painting-svggenerator-window-h.html">painting/svggenerator/window.h</a></li>
<li><a href="painting-svggenerator-forms-window-ui.html">painting/svggenerator/forms/window.ui</a></li>
<li><a href="painting-svggenerator-main-cpp.html">painting/svggenerator/main.cpp</a></li>
<li><a href="painting-svggenerator-svggenerator-pro.html">painting/svggenerator/svggenerator.pro</a></li>
<li><a href="painting-svggenerator-svggenerator-qrc.html">painting/svggenerator/svggenerator.qrc</a></li>
</ul>
<p>The SVG Generator example shows how to add SVG file export to applications.<p class="centerAlign"><img src="images/svggenerator-example.png" alt="" /></p><p>Scalable Vector Graphics (SVG) is an XML-based language for describing two-dimensional vector graphics. Qt provides classes for rendering and generating SVG drawings. This example allows the user to create a simple picture and save it to an SVG file.</p>
<p>The example consists of two classes: <tt>Window</tt> and <tt>DisplayWidget</tt>.</p>
<p>The <tt>Window</tt> class contains the application logic and constructs the user interface from a Qt Designer UI file as described in the <a href="designer-using-a-ui-file.html#the-multiple-inheritance-approach">Qt Designer manual</a>. It also contains the code to write an SVG file.</p>
<p>The <tt>DisplayWidget</tt> class performs all the work of painting a picture on screen. Since we want the SVG to resemble this picture as closely as possible, we make this code available to the <tt>Window</tt> class so that it can be used to generate SVG files.</p>
<a name="the-displaywidget-class"></a>
<h2>The DisplayWidget Class</h2>
<p>The <tt>DisplayWidget</tt> class displays a drawing consisting of a selection of elements chosen by the user. These are defined using <tt>Shape</tt> and <tt>Background</tt> enums that are included within the class definition:</p>
<pre class="cpp"> <span class="keyword">class</span> DisplayWidget : <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 { House <span class="operator">=</span> <span class="number">0</span><span class="operator">,</span> Car <span class="operator">=</span> <span class="number">1</span> };
<span class="keyword">enum</span> Background { Sky <span class="operator">=</span> <span class="number">0</span><span class="operator">,</span> Trees <span class="operator">=</span> <span class="number">1</span><span class="operator">,</span> Road <span class="operator">=</span> <span class="number">2</span> };
DisplayWidget(<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="qcolor.html">QColor</a></span> color() <span class="keyword">const</span>;
<span class="type">void</span> paint(<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">&</span>painter);
<span class="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> setBackground(Background background);
<span class="type">void</span> setColor(<span class="keyword">const</span> <span class="type"><a href="qcolor.html">QColor</a></span> <span class="operator">&</span>color);
<span class="type">void</span> setShape(Shape shape);
<span class="keyword">protected</span>:
<span class="type">void</span> paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event);
<span class="keyword">private</span>:
Background background;
<span class="type"><a href="qcolor.html">QColor</a></span> shapeColor;
Shape shape;
<span class="type"><a href="qhash.html">QHash</a></span><span class="operator"><</span>Shape<span class="operator">,</span><span class="type"><a href="qpainterpath.html">QPainterPath</a></span><span class="operator">></span> shapeMap;
<span class="type"><a href="qpainterpath.html">QPainterPath</a></span> moon;
<span class="type"><a href="qpainterpath.html">QPainterPath</a></span> tree;
};</pre>
<p>Much of this class is used to configure the appearance of the drawing. The <tt>paintEvent()</tt> and <tt>paint()</tt> functions are most relevant to the purpose of this example, so we will describe these here and leave the reader to look at the source code for the example to see how shapes and colors are handled.</p>
<p>We reimplement the <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>() function to display the drawing on screen:</p>
<pre class="cpp"> <span class="type">void</span> DisplayWidget<span class="operator">::</span>paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span> <span class="comment">/* event */</span>)
{
<span class="type"><a href="qpainter.html">QPainter</a></span> painter;
painter<span class="operator">.</span>begin(<span class="keyword">this</span>);
painter<span class="operator">.</span>setRenderHint(<span class="type"><a href="qpainter.html">QPainter</a></span><span class="operator">::</span>Antialiasing);
paint(painter);
painter<span class="operator">.</span>end();
}</pre>
<p>Here, we only construct a <a href="qpainter.html">QPainter</a> object, begin painting on the device and set a render hint for improved output quality before calling the <tt>paint()</tt> function to perform the painting itself. When this returns, we close the painter and return.</p>
<p>The <tt>paint()</tt> function is designed to be used for different painting tasks. In this example, we use it to draw on a <tt>DisplayWidget</tt> instance and on a <a href="qsvggenerator.html">QSvgGenerator</a> object. We show how the painting is performed to demonstrate that there is nothing device-specific about the process:</p>
<pre class="cpp"> <span class="type">void</span> DisplayWidget<span class="operator">::</span>paint(<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">&</span>painter)
{
painter<span class="operator">.</span>setClipRect(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">200</span>));
painter<span class="operator">.</span>setPen(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>NoPen);
<span class="keyword">switch</span> (background) {
<span class="keyword">case</span> Sky:
<span class="keyword">default</span>:
painter<span class="operator">.</span>fillRect(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">200</span>)<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>darkBlue);
painter<span class="operator">.</span>translate(<span class="number">145</span><span class="operator">,</span> <span class="number">10</span>);
painter<span class="operator">.</span>setBrush(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white);
painter<span class="operator">.</span>drawPath(moon);
painter<span class="operator">.</span>translate(<span class="operator">-</span><span class="number">145</span><span class="operator">,</span> <span class="operator">-</span><span class="number">10</span>);
<span class="keyword">break</span>;
<span class="keyword">case</span> Trees:
{
painter<span class="operator">.</span>fillRect(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">200</span>)<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>darkGreen);
painter<span class="operator">.</span>setBrush(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>green);
painter<span class="operator">.</span>setPen(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>black);
<span class="keyword">for</span> (<span class="type">int</span> y <span class="operator">=</span> <span class="operator">-</span><span class="number">55</span><span class="operator">,</span> row <span class="operator">=</span> <span class="number">0</span>; y <span class="operator"><</span> <span class="number">200</span>; y <span class="operator">+</span><span class="operator">=</span> <span class="number">50</span><span class="operator">,</span> <span class="operator">+</span><span class="operator">+</span>row) {
<span class="type">int</span> xs;
<span class="keyword">if</span> (row <span class="operator">=</span><span class="operator">=</span> <span class="number">2</span> <span class="operator">|</span><span class="operator">|</span> row <span class="operator">=</span><span class="operator">=</span> <span class="number">3</span>)
xs <span class="operator">=</span> <span class="number">150</span>;
<span class="keyword">else</span>
xs <span class="operator">=</span> <span class="number">50</span>;
<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> <span class="number">200</span>; x <span class="operator">+</span><span class="operator">=</span> xs) {
painter<span class="operator">.</span>save();
painter<span class="operator">.</span>translate(x<span class="operator">,</span> y);
painter<span class="operator">.</span>drawPath(tree);
painter<span class="operator">.</span>restore();
}
}
<span class="keyword">break</span>;
}
<span class="keyword">case</span> Road:
painter<span class="operator">.</span>fillRect(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">200</span>)<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>gray);
painter<span class="operator">.</span>setPen(<span class="type"><a href="qpen.html">QPen</a></span>(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white<span class="operator">,</span> <span class="number">4</span><span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>DashLine));
painter<span class="operator">.</span>drawLine(<span class="type"><a href="qline.html">QLine</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">35</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">35</span>));
painter<span class="operator">.</span>drawLine(<span class="type"><a href="qline.html">QLine</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">165</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">165</span>));
<span class="keyword">break</span>;
}
painter<span class="operator">.</span>setBrush(shapeColor);
painter<span class="operator">.</span>setPen(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>black);
painter<span class="operator">.</span>translate(<span class="number">100</span><span class="operator">,</span> <span class="number">100</span>);
painter<span class="operator">.</span>drawPath(shapeMap<span class="operator">[</span>shape<span class="operator">]</span>);
}</pre>
<a name="the-window-class"></a>
<h2>The Window Class</h2>
<p>The <tt>Window</tt> class represents the example's window, containing the user interface, which has been created using Qt Designer:</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><span class="operator">,</span> <span class="keyword">private</span> Ui<span class="operator">::</span>Window
{
Q_OBJECT
<span class="keyword">public</span>:
Window(<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="keyword">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> saveSvg();
<span class="type">void</span> updateBackground(<span class="type">int</span> background);
<span class="type">void</span> updateColor();
<span class="type">void</span> updateShape(<span class="type">int</span> shape);
<span class="keyword">private</span>:
<span class="type"><a href="qstring.html">QString</a></span> path;
};</pre>
<p>As with the <tt>DisplayWidget</tt> class, we concentrate on the parts of the code which are concerned with painting and SVG generation. In the <tt>Window</tt> class, the <tt>saveSvg()</tt> function is called whenever the <b>Save As...</b> button is clicked; this connection was defined in the <tt>window.ui</tt> file using Qt Designer.</p>
<p>The start of the <tt>saveSvg()</tt> function performs the task of showing a file dialog so that the user can specify a SVG file to save the drawing to.</p>
<pre class="cpp"> <span class="type">void</span> Window<span class="operator">::</span>saveSvg()
{
<span class="type"><a href="qstring.html">QString</a></span> newPath <span class="operator">=</span> <span class="type"><a href="qfiledialog.html">QFileDialog</a></span><span class="operator">::</span>getSaveFileName(<span class="keyword">this</span><span class="operator">,</span> tr(<span class="string">"Save SVG"</span>)<span class="operator">,</span>
path<span class="operator">,</span> tr(<span class="string">"SVG files (*.svg)"</span>));
<span class="keyword">if</span> (newPath<span class="operator">.</span>isEmpty())
<span class="keyword">return</span>;
path <span class="operator">=</span> newPath;
<span class="type"><a href="qsvggenerator.html">QSvgGenerator</a></span> generator;
generator<span class="operator">.</span>setFileName(path);
generator<span class="operator">.</span>setSize(<span class="type"><a href="qsize.html">QSize</a></span>(<span class="number">200</span><span class="operator">,</span> <span class="number">200</span>));
generator<span class="operator">.</span>setViewBox(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">200</span><span class="operator">,</span> <span class="number">200</span>));
generator<span class="operator">.</span>setTitle(tr(<span class="string">"SVG Generator Example Drawing"</span>));
generator<span class="operator">.</span>setDescription(tr(<span class="string">"An SVG drawing created by the SVG Generator "</span>
<span class="string">"Example provided with Qt."</span>));
<span class="type"><a href="qpainter.html">QPainter</a></span> painter;
painter<span class="operator">.</span>begin(<span class="operator">&</span>generator);
displayWidget<span class="operator">-</span><span class="operator">></span>paint(painter);
painter<span class="operator">.</span>end();
}</pre>
<p>In the rest of the function, we set up the generator and configure it to generate output with the appropriate dimensions and write to the user-specified file. We paint on the <a href="qsvggenerator.html">QSvgGenerator</a> object in the same way that we paint on a widget, calling the <tt>DisplayWidget::paint()</tt> function so that we use exactly the same code that we used to display the drawing.</p>
<p>The generation process itself begins with the call to the painter's <a href="qpainter.html#begin">begin()</a> function and ends with call to its <a href="qpainter.html#end">end()</a> function. The <a href="qsvggenerator.html">QSvgGenerator</a> paint device relies on the explicit use of these functions to ensure that output is written to the file.</p>
<a name="further-reading"></a>
<h2>Further Reading</h2>
<p>The <a href="painting-svgviewer.html">SVG Viewer Example</a> shows how to display SVG drawings in an application, and can be used to show the contents of SVG files created by this example.</p>
<p>See the <a href="qtsvg.html">QtSvg</a> module documentation for more information about SVG and Qt's SVG classes.</p>
</div>
<!-- @@@painting/svggenerator -->
</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>
