source: trunk/doc/src/examples/diagramscene.qdoc@ 1147

Last change on this file since 1147 was 846, checked in by Dmitry A. Kuminov, 14 years ago

trunk: Merged in qt 4.7.2 sources from branches/vendor/nokia/qt.

File size: 33.8 KB
Line 
1/****************************************************************************
2**
3** Copyright (C) 2011 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:FDL$
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
13** Software or, alternatively, in accordance with the terms contained in a
14** written agreement between you and Nokia.
15**
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.
21**
22** If you have questions regarding the use of this file, please contact
23** Nokia at qt-info@nokia.com.
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
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.
47 QGraphicsView is a widget that is used to render a scene on the
48 screen. See the \l{Graphics View Framework} for a more detailed
49 description of the framework.
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()
198 function. The QButtonGroup class lets us attach an id (int) with
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
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
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
694 We reimplement the functions that handle mouse events to make it
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
719 focus to remove the item if it is empty, i.e., it contains no
720 text.
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
829 If the line is selected, we draw two dotted lines that are
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*/
Note: See TracBrowser for help on using the repository browser.