[2] | 1 | /****************************************************************************
|
---|
| 2 | **
|
---|
[846] | 3 | ** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
|
---|
[561] | 4 | ** All rights reserved.
|
---|
| 5 | ** Contact: Nokia Corporation (qt-info@nokia.com)
|
---|
[2] | 6 | **
|
---|
| 7 | ** This file is part of the documentation of the Qt Toolkit.
|
---|
| 8 | **
|
---|
[846] | 9 | ** $QT_BEGIN_LICENSE:FDL$
|
---|
[2] | 10 | ** Commercial Usage
|
---|
| 11 | ** Licensees holding valid Qt Commercial licenses may use this file in
|
---|
| 12 | ** accordance with the Qt Commercial License Agreement provided with the
|
---|
[846] | 13 | ** Software or, alternatively, in accordance with the terms contained in a
|
---|
| 14 | ** written agreement between you and Nokia.
|
---|
[2] | 15 | **
|
---|
[846] | 16 | ** GNU Free Documentation License
|
---|
| 17 | ** Alternatively, this file may be used under the terms of the GNU Free
|
---|
| 18 | ** Documentation License version 1.3 as published by the Free Software
|
---|
| 19 | ** Foundation and appearing in the file included in the packaging of this
|
---|
| 20 | ** file.
|
---|
[2] | 21 | **
|
---|
[561] | 22 | ** If you have questions regarding the use of this file, please contact
|
---|
| 23 | ** Nokia at qt-info@nokia.com.
|
---|
[2] | 24 | ** $QT_END_LICENSE$
|
---|
| 25 | **
|
---|
| 26 | ****************************************************************************/
|
---|
| 27 |
|
---|
| 28 | /*!
|
---|
| 29 | \example widgets/imageviewer
|
---|
| 30 | \title Image Viewer Example
|
---|
| 31 |
|
---|
| 32 | The example shows how to combine QLabel and QScrollArea to
|
---|
| 33 | display an image. QLabel is typically used for displaying text,
|
---|
| 34 | but it can also display an image. QScrollArea provides a
|
---|
| 35 | scrolling view around another widget. If the child widget exceeds
|
---|
| 36 | the size of the frame, QScrollArea automatically provides scroll
|
---|
| 37 | bars.
|
---|
| 38 |
|
---|
| 39 | The example demonstrates how QLabel's ability to scale its
|
---|
| 40 | contents (QLabel::scaledContents), and QScrollArea's ability to
|
---|
| 41 | automatically resize its contents (QScrollArea::widgetResizable),
|
---|
| 42 | can be used to implement zooming and scaling features. In
|
---|
| 43 | addition the example shows how to use QPainter to print an image.
|
---|
| 44 |
|
---|
| 45 | \image imageviewer-example.png Screenshot of the Image Viewer example
|
---|
| 46 |
|
---|
| 47 | With the Image Viewer application, the users can view an image of
|
---|
| 48 | their choice. The \gui File menu gives the user the possibility
|
---|
| 49 | to:
|
---|
| 50 |
|
---|
| 51 | \list
|
---|
| 52 | \o \gui{Open...} - Open an image file
|
---|
| 53 | \o \gui{Print...} - Print an image
|
---|
| 54 | \o \gui{Exit} - Exit the application
|
---|
| 55 | \endlist
|
---|
| 56 |
|
---|
| 57 | Once an image is loaded, the \gui View menu allows the users to:
|
---|
| 58 |
|
---|
| 59 | \list
|
---|
| 60 | \o \gui{Zoom In} - Scale the image up by 25%
|
---|
| 61 | \o \gui{Zoom Out} - Scale the image down by 25%
|
---|
| 62 | \o \gui{Normal Size} - Show the image at its original size
|
---|
| 63 | \o \gui{Fit to Window} - Stretch the image to occupy the entire window
|
---|
| 64 | \endlist
|
---|
| 65 |
|
---|
| 66 | In addition the \gui Help menu provides the users with information
|
---|
| 67 | about the Image Viewer example in particular, and about Qt in
|
---|
| 68 | general.
|
---|
| 69 |
|
---|
| 70 | \section1 ImageViewer Class Definition
|
---|
| 71 |
|
---|
| 72 | \snippet examples/widgets/imageviewer/imageviewer.h 0
|
---|
| 73 |
|
---|
| 74 | The \c ImageViewer class inherits from QMainWindow. We reimplement
|
---|
| 75 | the constructor, and create several private slots to facilitate
|
---|
| 76 | the menu entries. In addition we create four private functions.
|
---|
| 77 |
|
---|
| 78 | We use \c createActions() and \c createMenus() when constructing
|
---|
| 79 | the \c ImageViewer widget. We use the \c updateActions() function
|
---|
| 80 | to update the menu entries when a new image is loaded, or when
|
---|
| 81 | the \gui {Fit to Window} option is toggled. The zoom slots use \c
|
---|
| 82 | scaleImage() to perform the zooming. In turn, \c
|
---|
| 83 | scaleImage() uses \c adjustScrollBar() to preserve the focal point after
|
---|
| 84 | scaling an image.
|
---|
| 85 |
|
---|
| 86 | \section1 ImageViewer Class Implementation
|
---|
| 87 |
|
---|
| 88 | \snippet examples/widgets/imageviewer/imageviewer.cpp 0
|
---|
| 89 |
|
---|
| 90 | In the constructor we first create the label and the scroll area.
|
---|
| 91 |
|
---|
| 92 | We set \c {imageLabel}'s size policy to \l
|
---|
| 93 | {QSizePolicy::Ignored}{ignored}, making the users able to scale
|
---|
| 94 | the image to whatever size they want when the \gui {Fit to Window}
|
---|
| 95 | option is turned on. Otherwise, the default size polizy (\l
|
---|
| 96 | {QSizePolicy::Preferred}{preferred}) will make scroll bars appear
|
---|
| 97 | when the scroll area becomes smaller than the label's minimum size
|
---|
| 98 | hint.
|
---|
| 99 |
|
---|
| 100 | We ensure that the label will scale its contents to fill all
|
---|
| 101 | available space, to enable the image to scale properly when
|
---|
| 102 | zooming. If we omitted to set the \c {imageLabel}'s \l
|
---|
| 103 | {QLabel::scaledContents}{scaledContents} property, zooming in
|
---|
| 104 | would enlarge the QLabel, but leave the pixmap at
|
---|
| 105 | its original size, exposing the QLabel's background.
|
---|
| 106 |
|
---|
| 107 | We make \c imageLabel the scroll area's child widget, and we make
|
---|
| 108 | \c scrollArea the central widget of the QMainWindow. At the end
|
---|
| 109 | we create the associated actions and menus, and customize the \c
|
---|
| 110 | {ImageViewer}'s appearance.
|
---|
| 111 |
|
---|
| 112 | \snippet examples/widgets/imageviewer/imageviewer.cpp 1
|
---|
| 113 | \snippet examples/widgets/imageviewer/imageviewer.cpp 2
|
---|
| 114 |
|
---|
| 115 | In the \c open() slot, we show a file dialog to the user. The
|
---|
| 116 | easiest way to create a QFileDialog is to use the static
|
---|
| 117 | convenience functions. QFileDialog::getOpenFileName() returns an
|
---|
| 118 | existing file selected by the user. If the user presses \gui
|
---|
| 119 | Cancel, QFileDialog returns an empty string.
|
---|
| 120 |
|
---|
| 121 | Unless the file name is a empty string, we check if the file's
|
---|
| 122 | format is an image format by constructing a QImage which tries to
|
---|
| 123 | load the image from the file. If the constructor returns a null
|
---|
| 124 | image, we use a QMessageBox to alert the user.
|
---|
| 125 |
|
---|
| 126 | The QMessageBox class provides a modal dialog with a short
|
---|
| 127 | message, an icon, and some buttons. As with QFileDialog the
|
---|
| 128 | easiest way to create a QMessageBox is to use its static
|
---|
| 129 | convenience functions. QMessageBox provides a range of different
|
---|
| 130 | messages arranged along two axes: severity (question,
|
---|
| 131 | information, warning and critical) and complexity (the number of
|
---|
| 132 | necessary response buttons). In this particular example an
|
---|
| 133 | information message with an \gui OK button (the default) is
|
---|
| 134 | sufficient, since the message is part of a normal operation.
|
---|
| 135 |
|
---|
| 136 | \snippet examples/widgets/imageviewer/imageviewer.cpp 3
|
---|
| 137 | \snippet examples/widgets/imageviewer/imageviewer.cpp 4
|
---|
| 138 |
|
---|
| 139 | If the format is supported, we display the image in \c imageLabel
|
---|
| 140 | by setting the label's \l {QLabel::pixmap}{pixmap}. Then we enable
|
---|
| 141 | the \gui Print and \gui {Fit to Window} menu entries and update
|
---|
| 142 | the rest of the view menu entries. The \gui Open and \gui Exit
|
---|
| 143 | entries are enabled by default.
|
---|
| 144 |
|
---|
| 145 | If the \gui {Fit to Window} option is turned off, the
|
---|
| 146 | QScrollArea::widgetResizable property is \c false and it is
|
---|
| 147 | our responsibility (not QScrollArea's) to give the QLabel a
|
---|
| 148 | reasonable size based on its contents. We call
|
---|
| 149 | \{QWidget::adjustSize()}{adjustSize()} to achieve this, which is
|
---|
| 150 | essentially the same as
|
---|
| 151 |
|
---|
| 152 | \snippet doc/src/snippets/code/doc_src_examples_imageviewer.qdoc 0
|
---|
| 153 |
|
---|
| 154 | In the \c print() slot, we first make sure that an image has been
|
---|
| 155 | loaded into the application:
|
---|
| 156 |
|
---|
| 157 | \snippet examples/widgets/imageviewer/imageviewer.cpp 5
|
---|
| 158 | \snippet examples/widgets/imageviewer/imageviewer.cpp 6
|
---|
| 159 |
|
---|
| 160 | If the application is built in debug mode, the \c Q_ASSERT() macro
|
---|
| 161 | will expand to
|
---|
| 162 |
|
---|
| 163 | \snippet doc/src/snippets/code/doc_src_examples_imageviewer.qdoc 1
|
---|
| 164 |
|
---|
| 165 | In release mode, the macro simply disappear. The mode can be set
|
---|
| 166 | in the application's \c .pro file. One way to do so is to add an
|
---|
| 167 | option to \gui qmake when building the appliction:
|
---|
| 168 |
|
---|
| 169 | \snippet doc/src/snippets/code/doc_src_examples_imageviewer.qdoc 2
|
---|
| 170 |
|
---|
| 171 | or
|
---|
| 172 |
|
---|
| 173 | \snippet doc/src/snippets/code/doc_src_examples_imageviewer.qdoc 3
|
---|
| 174 |
|
---|
| 175 | Another approach is to add this line directly to the \c .pro
|
---|
| 176 | file.
|
---|
| 177 |
|
---|
| 178 | \snippet examples/widgets/imageviewer/imageviewer.cpp 7
|
---|
| 179 | \snippet examples/widgets/imageviewer/imageviewer.cpp 8
|
---|
| 180 |
|
---|
| 181 | Then we present a print dialog allowing the user to choose a
|
---|
| 182 | printer and to set a few options. We construct a painter with a
|
---|
| 183 | QPrinter as the paint device. We set the painter's window
|
---|
| 184 | and viewport in such a way that the image is as large as possible
|
---|
| 185 | on the paper, but without altering its
|
---|
| 186 | \l{Qt::KeepAspectRatio}{aspect ratio}.
|
---|
| 187 |
|
---|
| 188 | In the end we draw the pixmap at position (0, 0).
|
---|
| 189 |
|
---|
| 190 | \snippet examples/widgets/imageviewer/imageviewer.cpp 9
|
---|
| 191 | \snippet examples/widgets/imageviewer/imageviewer.cpp 10
|
---|
| 192 |
|
---|
| 193 | We implement the zooming slots using the private \c scaleImage()
|
---|
| 194 | function. We set the scaling factors to 1.25 and 0.8,
|
---|
| 195 | respectively. These factor values ensure that a \gui {Zoom In}
|
---|
| 196 | action and a \gui {Zoom Out} action will cancel each other (since
|
---|
| 197 | 1.25 * 0.8 == 1), and in that way the normal image size can be
|
---|
| 198 | restored using the zooming features.
|
---|
| 199 |
|
---|
| 200 | The screenshots below show an image in its normal size, and the
|
---|
| 201 | same image after zooming in:
|
---|
| 202 |
|
---|
| 203 | \table
|
---|
| 204 | \row
|
---|
| 205 | \o \inlineimage imageviewer-original_size.png
|
---|
| 206 | \o \inlineimage imageviewer-zoom_in_1.png
|
---|
| 207 | \o \inlineimage imageviewer-zoom_in_2.png
|
---|
| 208 | \endtable
|
---|
| 209 |
|
---|
| 210 | \snippet examples/widgets/imageviewer/imageviewer.cpp 11
|
---|
| 211 | \snippet examples/widgets/imageviewer/imageviewer.cpp 12
|
---|
| 212 |
|
---|
| 213 | When zooming, we use the QLabel's ability to scale its contents.
|
---|
| 214 | Such scaling doesn't change the actual size hint of the contents.
|
---|
| 215 | And since the \l {QLabel::adjustSize()}{adjustSize()} function
|
---|
| 216 | use those size hint, the only thing we need to do to restore the
|
---|
| 217 | normal size of the currently displayed image is to call \c
|
---|
| 218 | adjustSize() and reset the scale factor to 1.0.
|
---|
| 219 |
|
---|
| 220 | \snippet examples/widgets/imageviewer/imageviewer.cpp 13
|
---|
| 221 | \snippet examples/widgets/imageviewer/imageviewer.cpp 14
|
---|
| 222 |
|
---|
| 223 | The \c fitToWindow() slot is called each time the user toggled
|
---|
| 224 | the \gui {Fit to Window} option. If the slot is called to turn on
|
---|
| 225 | the option, we tell the scroll area to resize its child widget
|
---|
| 226 | with the QScrollArea::setWidgetResizable() function. Then we
|
---|
| 227 | disable the \gui {Zoom In}, \gui {Zoom Out} and \gui {Normal
|
---|
| 228 | Size} menu entries using the private \c updateActions() function.
|
---|
| 229 |
|
---|
| 230 | If the \l {QScrollArea::widgetResizable} property is set to \c
|
---|
| 231 | false (the default), the scroll area honors the size of its child
|
---|
| 232 | widget. If this property is set to \c true, the scroll area will
|
---|
| 233 | automatically resize the widget in order to avoid scroll bars
|
---|
| 234 | where they can be avoided, or to take advantage of extra space.
|
---|
| 235 | But the scroll area will honor the minimum size hint of its child
|
---|
| 236 | widget independent of the widget resizable property. So in this
|
---|
| 237 | example we set \c {imageLabel}'s size policy to \l
|
---|
| 238 | {QSizePolicy::Ignored}{ignored} in the constructor, to avoid that
|
---|
| 239 | scroll bars appear when the scroll area becomes smaller than the
|
---|
| 240 | label's minimum size hint.
|
---|
| 241 |
|
---|
| 242 | The screenshots below shows an image in its normal size, and the
|
---|
| 243 | same image with the \gui {Fit to window} option turned on.
|
---|
| 244 | Enlarging the window will stretch the image further, as shown in
|
---|
| 245 | the third screenshot.
|
---|
| 246 |
|
---|
| 247 | \table
|
---|
| 248 | \row
|
---|
| 249 | \o \inlineimage imageviewer-original_size.png
|
---|
| 250 | \o \inlineimage imageviewer-fit_to_window_1.png
|
---|
| 251 | \o \inlineimage imageviewer-fit_to_window_2.png
|
---|
| 252 | \endtable
|
---|
| 253 |
|
---|
| 254 | If the slot is called to turn off the option, the
|
---|
| 255 | {QScrollArea::setWidgetResizable} property is set to \c false. We
|
---|
| 256 | also restore the image pixmap to its normal size by adjusting the
|
---|
| 257 | label's size to its content. And in the end we update the view
|
---|
| 258 | menu entries.
|
---|
| 259 |
|
---|
| 260 | \snippet examples/widgets/imageviewer/imageviewer.cpp 15
|
---|
| 261 | \snippet examples/widgets/imageviewer/imageviewer.cpp 16
|
---|
| 262 |
|
---|
| 263 | We implement the \c about() slot to create a message box
|
---|
| 264 | describing what the example is designed to show.
|
---|
| 265 |
|
---|
| 266 | \snippet examples/widgets/imageviewer/imageviewer.cpp 17
|
---|
| 267 | \snippet examples/widgets/imageviewer/imageviewer.cpp 18
|
---|
| 268 |
|
---|
| 269 | In the private \c createAction() function, we create the
|
---|
| 270 | actions providing the application features.
|
---|
| 271 |
|
---|
| 272 | We assign a short-cut key to each action and connect them to the
|
---|
| 273 | appropiate slots. We only enable the \c openAct and \c exitAxt at
|
---|
| 274 | the time of creation, the others are updated once an image has
|
---|
| 275 | been loaded into the application. In addition we make the \c
|
---|
| 276 | fitToWindowAct \l {QAction::checkable}{checkable}.
|
---|
| 277 |
|
---|
| 278 | \snippet examples/widgets/imageviewer/imageviewer.cpp 19
|
---|
| 279 | \snippet examples/widgets/imageviewer/imageviewer.cpp 20
|
---|
| 280 |
|
---|
| 281 | In the private \c createMenu() function, we add the previously
|
---|
| 282 | created actions to the \gui File, \gui View and \gui Help menus.
|
---|
| 283 |
|
---|
| 284 | The QMenu class provides a menu widget for use in menu bars,
|
---|
| 285 | context menus, and other popup menus. The QMenuBar class provides
|
---|
| 286 | a horizontal menu bar that consists of a list of pull-down menu
|
---|
| 287 | items. So at the end we put the menus in the \c {ImageViewer}'s
|
---|
| 288 | menu bar which we retrieve with the QMainWindow::menuBar()
|
---|
| 289 | function.
|
---|
| 290 |
|
---|
| 291 | \snippet examples/widgets/imageviewer/imageviewer.cpp 21
|
---|
| 292 | \snippet examples/widgets/imageviewer/imageviewer.cpp 22
|
---|
| 293 |
|
---|
| 294 | The private \c updateActions() function enables or disables the
|
---|
| 295 | \gui {Zoom In}, \gui {Zoom Out} and \gui {Normal Size} menu
|
---|
| 296 | entries depending on whether the \gui {Fit to Window} option is
|
---|
| 297 | turned on or off.
|
---|
| 298 |
|
---|
| 299 | \snippet examples/widgets/imageviewer/imageviewer.cpp 23
|
---|
| 300 | \snippet examples/widgets/imageviewer/imageviewer.cpp 24
|
---|
| 301 |
|
---|
| 302 | In \c scaleImage(), we use the \c factor parameter to calculate
|
---|
| 303 | the new scaling factor for the displayed image, and resize \c
|
---|
| 304 | imageLabel. Since we set the
|
---|
| 305 | \l{QLabel::scaledContents}{scaledContents} property to \c true in
|
---|
| 306 | the constructor, the call to QWidget::resize() will scale the
|
---|
| 307 | image displayed in the label. We also adjust the scroll bars to
|
---|
| 308 | preserve the focal point of the image.
|
---|
| 309 |
|
---|
| 310 | At the end, if the scale factor is less than 33.3% or greater
|
---|
| 311 | than 300%, we disable the respective menu entry to prevent the
|
---|
| 312 | image pixmap from becoming too large, consuming too much
|
---|
| 313 | resources in the window system.
|
---|
| 314 |
|
---|
| 315 | \snippet examples/widgets/imageviewer/imageviewer.cpp 25
|
---|
| 316 | \snippet examples/widgets/imageviewer/imageviewer.cpp 26
|
---|
| 317 |
|
---|
| 318 | Whenever we zoom in or out, we need to adjust the scroll bars in
|
---|
| 319 | consequence. It would have been tempting to simply call
|
---|
| 320 |
|
---|
| 321 | \snippet doc/src/snippets/code/doc_src_examples_imageviewer.qdoc 4
|
---|
| 322 |
|
---|
| 323 | but this would make the top-left corner the focal point, not the
|
---|
| 324 | center. Therefore we need to take into account the scroll bar
|
---|
| 325 | handle's size (the \l{QScrollBar::pageStep}{page step}).
|
---|
| 326 | */
|
---|