0
|
1 |
/****************************************************************************
|
|
2 |
**
|
|
3 |
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
|
|
4 |
** All rights reserved.
|
|
5 |
** Contact: Nokia Corporation (qt-info@nokia.com)
|
|
6 |
**
|
|
7 |
** This file is part of the documentation of the Qt Toolkit.
|
|
8 |
**
|
|
9 |
** $QT_BEGIN_LICENSE:LGPL$
|
|
10 |
** No Commercial Usage
|
|
11 |
** This file contains pre-release code and may not be distributed.
|
|
12 |
** You may use this file in accordance with the terms and conditions
|
|
13 |
** contained in the Technology Preview License Agreement accompanying
|
|
14 |
** this package.
|
|
15 |
**
|
|
16 |
** GNU Lesser General Public License Usage
|
|
17 |
** Alternatively, this file may be used under the terms of the GNU Lesser
|
|
18 |
** General Public License version 2.1 as published by the Free Software
|
|
19 |
** Foundation and appearing in the file LICENSE.LGPL included in the
|
|
20 |
** packaging of this file. Please review the following information to
|
|
21 |
** ensure the GNU Lesser General Public License version 2.1 requirements
|
|
22 |
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
|
|
23 |
**
|
|
24 |
** In addition, as a special exception, Nokia gives you certain additional
|
|
25 |
** rights. These rights are described in the Nokia Qt LGPL Exception
|
|
26 |
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
|
|
27 |
**
|
|
28 |
** If you have questions regarding the use of this file, please contact
|
|
29 |
** Nokia at qt-info@nokia.com.
|
|
30 |
**
|
|
31 |
**
|
|
32 |
**
|
|
33 |
**
|
|
34 |
**
|
|
35 |
**
|
|
36 |
**
|
|
37 |
**
|
|
38 |
** $QT_END_LICENSE$
|
|
39 |
**
|
|
40 |
****************************************************************************/
|
|
41 |
|
|
42 |
/*!
|
|
43 |
\example widgets/analogclock
|
|
44 |
\title Analog Clock Example
|
|
45 |
|
|
46 |
The Analog Clock example shows how to draw the contents of a custom
|
|
47 |
widget.
|
|
48 |
|
|
49 |
\image analogclock-example.png Screenshot of the Analog Clock example
|
|
50 |
|
|
51 |
This example also demonstrates how the transformation and scaling
|
|
52 |
features of QPainter can be used to make drawing custom widgets
|
|
53 |
easier.
|
|
54 |
|
|
55 |
\section1 AnalogClock Class Definition
|
|
56 |
|
|
57 |
The \c AnalogClock class provides a clock widget with hour and minute
|
|
58 |
hands that is automatically updated every few seconds.
|
|
59 |
We subclass \l QWidget and reimplement the standard
|
|
60 |
\l{QWidget::paintEvent()}{paintEvent()} function to draw the clock face:
|
|
61 |
|
|
62 |
\snippet examples/widgets/analogclock/analogclock.h 0
|
|
63 |
|
|
64 |
\section1 AnalogClock Class Implementation
|
|
65 |
|
|
66 |
\snippet examples/widgets/analogclock/analogclock.cpp 1
|
|
67 |
|
|
68 |
When the widget is constructed, we set up a one-second timer to
|
|
69 |
keep track of the current time, and we connect it to the standard
|
|
70 |
\l{QWidget::update()}{update()} slot so that the clock face is
|
|
71 |
updated when the timer emits the \l{QTimer::timeout()}{timeout()}
|
|
72 |
signal.
|
|
73 |
|
|
74 |
Finally, we resize the widget so that it is displayed at a
|
|
75 |
reasonable size.
|
|
76 |
|
|
77 |
\snippet examples/widgets/analogclock/analogclock.cpp 8
|
|
78 |
\snippet examples/widgets/analogclock/analogclock.cpp 10
|
|
79 |
|
|
80 |
The \c paintEvent() function is called whenever the widget's
|
|
81 |
contents need to be updated. This happens when the widget is
|
|
82 |
first shown, and when it is covered then exposed, but it is also
|
|
83 |
executed when the widget's \l{QWidget::update()}{update()} slot
|
|
84 |
is called. Since we connected the timer's
|
|
85 |
\l{QTimer::timeout()}{timeout()} signal to this slot, it will be
|
|
86 |
called at least once every five seconds.
|
|
87 |
|
|
88 |
Before we set up the painter and draw the clock, we first define
|
|
89 |
two lists of \l {QPoint}s and two \l{QColor}s that will be used
|
|
90 |
for the hour and minute hands. The minute hand's color has an
|
|
91 |
alpha component of 191, meaning that it's 75% opaque.
|
|
92 |
|
|
93 |
We also determine the length of the widget's shortest side so that we
|
|
94 |
can fit the clock face inside the widget. It is also useful to determine
|
|
95 |
the current time before we start drawing.
|
|
96 |
|
|
97 |
\snippet examples/widgets/analogclock/analogclock.cpp 11
|
|
98 |
\snippet examples/widgets/analogclock/analogclock.cpp 12
|
|
99 |
\snippet examples/widgets/analogclock/analogclock.cpp 13
|
|
100 |
\snippet examples/widgets/analogclock/analogclock.cpp 14
|
|
101 |
|
|
102 |
The contents of custom widgets are drawn with a QPainter.
|
|
103 |
Painters can be used to draw on any QPaintDevice, but they are
|
|
104 |
usually used with widgets, so we pass the widget instance to the
|
|
105 |
painter's constructor.
|
|
106 |
|
|
107 |
We call QPainter::setRenderHint() with QPainter::Antialiasing to
|
|
108 |
turn on antialiasing. This makes drawing of diagonal lines much
|
|
109 |
smoother.
|
|
110 |
|
|
111 |
The translation moves the origin to the center of the widget, and
|
|
112 |
the scale operation ensures that the following drawing operations
|
|
113 |
are scaled to fit within the widget. We use a scale factor that
|
|
114 |
let's us use x and y coordinates between -100 and 100, and that
|
|
115 |
ensures that these lie within the length of the widget's shortest
|
|
116 |
side.
|
|
117 |
|
|
118 |
To make our code simpler, we will draw a fixed size clock face that will
|
|
119 |
be positioned and scaled so that it lies in the center of the widget.
|
|
120 |
|
|
121 |
The painter takes care of all the transformations made during the
|
|
122 |
paint event, and ensures that everything is drawn correctly. Letting
|
|
123 |
the painter handle transformations is often easier than performing
|
|
124 |
manual calculations just to draw the contents of a custom widget.
|
|
125 |
|
|
126 |
\img analogclock-viewport.png
|
|
127 |
|
|
128 |
We draw the hour hand first, using a formula that rotates the coordinate
|
|
129 |
system counterclockwise by a number of degrees determined by the current
|
|
130 |
hour and minute. This means that the hand will be shown rotated clockwise
|
|
131 |
by the required amount.
|
|
132 |
|
|
133 |
\snippet examples/widgets/analogclock/analogclock.cpp 15
|
|
134 |
\snippet examples/widgets/analogclock/analogclock.cpp 16
|
|
135 |
|
|
136 |
We set the pen to be Qt::NoPen because we don't want any outline,
|
|
137 |
and we use a solid brush with the color appropriate for
|
|
138 |
displaying hours. Brushes are used when filling in polygons and
|
|
139 |
other geometric shapes.
|
|
140 |
|
|
141 |
\snippet examples/widgets/analogclock/analogclock.cpp 17
|
|
142 |
\snippet examples/widgets/analogclock/analogclock.cpp 19
|
|
143 |
|
|
144 |
We save and restore the transformation matrix before and after the
|
|
145 |
rotation because we want to place the minute hand without having to
|
|
146 |
take into account any previous rotations.
|
|
147 |
|
|
148 |
\snippet examples/widgets/analogclock/analogclock.cpp 20
|
|
149 |
\codeline
|
|
150 |
\snippet examples/widgets/analogclock/analogclock.cpp 21
|
|
151 |
|
|
152 |
We draw markers around the edge of the clock for each hour. We
|
|
153 |
draw each marker then rotate the coordinate system so that the
|
|
154 |
painter is ready for the next one.
|
|
155 |
|
|
156 |
\snippet examples/widgets/analogclock/analogclock.cpp 22
|
|
157 |
\snippet examples/widgets/analogclock/analogclock.cpp 23
|
|
158 |
|
|
159 |
The minute hand is rotated in a similar way to the hour hand.
|
|
160 |
|
|
161 |
\snippet examples/widgets/analogclock/analogclock.cpp 25
|
|
162 |
\codeline
|
|
163 |
\snippet examples/widgets/analogclock/analogclock.cpp 26
|
|
164 |
|
|
165 |
Again, we draw markers around the edge of the clock, but this
|
|
166 |
time to indicate minutes. We skip multiples of 5 to avoid drawing
|
|
167 |
minute markers on top of hour markers.
|
|
168 |
*/
|