[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 graphicsview/diagramscene
|
---|
| 30 | \title Diagram Scene Example
|
---|
| 31 |
|
---|
| 32 | This example shows use of Qt's graphics framework.
|
---|
| 33 |
|
---|
| 34 | \image diagramscene.png
|
---|
| 35 |
|
---|
| 36 | The Diagram Scene example is an application in which you can
|
---|
| 37 | create a flowchart diagram. It is possible to add flowchart shapes
|
---|
| 38 | and text and connect the shapes by arrows as shown in the image
|
---|
| 39 | above. The shapes, arrows, and text can be given different
|
---|
| 40 | colors, and it is possible to change the font, style, and
|
---|
| 41 | underline of the text.
|
---|
| 42 |
|
---|
[846] | 43 | The Qt graphics view framework is designed to manage and display
|
---|
| 44 | custom 2D graphics items. The main classes of the framework are
|
---|
| 45 | QGraphicsItem, QGraphicsScene and QGraphicsView. The graphics
|
---|
| 46 | scene manages the items and provides a surface for them.
|
---|
[2] | 47 | QGraphicsView is a widget that is used to render a scene on the
|
---|
[846] | 48 | screen. See the \l{Graphics View Framework} for a more detailed
|
---|
| 49 | description of the framework.
|
---|
[2] | 50 |
|
---|
| 51 | In this example we show how to create such custom graphics
|
---|
| 52 | scenes and items by implementing classes that inherit
|
---|
| 53 | QGraphicsScene and QGraphicsItem.
|
---|
| 54 |
|
---|
| 55 | In particular we show how to:
|
---|
| 56 |
|
---|
| 57 | \list
|
---|
| 58 | \o Create custom graphics items.
|
---|
| 59 | \o Handle mouse events and movement of items.
|
---|
| 60 | \o Implement a graphics scene that can manage our custom items.
|
---|
| 61 | \o Custom painting of items.
|
---|
| 62 | \o Create a movable and editable text item.
|
---|
| 63 | \endlist
|
---|
| 64 |
|
---|
| 65 | The example consists of the following classes:
|
---|
| 66 | \list
|
---|
| 67 | \o \c MainWindow creates the widgets and display
|
---|
| 68 | them in a QMainWindow. It also manages the interaction
|
---|
| 69 | between the widgets and the graphics scene, view and
|
---|
| 70 | items.
|
---|
| 71 | \o \c DiagramItem inherits QGraphicsPolygonItem and
|
---|
| 72 | represents a flowchart shape.
|
---|
| 73 | \o \c TextDiagramItem inherits QGraphicsTextItem and
|
---|
| 74 | represents text items in the diagram. The class adds
|
---|
| 75 | support for moving the item with the mouse, which is not
|
---|
| 76 | supported by QGraphicsTextItem.
|
---|
| 77 | \o \c Arrow inherits QGraphicsLineItem and is an arrow
|
---|
| 78 | that connect two DiagramItems.
|
---|
| 79 | \o \c DiagramScene inherits QGraphicsDiagramScene and
|
---|
| 80 | provides support for \c DiagramItem, \c Arrow and
|
---|
| 81 | \c DiagramTextItem (In addition to the support already
|
---|
| 82 | handled by QGraphicsScene).
|
---|
| 83 | \endlist
|
---|
| 84 |
|
---|
| 85 | \section1 MainWindow Class Definition
|
---|
| 86 |
|
---|
| 87 | \snippet examples/graphicsview/diagramscene/mainwindow.h 0
|
---|
| 88 |
|
---|
| 89 | The \c MainWindow class creates and lays out the widgets in a
|
---|
| 90 | QMainWindow. The class forwards input from the widgets to the
|
---|
| 91 | DiagramScene. It also updates its widgets when the diagram
|
---|
| 92 | scene's text item changes, or a diagram item or a diagram text item
|
---|
| 93 | is inserted into the scene.
|
---|
| 94 |
|
---|
| 95 | The class also deletes items from the scene and handles the
|
---|
| 96 | z-ordering, which decides the order in which items are drawn when
|
---|
| 97 | they overlap each other.
|
---|
| 98 |
|
---|
| 99 | \section1 MainWindow Class Implementation
|
---|
| 100 |
|
---|
| 101 |
|
---|
| 102 | We start with a look at the constructor:
|
---|
| 103 |
|
---|
| 104 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 0
|
---|
| 105 |
|
---|
| 106 | In the constructor we call methods to create the widgets and
|
---|
| 107 | layouts of the example before we create the diagram scene.
|
---|
| 108 | The toolbars must be created after the scene as they connect
|
---|
| 109 | to its signals. We then lay the widgets out in the window.
|
---|
| 110 |
|
---|
| 111 | We connect to the \c itemInserted() and \c textInserted() slots of
|
---|
| 112 | the diagram scenes as we want to uncheck the buttons in the tool
|
---|
| 113 | box when an item is inserted. When an item is selected in
|
---|
| 114 | the scene we receive the \c itemSelected() signal. We use this to
|
---|
| 115 | update the widgets that display font properties if the item
|
---|
| 116 | selected is a \c DiagramTextItem.
|
---|
| 117 |
|
---|
| 118 | The \c createToolBox() function creates and lays out the widgets
|
---|
| 119 | of the \c toolBox QToolBox. We will not examine it with a
|
---|
| 120 | high level of detail as it does not deal with graphics framework
|
---|
| 121 | specific functionality. Here is its implementation:
|
---|
| 122 |
|
---|
| 123 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 21
|
---|
| 124 |
|
---|
| 125 | This part of the function sets up the tabbed widget item that
|
---|
| 126 | contains the flowchart shapes. An exclusive QButtonGroup always
|
---|
| 127 | keeps one button checked; we want the group to allow all buttons
|
---|
| 128 | to be unchecked.
|
---|
| 129 | We still use a button group since we can associate user
|
---|
| 130 | data, which we use to store the diagram type, with each button.
|
---|
| 131 | The \c createCellWidget() function sets up the buttons in the
|
---|
| 132 | tabbed widget item and is examined later.
|
---|
| 133 |
|
---|
| 134 | The buttons of the background tabbed widget item is set up in the
|
---|
| 135 | same way, so we skip to the creation of the tool box:
|
---|
| 136 |
|
---|
| 137 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 22
|
---|
| 138 |
|
---|
| 139 | We set the preferred size of the toolbox as its maximum. This
|
---|
| 140 | way, more space is given to the graphics view.
|
---|
| 141 |
|
---|
| 142 | Here is the \c createActions() function:
|
---|
| 143 |
|
---|
| 144 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 23
|
---|
| 145 |
|
---|
| 146 | We show an example of the creation of an action. The
|
---|
| 147 | functionality the actions trigger is discussed in the slots we
|
---|
| 148 | connect the actions to. You can see the \l{Application
|
---|
| 149 | Example}{application example} if you need a high-level
|
---|
| 150 | introduction to actions.
|
---|
| 151 |
|
---|
| 152 | The is the \c createMenus() function:
|
---|
| 153 |
|
---|
| 154 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 24
|
---|
| 155 |
|
---|
| 156 | We create the three menus' of the example.
|
---|
| 157 |
|
---|
| 158 | The \c createToolbars() function sets up the examples tool
|
---|
| 159 | bars. The three \l{QToolButton}s in the \c colorToolBar, the \c
|
---|
| 160 | fontColorToolButton, \c fillColorToolButton, and \c
|
---|
| 161 | lineColorToolButton, are interesting as we create icons for them
|
---|
| 162 | by drawing on a QPixmap with a QPainter. We show how the \c
|
---|
| 163 | fillColorToolButton is created. This button lets the user select a
|
---|
| 164 | color for the diagram items.
|
---|
| 165 |
|
---|
| 166 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 25
|
---|
| 167 | \dots
|
---|
| 168 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 26
|
---|
| 169 |
|
---|
| 170 | We set the menu of the tool button with
|
---|
| 171 | \l{QToolButton::}{setMenu()}. We need the \c fillAction QAction
|
---|
| 172 | object to always be pointing to the selected action of the menu.
|
---|
| 173 | The menu is created with the \c createColorMenu() function and, as
|
---|
| 174 | we shall see later, contains one menu item for each color that the
|
---|
| 175 | items can have. When the user presses the button, which trigger
|
---|
| 176 | the \l{QToolButton::}{clicked()} signal, we can set the color of
|
---|
| 177 | the selected item to the color of \c fillAction. It is with \c
|
---|
| 178 | createColorToolButtonIcon() we create the icon for the button.
|
---|
| 179 |
|
---|
| 180 | \dots
|
---|
| 181 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 27
|
---|
| 182 |
|
---|
| 183 | Here is the \c createBackgroundCellWidget() function:
|
---|
| 184 |
|
---|
| 185 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 28
|
---|
| 186 |
|
---|
| 187 | This function creates \l{QWidget}s containing a tool button
|
---|
| 188 | and a label. The widgets created with this function are used for
|
---|
| 189 | the background tabbed widget item in the tool box.
|
---|
| 190 |
|
---|
| 191 | Here is the \c createCellWidget() function:
|
---|
| 192 |
|
---|
| 193 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 29
|
---|
| 194 |
|
---|
| 195 | This function returns a QWidget containing a QToolButton with
|
---|
| 196 | an image of one of the \c DiagramItems, i.e., flowchart shapes.
|
---|
| 197 | The image is created by the \c DiagramItem through the \c image()
|
---|
[846] | 198 | function. The QButtonGroup class lets us attach an id (int) with
|
---|
[2] | 199 | each button; we store the diagram's type, i.e., the
|
---|
| 200 | DiagramItem::DiagramType enum. We use the stored diagram type when
|
---|
| 201 | we create new diagram items for the scene. The widgets created
|
---|
| 202 | with this function is used in the tool box.
|
---|
| 203 |
|
---|
| 204 | Here is the \c createColorMenu() function:
|
---|
| 205 |
|
---|
| 206 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 30
|
---|
| 207 |
|
---|
| 208 | This function creates a color menu that is used as the
|
---|
| 209 | drop-down menu for the tool buttons in the \c colorToolBar. We
|
---|
| 210 | create an action for each color that we add to the menu. We fetch
|
---|
| 211 | the actions data when we set the color of items, lines, and text.
|
---|
| 212 |
|
---|
| 213 | Here is the \c createColorToolButtonIcon() function:
|
---|
| 214 |
|
---|
| 215 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 31
|
---|
| 216 |
|
---|
| 217 | This function is used to create the QIcon of the \c
|
---|
| 218 | fillColorToolButton, \c fontColorToolButton, and \c
|
---|
| 219 | lineColorToolButton. The \a imageFile string is either the text,
|
---|
| 220 | flood-fill, or line symbol that is used for the buttons. Beneath
|
---|
| 221 | the image we draw a filled rectangle using \a color.
|
---|
| 222 |
|
---|
| 223 | Here is the \c createColorIcon() function:
|
---|
| 224 |
|
---|
| 225 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 32
|
---|
| 226 |
|
---|
| 227 | This function creates an icon with a filled rectangle in the
|
---|
| 228 | color of \a color. It is used for creating icons for the color
|
---|
| 229 | menus in the \c fillColorToolButton, \c fontColorToolButton, and
|
---|
| 230 | \c lineColorToolButton.
|
---|
| 231 |
|
---|
| 232 | Here is the \c backgroundButtonGroupClicked() slot:
|
---|
| 233 |
|
---|
| 234 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 1
|
---|
| 235 |
|
---|
| 236 | In this function we set the QBrush that is used to draw the
|
---|
| 237 | background of the diagramscene. The background can be a grid of
|
---|
| 238 | squares of blue, gray, or white tiles, or no grid at all. We have
|
---|
| 239 | \l{QPixmap}s of the tiles from png files that we create the brush
|
---|
| 240 | with.
|
---|
| 241 |
|
---|
| 242 | When one of the buttons in the background tabbed widget item is
|
---|
| 243 | clicked we change the brush; we find out which button it is by
|
---|
| 244 | checking its text.
|
---|
| 245 |
|
---|
| 246 | Here is the implementation of \c buttonGroupClicked():
|
---|
| 247 |
|
---|
| 248 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 2
|
---|
| 249 |
|
---|
| 250 | This slot is called when a button in \c buttonGroup is checked.
|
---|
| 251 | When a button is checked the user can click on the graphics view
|
---|
| 252 | and a \c DiagramItem of the selected type will be inserted into
|
---|
| 253 | the \c DiagramScene. We must loop through the buttons in the group
|
---|
| 254 | to uncheck other buttons as only one button is allowed to be
|
---|
| 255 | checked at a time.
|
---|
| 256 |
|
---|
| 257 | \c QButtonGroup assigns an id to each button. We have set the id
|
---|
| 258 | of each button to the diagram type, as given by DiagramItem::DiagramType
|
---|
| 259 | that will be inserted into the scene when it is clicked. We can
|
---|
| 260 | then use the button id when we set the diagram type with
|
---|
| 261 | \c setItemType(). In the case of text we assigned an id that has a
|
---|
| 262 | value that is not in the DiagramType enum.
|
---|
| 263 |
|
---|
| 264 | Here is the implementation of \c deleteItem():
|
---|
| 265 |
|
---|
| 266 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 3
|
---|
| 267 |
|
---|
[846] | 268 | This slot deletes the selected item, if any, from the scene. It
|
---|
| 269 | deletes the arrows first in order to avoid to delete them twice. If
|
---|
[2] | 270 | the item to be deleted is a \c DiagramItem, we also need to delete
|
---|
| 271 | arrows connected to it; we don't want arrows in the scene that
|
---|
| 272 | aren't connected to items in both ends.
|
---|
| 273 |
|
---|
| 274 | This is the implementation of pointerGroupClicked():
|
---|
| 275 |
|
---|
| 276 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 4
|
---|
| 277 |
|
---|
| 278 | The \c pointerTypeGroup decides whether the scene is in ItemMove
|
---|
| 279 | or InsertLine mode. This button group is exclusive, i.e., only
|
---|
| 280 | one button is checked at any time. As with the \c buttonGroup above
|
---|
| 281 | we have assigned an id to the buttons that matches values of the
|
---|
| 282 | DiagramScene::Mode enum, so that we can use the id to set the
|
---|
| 283 | correct mode.
|
---|
| 284 |
|
---|
| 285 | Here is the \c bringToFront() slot:
|
---|
| 286 |
|
---|
| 287 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 5
|
---|
| 288 |
|
---|
| 289 | Several items may collide, i.e., overlap, with each other in
|
---|
| 290 | the scene. This slot is called when the user requests that an
|
---|
| 291 | item should be placed on top of the items it collides with.
|
---|
| 292 | \l{QGraphicsItem}{QGrapicsItems} have a z-value that decides the
|
---|
| 293 | order in which items are stacked in the scene; you can think of it
|
---|
| 294 | as the z-axis in a 3D coordinate system. When items collide the
|
---|
| 295 | items with higher z-values will be drawn on top of items with
|
---|
| 296 | lower values. When we bring an item to the front we can loop
|
---|
| 297 | through the items it collides with and set a z-value that is
|
---|
| 298 | higher than all of them.
|
---|
| 299 |
|
---|
| 300 | Here is the \c sendToBack() slot:
|
---|
| 301 |
|
---|
| 302 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 6
|
---|
| 303 |
|
---|
| 304 | This slot works in the same way as \c bringToFront() described
|
---|
| 305 | above, but sets a z-value that is lower than items the item that
|
---|
| 306 | should be send to the back collides with.
|
---|
| 307 |
|
---|
| 308 | This is the implementation of \c itemInserted():
|
---|
| 309 |
|
---|
| 310 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 7
|
---|
| 311 |
|
---|
| 312 | This slot is called from the \c DiagramScene when an item has been
|
---|
| 313 | added to the scene. We set the mode of the scene back to the mode
|
---|
| 314 | before the item was inserted, which is ItemMove or InsertText
|
---|
| 315 | depending on which button is checked in the \c pointerTypeGroup.
|
---|
| 316 | We must also uncheck the button in the in the \c buttonGroup.
|
---|
| 317 |
|
---|
| 318 | Here is the implementation of \c textInserted():
|
---|
| 319 |
|
---|
| 320 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 8
|
---|
| 321 |
|
---|
| 322 | We simply set the mode of the scene back to the mode it had before
|
---|
| 323 | the text was inserted.
|
---|
| 324 |
|
---|
| 325 | Here is the \c currentFontChanged() slot:
|
---|
| 326 |
|
---|
| 327 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 9
|
---|
| 328 |
|
---|
| 329 | When the user requests a font change, by using one of the
|
---|
| 330 | widgets in the \c fontToolBar, we create a new QFont object and
|
---|
| 331 | set its properties to match the state of the widgets. This is done
|
---|
| 332 | in \c handleFontChange(), so we simply call that slot.
|
---|
| 333 |
|
---|
| 334 | Here is the \c fontSizeChanged() slot:
|
---|
| 335 |
|
---|
| 336 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 10
|
---|
| 337 |
|
---|
| 338 | When the user requests a font change, by using one of the
|
---|
| 339 | widgets in the \c fontToolBar, we create a new QFont object and
|
---|
| 340 | set its properties to match the state of the widgets. This is done
|
---|
| 341 | in \c handleFontChange(), so we simply call that slot.
|
---|
| 342 |
|
---|
| 343 | Here is the implementation of \c sceneScaleChanged():
|
---|
| 344 |
|
---|
| 345 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 11
|
---|
| 346 |
|
---|
| 347 | The user can increase or decrease the scale, with the \c
|
---|
| 348 | sceneScaleCombo, the scene is drawn in.
|
---|
| 349 | It is not the scene itself that changes its scale, but only the
|
---|
| 350 | view.
|
---|
| 351 |
|
---|
| 352 | Here is the \c textColorChanged() slot:
|
---|
| 353 |
|
---|
| 354 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 12
|
---|
| 355 |
|
---|
| 356 | This slot is called when an item in the drop-down menu of the \c
|
---|
| 357 | fontColorToolButton is pressed. We need to change the icon on
|
---|
| 358 | the button to the color of the selected QAction. We keep a pointer
|
---|
| 359 | to the selected action in \c textAction. It is in \c
|
---|
| 360 | textButtonTriggered() we change the text color to the color of \c
|
---|
| 361 | textAction, so we call that slot.
|
---|
| 362 |
|
---|
| 363 | Here is the \c itemColorChanged() implementation:
|
---|
| 364 |
|
---|
| 365 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 13
|
---|
| 366 |
|
---|
| 367 | This slot handles requests for changing the color of \c
|
---|
| 368 | DiagramItems in the same manner as \c textColorChanged() does for
|
---|
| 369 | \c DiagramTextItems.
|
---|
| 370 |
|
---|
| 371 | Here is the implementation of \c lineColorChanged():
|
---|
| 372 |
|
---|
| 373 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 14
|
---|
| 374 |
|
---|
| 375 | This slot handles requests for changing the color of \c Arrows in
|
---|
| 376 | the same manner that \c textColorChanged() does it for \c
|
---|
| 377 | DiagramTextItems.
|
---|
| 378 |
|
---|
| 379 | Here is the \c textButtonTriggered() slot:
|
---|
| 380 |
|
---|
| 381 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 15
|
---|
| 382 |
|
---|
| 383 | \c textAction points to the QAction of the currently selected menu item
|
---|
| 384 | in the \c fontColorToolButton's color drop-down menu. We have set
|
---|
| 385 | the data of the action to the QColor the action represents, so we
|
---|
| 386 | can simply fetch this when we set the color of text with \c
|
---|
| 387 | setTextColor().
|
---|
| 388 |
|
---|
| 389 | Here is the \c fillButtonTriggered() slot:
|
---|
| 390 |
|
---|
| 391 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 16
|
---|
| 392 |
|
---|
| 393 | \c fillAction points to the selected menu item in the drop-down
|
---|
| 394 | menu of \c fillColorToolButton(). We can therefore use the data of
|
---|
| 395 | this action when we set the item color with \c setItemColor().
|
---|
| 396 |
|
---|
| 397 | Here is the \c lineButtonTriggered() slot:
|
---|
| 398 |
|
---|
| 399 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 17
|
---|
| 400 |
|
---|
| 401 | \c lineAction point to the selected item in the drop-down menu of
|
---|
| 402 | \c lineColorToolButton. We use its data when we set the arrow
|
---|
| 403 | color with \c setLineColor().
|
---|
| 404 |
|
---|
| 405 | Here is the \c handleFontChange() function:
|
---|
| 406 |
|
---|
| 407 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 18
|
---|
| 408 |
|
---|
| 409 | \c handleFontChange() is called when any of the widgets that show
|
---|
| 410 | font properties changes. We create a new QFont object and set its
|
---|
| 411 | properties based on the widgets. We then call the \c setFont()
|
---|
| 412 | function of \c DiagramScene; it is the scene that set the font of
|
---|
| 413 | the \c DiagramTextItems it manages.
|
---|
| 414 |
|
---|
| 415 | Here is the \c itemSelected() slot:
|
---|
| 416 |
|
---|
| 417 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 19
|
---|
| 418 |
|
---|
| 419 | This slot is called when an item in the \c DiagramScene is
|
---|
| 420 | selected. In the case of this example it is only text items that
|
---|
| 421 | emit signals when they are selected, so we do not need to check
|
---|
| 422 | what kind of graphics \a item is.
|
---|
| 423 |
|
---|
| 424 | We set the state of the widgets to match the properties of the
|
---|
| 425 | font of the selected text item.
|
---|
| 426 |
|
---|
| 427 | This is the \c about() slot:
|
---|
| 428 |
|
---|
| 429 | \snippet examples/graphicsview/diagramscene/mainwindow.cpp 20
|
---|
| 430 |
|
---|
| 431 | This slot displays an about box for the example when the user
|
---|
| 432 | selects the about menu item from the help menu.
|
---|
| 433 |
|
---|
| 434 | \section1 DiagramScene Class Definition
|
---|
| 435 |
|
---|
| 436 | The \c DiagramScene class inherits QGraphicsScene and adds
|
---|
| 437 | functionality to handle \c DiagramItems, \c Arrows, and \c
|
---|
| 438 | DiagramTextItems in addition to the items handled by its super
|
---|
| 439 | class.
|
---|
| 440 |
|
---|
| 441 |
|
---|
| 442 | \snippet examples/graphicsview/diagramscene/diagramscene.h 0
|
---|
| 443 |
|
---|
| 444 | In the \c DiagramScene a mouse click can give three different
|
---|
| 445 | actions: the item under the mouse can be moved, an item may be
|
---|
| 446 | inserted, or an arrow may be connected between to diagram items.
|
---|
| 447 | Which action a mouse click has depends on the mode, given by the
|
---|
| 448 | Mode enum, the scene is in. The mode is set with the \c setMode()
|
---|
| 449 | function.
|
---|
| 450 |
|
---|
| 451 | The scene also sets the color of its items and the font of its
|
---|
| 452 | text items. The colors and font used by the scene can be set with
|
---|
| 453 | the \c setLineColor(), \c setTextColor(), \c setItemColor() and \c
|
---|
| 454 | setFont() functions. The type of \c DiagramItem, given by the
|
---|
| 455 | DiagramItem::DiagramType function, to be created when an item is
|
---|
| 456 | inserted is set with the \c setItemType() slot.
|
---|
| 457 |
|
---|
| 458 | The \c MainWindow and \c DiagramScene share responsibility for
|
---|
| 459 | the examples functionality. \c MainWindow handles the following
|
---|
| 460 | tasks: the deletion of items, text, and arrows; moving diagram
|
---|
| 461 | items to the back and front; and setting the scale of the scene.
|
---|
| 462 |
|
---|
| 463 | \section1 DiagramScene Class Implementation
|
---|
| 464 |
|
---|
| 465 |
|
---|
| 466 | We start with the constructor:
|
---|
| 467 |
|
---|
| 468 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 0
|
---|
| 469 |
|
---|
| 470 | The scene uses \c myItemMenu to set the context menu when it
|
---|
| 471 | creates \c DiagramItems. We set the default mode to \c
|
---|
| 472 | DiagramScene::MoveItem as this gives the default behavior of
|
---|
| 473 | QGraphicsScene.
|
---|
| 474 |
|
---|
| 475 | Here is the \c setLineColor() function:
|
---|
| 476 |
|
---|
| 477 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 1
|
---|
| 478 |
|
---|
| 479 | The \c isItemChange function returns true if an \c Arrow item is
|
---|
| 480 | selected in the scene in which case we want to change its color.
|
---|
| 481 | When the \c DiagramScene creates and adds new arrows to the scene
|
---|
| 482 | it will also use the new \a color.
|
---|
| 483 |
|
---|
| 484 | Here is the \c setTextColor() function:
|
---|
| 485 |
|
---|
| 486 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 2
|
---|
| 487 |
|
---|
| 488 | This function sets the color of \c DiagramTextItems equal to the
|
---|
| 489 | way \c setLineColor() sets the color of \c Arrows.
|
---|
| 490 |
|
---|
| 491 | Here is the \c setItemColor() function:
|
---|
| 492 |
|
---|
| 493 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 3
|
---|
| 494 |
|
---|
| 495 | This function sets the color the scene will use when creating
|
---|
| 496 | \c DiagramItems. It also changes the color of a selected \c
|
---|
| 497 | DiagramItem.
|
---|
| 498 |
|
---|
| 499 | This is the implementation of \c setFont():
|
---|
| 500 |
|
---|
| 501 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 4
|
---|
| 502 |
|
---|
| 503 | Set the font to use for new and selected, if a text item is
|
---|
| 504 | selected, \c DiagramTextItems.
|
---|
| 505 |
|
---|
| 506 | This is the implementation of \c editorLostFocus() slot:
|
---|
| 507 |
|
---|
| 508 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 5
|
---|
| 509 |
|
---|
| 510 | \c DiagramTextItems emit a signal when they loose focus, which is
|
---|
| 511 | connected to this slot. We remove the item if it has no text.
|
---|
| 512 | If not, we would leak memory and confuse the user as the items
|
---|
| 513 | will be edited when pressed on by the mouse.
|
---|
| 514 |
|
---|
| 515 | The \c mousePressEvent() function handles mouse press event's
|
---|
| 516 | different depending on which mode the \c DiagramScene is in. We
|
---|
| 517 | examine its implementation for each mode:
|
---|
| 518 |
|
---|
| 519 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 6
|
---|
| 520 |
|
---|
| 521 | We simply create a new \c DiagramItem and add it to the scene at
|
---|
| 522 | the position the mouse was pressed. Note that the origin of its
|
---|
| 523 | local coordinate system will be under the mouse pointer position.
|
---|
| 524 |
|
---|
| 525 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 7
|
---|
| 526 |
|
---|
| 527 | The user adds \c Arrows to the scene by stretching a line between
|
---|
| 528 | the items the arrow should connect. The start of the line is fixed
|
---|
| 529 | in the place the user clicked the mouse and the end follows the
|
---|
| 530 | mouse pointer as long as the button is held down. When the user
|
---|
| 531 | releases the mouse button an \c Arrow will be added to the scene
|
---|
| 532 | if there is a \c DiagramItem under the start and end of the line.
|
---|
| 533 | We will see how this is implemented later; here we simply add the
|
---|
| 534 | line.
|
---|
| 535 |
|
---|
| 536 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 8
|
---|
| 537 |
|
---|
| 538 | The \c DiagramTextItem is editable when the
|
---|
| 539 | Qt::TextEditorInteraction flag is set, else it is movable by the
|
---|
| 540 | mouse. We always want the text to be drawn on top of the other
|
---|
| 541 | items in the scene, so we set the value to a number higher
|
---|
| 542 | than other items in the scene.
|
---|
| 543 |
|
---|
| 544 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 9
|
---|
| 545 |
|
---|
| 546 | We are in MoveItem mode if we get to the default switch; we
|
---|
| 547 | can then call the QGraphicsScene implementation, which
|
---|
| 548 | handles movement of items with the mouse. We make this call even
|
---|
| 549 | if we are in another mode making it possible to add an item and
|
---|
| 550 | then keep the mouse button pressed down and start moving
|
---|
| 551 | the item. In the case of text items, this is not possible as they
|
---|
| 552 | do not propagate mouse events when they are editable.
|
---|
| 553 |
|
---|
| 554 | This is the \c mouseMoveEvent() function:
|
---|
| 555 |
|
---|
| 556 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 10
|
---|
| 557 |
|
---|
| 558 | We must draw the line if we are in InsertMode and the mouse button
|
---|
| 559 | is pressed down (the line is not 0). As discussed in \c
|
---|
| 560 | mousePressEvent() the line is drawn from the position the mouse
|
---|
| 561 | was pressed to the current position of the mouse.
|
---|
| 562 |
|
---|
| 563 | If we are in MoveItem mode, we call the QGraphicsScene
|
---|
| 564 | implementation, which handles movement of items.
|
---|
| 565 |
|
---|
| 566 | In the \c mouseReleaseEvent() function we need to check if an arrow
|
---|
| 567 | should be added to the scene:
|
---|
| 568 |
|
---|
| 569 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 11
|
---|
| 570 |
|
---|
| 571 | First we need to get the items (if any) under the line's start
|
---|
| 572 | and end points. The line itself is the first item at these points,
|
---|
| 573 | so we remove it from the lists. As a precaution, we check if the
|
---|
| 574 | lists are empty, but this should never happen.
|
---|
| 575 |
|
---|
| 576 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 12
|
---|
| 577 |
|
---|
| 578 | Now we check if there are two different \c DiagramItems under
|
---|
| 579 | the lines start and end points. If there are we can create an \c
|
---|
| 580 | Arrow with the two items. The arrow is then added to each item and
|
---|
| 581 | finally the scene. The arrow must be updated to adjust its start
|
---|
| 582 | and end points to the items. We set the z-value of the arrow to
|
---|
| 583 | -1000.0 because we always want it to be drawn under the items.
|
---|
| 584 |
|
---|
| 585 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 13
|
---|
| 586 |
|
---|
| 587 | Here is the \c isItemChange() function:
|
---|
| 588 |
|
---|
| 589 | \snippet examples/graphicsview/diagramscene/diagramscene.cpp 14
|
---|
| 590 |
|
---|
| 591 | The scene has single selection, i.e., only one item can be
|
---|
| 592 | selected at any given time. The foreach will then loop one time
|
---|
| 593 | with the selected item or none if no item is selected. \c
|
---|
| 594 | isItemChange() is used to check whether a selected item exists
|
---|
| 595 | and also is of the specified diagram \a type.
|
---|
| 596 |
|
---|
| 597 | \section1 DiagramItem Class Definition
|
---|
| 598 |
|
---|
| 599 |
|
---|
| 600 | \snippet examples/graphicsview/diagramscene/diagramitem.h 0
|
---|
| 601 |
|
---|
| 602 | The \c DiagramItem represents a flowchart shape in the \c
|
---|
| 603 | DiagramScene. It inherits QGraphicsPolygonItem and has a polygon
|
---|
| 604 | for each shape. The enum DiagramType has a value for each of the
|
---|
| 605 | flowchart shapes.
|
---|
| 606 |
|
---|
| 607 | The class has a list of the arrows that are connected to it.
|
---|
| 608 | This is necessary because only the item knows when it is being
|
---|
| 609 | moved (with the \c itemChanged() function) at which time the
|
---|
| 610 | arrows must be updated. The item can also draw itself onto a
|
---|
| 611 | QPixmap with the \c image() function. This is used for the tool
|
---|
| 612 | buttons in \c MainWindow, see \c createColorToolButtonIcon() in
|
---|
| 613 | \c MainWindow.
|
---|
| 614 |
|
---|
| 615 | The Type enum is a unique identifier of the class. It is used by
|
---|
| 616 | \c qgraphicsitem_cast(), which does dynamic casts of graphics
|
---|
| 617 | items. The UserType constant is the minimum value a custom
|
---|
| 618 | graphics item type can be.
|
---|
| 619 |
|
---|
| 620 | \section1 DiagramItem Class Implementation
|
---|
| 621 |
|
---|
| 622 |
|
---|
| 623 | We start with a look at the constructor:
|
---|
| 624 |
|
---|
| 625 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 0
|
---|
| 626 |
|
---|
| 627 | In the constructor we create the items polygon according to
|
---|
| 628 | \a diagramType. \l{QGraphicsItem}s are not movable or selectable
|
---|
| 629 | by default, so we must set these properties.
|
---|
| 630 |
|
---|
| 631 | Here is the \c removeArrow() function:
|
---|
| 632 |
|
---|
| 633 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 1
|
---|
| 634 |
|
---|
| 635 | \c removeArrow() is used to remove \c Arrow items when they
|
---|
| 636 | or \c DiagramItems they are connected to are removed from the
|
---|
| 637 | scene.
|
---|
| 638 |
|
---|
| 639 | Here is the \c removeArrows() function:
|
---|
| 640 |
|
---|
| 641 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 2
|
---|
| 642 |
|
---|
| 643 | This function is called when the item is removed from the scene
|
---|
| 644 | and removes all arrows that are connected to this item. The arrow
|
---|
| 645 | must be removed from the \c arrows list of both its start and end
|
---|
| 646 | item.
|
---|
| 647 |
|
---|
| 648 | Here is the \c addArrow() function:
|
---|
| 649 |
|
---|
| 650 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 3
|
---|
| 651 |
|
---|
| 652 | This function simply adds the \a arrow to the items \c arrows list.
|
---|
| 653 |
|
---|
| 654 | Here is the \c image() function:
|
---|
| 655 |
|
---|
| 656 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 4
|
---|
| 657 |
|
---|
| 658 | This function draws the polygon of the item onto a QPixmap. In
|
---|
| 659 | this example we use this to create icons for the tool buttons in
|
---|
| 660 | the tool box.
|
---|
| 661 |
|
---|
| 662 | Here is the \c contextMenuEvent() function:
|
---|
| 663 |
|
---|
| 664 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 5
|
---|
| 665 |
|
---|
| 666 | We show the context menu. As right mouse clicks, which shows the
|
---|
| 667 | menu, don't select items by default we set the item selected with
|
---|
| 668 | \l{QGraphicsItem::}{setSelected()}. This is necessary since an
|
---|
| 669 | item must be selected to change its elevation with the
|
---|
| 670 | \c bringToFront and \c sendToBack actions.
|
---|
| 671 |
|
---|
| 672 | This is the implementation of \c itemChange():
|
---|
| 673 |
|
---|
| 674 | \snippet examples/graphicsview/diagramscene/diagramitem.cpp 6
|
---|
| 675 |
|
---|
| 676 | If the item has moved, we need to update the positions of the
|
---|
| 677 | arrows connected to it. The implementation of QGraphicsItem does
|
---|
| 678 | nothing, so we just return \a value.
|
---|
| 679 |
|
---|
| 680 | \section1 DiagramTextItem Class Definition
|
---|
| 681 |
|
---|
| 682 | The \c TextDiagramItem class inherits QGraphicsTextItem and
|
---|
| 683 | adds the possibility to move editable text items. Editable
|
---|
| 684 | QGraphicsTextItems are designed to be fixed in place and editing
|
---|
| 685 | starts when the user single clicks on the item. With \c
|
---|
| 686 | DiagramTextItem the editing starts with a double click leaving
|
---|
| 687 | single click available to interact with and move it.
|
---|
| 688 |
|
---|
| 689 | \snippet examples/graphicsview/diagramscene/diagramtextitem.h 0
|
---|
| 690 |
|
---|
| 691 | We use \c itemChange() and \c focusOutEvent() to notify the
|
---|
| 692 | \c DiagramScene when the text item loses focus and gets selected.
|
---|
| 693 |
|
---|
[561] | 694 | We reimplement the functions that handle mouse events to make it
|
---|
[2] | 695 | possible to alter the mouse behavior of QGraphicsTextItem.
|
---|
| 696 |
|
---|
| 697 | \section1 DiagramTextItem Implementation
|
---|
| 698 |
|
---|
| 699 | We start with the constructor:
|
---|
| 700 |
|
---|
| 701 | \snippet examples/graphicsview/diagramscene/diagramtextitem.cpp 0
|
---|
| 702 |
|
---|
| 703 | We simply set the item movable and selectable, as these flags are
|
---|
| 704 | off by default.
|
---|
| 705 |
|
---|
| 706 | Here is the \c itemChange() function:
|
---|
| 707 |
|
---|
| 708 | \snippet examples/graphicsview/diagramscene/diagramtextitem.cpp 1
|
---|
| 709 |
|
---|
| 710 | When the item is selected we emit the selectedChanged signal. The
|
---|
| 711 | \c MainWindow uses this signal to update the widgets that display
|
---|
| 712 | font properties to the font of the selected text item.
|
---|
| 713 |
|
---|
| 714 | Here is the \c focusOutEvent() function:
|
---|
| 715 |
|
---|
| 716 | \snippet examples/graphicsview/diagramscene/diagramtextitem.cpp 2
|
---|
| 717 |
|
---|
| 718 | \c DiagramScene uses the signal emitted when the text item looses
|
---|
[561] | 719 | focus to remove the item if it is empty, i.e., it contains no
|
---|
| 720 | text.
|
---|
[2] | 721 |
|
---|
| 722 | This is the implementation of \c mouseDoubleClickEvent():
|
---|
| 723 |
|
---|
| 724 | \snippet examples/graphicsview/diagramscene/diagramtextitem.cpp 5
|
---|
| 725 |
|
---|
| 726 | When we receive a double click event, we make the item editable by calling
|
---|
| 727 | QGraphicsTextItem::setTextInteractionFlags(). We then forward the
|
---|
| 728 | double-click to the item itself.
|
---|
| 729 |
|
---|
| 730 | \section1 Arrow Class Definition
|
---|
| 731 |
|
---|
| 732 | The \c Arrow class is a graphics item that connects two \c
|
---|
| 733 | DiagramItems. It draws an arrow head to one of the items. To
|
---|
| 734 | achieve this the item needs to paint itself and also re implement
|
---|
| 735 | methods used by the graphics scene to check for collisions and
|
---|
| 736 | selections. The class inherits QGraphicsLine item, and draws the
|
---|
| 737 | arrowhead and moves with the items it connects.
|
---|
| 738 |
|
---|
| 739 | \snippet examples/graphicsview/diagramscene/arrow.h 0
|
---|
| 740 |
|
---|
| 741 | The item's color can be set with \c setColor().
|
---|
| 742 |
|
---|
| 743 | \c boundingRect() and \c shape() are reimplemented
|
---|
| 744 | from QGraphicsLineItem and are used by the scene
|
---|
| 745 | to check for collisions and selections.
|
---|
| 746 |
|
---|
| 747 | Calling \c updatePosition() causes the arrow to recalculate its
|
---|
| 748 | position and arrow head angle. \c paint() is reimplemented so that
|
---|
| 749 | we can paint an arrow rather than just a line between items.
|
---|
| 750 |
|
---|
| 751 | \c myStartItem and \c myEndItem are the diagram items that the
|
---|
| 752 | arrow connects. The arrow is drawn with its head to the end item.
|
---|
| 753 | \c arrowHead is a polygon with three vertices's we use to draw the
|
---|
| 754 | arrow head.
|
---|
| 755 |
|
---|
| 756 | \section1 Arrow Class Implementation
|
---|
| 757 |
|
---|
| 758 | The constructor of the \c Arrow class looks like this:
|
---|
| 759 |
|
---|
| 760 | \snippet examples/graphicsview/diagramscene/arrow.cpp 0
|
---|
| 761 |
|
---|
| 762 | We set the start and end diagram items of the arrow. The arrow
|
---|
| 763 | head will be drawn where the line intersects the end item.
|
---|
| 764 |
|
---|
| 765 | Here is the \c boundingRect() function:
|
---|
| 766 |
|
---|
| 767 | \snippet examples/graphicsview/diagramscene/arrow.cpp 1
|
---|
| 768 |
|
---|
| 769 | We need to reimplement this function because the arrow is
|
---|
| 770 | larger than the bounding rectangle of the QGraphicsLineItem. The
|
---|
| 771 | graphics scene uses the bounding rectangle to know which regions
|
---|
| 772 | of the scene to update.
|
---|
| 773 |
|
---|
| 774 | Here is the \c shape() function:
|
---|
| 775 |
|
---|
| 776 | \snippet examples/graphicsview/diagramscene/arrow.cpp 2
|
---|
| 777 |
|
---|
| 778 | The shape function returns a QPainterPath that is the exact
|
---|
| 779 | shape of the item. The QGraphicsLineItem::shape() returns a path
|
---|
| 780 | with a line drawn with the current pen, so we only need to add
|
---|
| 781 | the arrow head. This function is used to check for collisions and
|
---|
| 782 | selections with the mouse.
|
---|
| 783 |
|
---|
| 784 | Here is the \c updatePosition() slot:
|
---|
| 785 |
|
---|
| 786 | \snippet examples/graphicsview/diagramscene/arrow.cpp 3
|
---|
| 787 |
|
---|
| 788 | This slot updates the arrow by setting the start and end
|
---|
| 789 | points of its line to the center of the items it connects.
|
---|
| 790 |
|
---|
| 791 | Here is the \c paint() function:
|
---|
| 792 |
|
---|
| 793 | \snippet examples/graphicsview/diagramscene/arrow.cpp 4
|
---|
| 794 |
|
---|
| 795 | If the start and end items collide we do not draw the arrow; the
|
---|
| 796 | algorithm we use to find the point the arrow should be drawn at
|
---|
| 797 | may fail if the items collide.
|
---|
| 798 |
|
---|
| 799 | We first set the pen and brush we will use for drawing the arrow.
|
---|
| 800 |
|
---|
| 801 | \snippet examples/graphicsview/diagramscene/arrow.cpp 5
|
---|
| 802 |
|
---|
| 803 | We then need to find the position at which to draw the
|
---|
| 804 | arrowhead. The head should be drawn where the line and the end
|
---|
| 805 | item intersects. This is done by taking the line between each
|
---|
| 806 | point in the polygon and check if it intersects with the line of
|
---|
| 807 | the arrow. Since the line start and end points are set to the
|
---|
| 808 | center of the items the arrow line should intersect one and only
|
---|
| 809 | one of the lines of the polygon. Note that the points in the
|
---|
| 810 | polygon are relative to the local coordinate system of the item.
|
---|
| 811 | We must therefore add the position of the end item to make the
|
---|
| 812 | coordinates relative to the scene.
|
---|
| 813 |
|
---|
| 814 | \snippet examples/graphicsview/diagramscene/arrow.cpp 6
|
---|
| 815 |
|
---|
| 816 | We calculate the angle between the x-axis and the line of the
|
---|
| 817 | arrow. We need to turn the arrow head to this angle so that it
|
---|
| 818 | follows the direction of the arrow. If the angle is negative we
|
---|
| 819 | must turn the direction of the arrow.
|
---|
| 820 |
|
---|
| 821 | We can then calculate the three points of the arrow head polygon.
|
---|
| 822 | One of the points is the end of the line, which now is the
|
---|
| 823 | intersection between the arrow line and the end polygon. Then we
|
---|
| 824 | clear the \c arrowHead polygon from the previous calculated arrow
|
---|
| 825 | head and set these new points.
|
---|
| 826 |
|
---|
| 827 | \snippet examples/graphicsview/diagramscene/arrow.cpp 7
|
---|
| 828 |
|
---|
[561] | 829 | If the line is selected, we draw two dotted lines that are
|
---|
[2] | 830 | parallel with the line of the arrow. We do not use the default
|
---|
| 831 | implementation, which uses \l{QGraphicsItem::}{boundingRect()}
|
---|
| 832 | because the QRect bounding rectangle is considerably larger than
|
---|
| 833 | the line.
|
---|
| 834 | */
|
---|