Training Course
Visit us at http://qt.digia.com
Produced by Digia Plc.
Material based on Qt 5.0, created on September 27, 2012
Digia Plc.
2/41
Graphics View
Objectives
Using QGraphicsView-related classes
Coordinate Schemes, Transformations
Extending items
Event handling
Painting
Boundaries
3/41
Graphics View
4/41
Graphics View
GraphicsView Framework
Provides:
A surface for managing interactive 2D graphical items
A view widget for visualizing the items
5/41
Graphics View
Hello World
#include <QtWidgets>
int main(int argc, char **argv) {
QApplication app(argc, argv);
QGraphicsView view;
QGraphicsScene *scene = new QGraphicsScene(&view);
view.setScene(scene);
QGraphicsRectItem *rect =
new QGraphicsRectItem(-10, -10, 120, 50);
scene->addItem(rect);
QGraphicsTextItem *text = scene->addText("Hello World!");
view.show();
return app.exec();
}
.Demo graphicsview/ex-helloworld
6/41
Graphics View
UML relationship
QGraphicsScene is:
a "model" for QGraphicsView
a "container" for QGraphicsItems
7/41
Graphics View
QGraphicsScene
Container for Graphic Items
Items can exist in only one scene at a time
8/41
Graphics View
QGraphicsEllipseItem *ellipse =
scene->addEllipse(-10, -10, 120, 50);
QGraphicsTextItem *text =
scene->addText("Hello World!");
items()
returns items intersecting a particular point or region
selectedItems()
returns list of selected items
sceneRect()
bounding rectangle for the entire scene
9/41
Graphics View
QGraphicsView
Scrollable widget viewport onto the scene
10/41
Graphics View
setRenderHints()
antialiasing, smooth pixmap transformations, etc
centerOn()
takes a QPoint or a QGraphicsItem as argument
ensures point/item is centered in View
mapFromScene(), mapToScene()
map to/from scene coordinates
11/41
Graphics View
QGraphicsItem
Abstract base class: basic canvas element
Supports parent/child hierarchy
12/41
Graphics View
.Demo graphicsview/ex-concreteitems
13/41
Graphics View
moveBy()
moves an item relative to its own position.
zValue()
get a Z order for item in scene
events
setFocus(Qt::FocusReason) - sets input focus.
setSelected(bool)
select/deselect an item
typically called from QGraphicsScene::setSelectionArea()
14/41
Graphics View
QGraphicsItemFlags
QGraphicsItem::ItemIsMovable
QGraphicsItem::ItemIsSelectable
QGraphicsItem::ItemIsFocusable
item->setFlags(
QGraphicsItem::ItemIsMovable|QGraphicsItem::ItemIsSelectable);
15/41
Graphics View
Groups of Items
Any QGraphicsItem can have children
QGraphicsItemGroup is an invisible item for grouping child items
To group child items in a box with an outline (for example), use a
QGraphicsRectItem
Demo
graphicsview/ex-concreteitems
.
16/41
Graphics View
setEnabled()
setFlags()
setPos()
setOpacity()
etc...
17/41
Graphics View
18/41
Graphics View
Coordinate Systems
Each View and Item has its own local coordinate system
(0,0)
Screen
(integer
coordinates)
Item
Child item
Y
X
Viewport
(logical
coordinates)
19/41
Graphics View
Coordinates
Coordinates are local to an item
Logical coordinates, not pixels
Floating point, not integer
Without transformations, 1 logical coordinate = 1 pixel.
20/41
Graphics View
QTransform
Coordinate systems can be transformed using QTransform
QTransform is a 3x3 matrix describing a linear transformation from
m12
m22
m32
m13
m23
m33
21/41
Graphics View
Common Transformations
Commonly-used convenience functions:
scale()
rotate()
shear()
translate()
22/41
Graphics View
View transformations
t = QTransform();
// identity matrix
// scale by 150%
view->setTransform(t);
setTransformationAnchor()
23/41
Graphics View
Item Transformations
QGraphicsItem supports same transform operations:
setTransform(), transform()
rotate(), scale(), shear(), translate()
.
An item's effective transformation:
.
.The product of its own and all its ancestors' transformations
TIP: When managing the transformation of items, store the desired rotation,
scaling etc. in member variables and build a QTransform from the identity
transformation when they change. Don't try to deduce values from the current
transformation and/or try to use it as the base for further changes.
24/41
Graphics View
Zooming
Zooming is done with view->scale()
void MyView::zoom(double factor)
{
double width =
matrix().mapRect(QRectF(0, 0, 1, 1)).width();
width *= factor;
if ((width < 0.05) || (width > 10)) return;
scale(factor, factor);
}
25/41
Graphics View
26/41
Graphics View
Ignoring Transformations
Sometimes we don't want particular items to be transformed before
display.
View transformation can be disabled for individual items.
Used for text labels in a graph that should not change size when the
graph is zoomed.
item->setFlag( QGraphicsItem::ItemIgnoresTransformations);
27/41
Graphics View
Transforms Demo
.Demo graphicsview/ex-transformination
28/41
Graphics View
29/41
Graphics View
Extending QGraphicsItem
QGraphicsItem pure virtual methods (required overrides):
void paint()
Paints contents of item in local coordinates
QRectF boundingRect()
Returns outer bounds of item as a rectangle
Called by QGraphicsView to determine what regions need to be redrawn
30/41
Graphics View
Boundaries
31/41
Graphics View
Painting Items
Item is in complete control of drawing itself
Use standard QPainter drawing methods
QPen, QBrush, pixmaps, gradients, text, etc.
No background to draw
Dynamic boundary and arbitrary shape
Polygon, curved, non-contiguous, etc.
32/41
Graphics View
P0 (0,0)
P1 (0,20)
P2 (20,100)
size = 40x120
33/41
Graphics View
34/41
Graphics View
Choosing a boundingRect()
boundingRect()
Inuences drawing code
Inuences "origin" of item transforms
(2)
(3)
(4)
35/41
Graphics View
QGraphicsItemGroup
Easier approach to making a Pendulum:
Extend QGraphicsItemGroup
Use other concrete items as elements, add as children
No need to override paint() or shape()
PendulumItem::PendulumItem(QGraphicsItem* parent)
: QGraphicsItemGroup(parent) {
m_line = new QGraphicsLineItem( 0,0,0,100, this);
m_line->setPen( QPen( Qt::black, 3 ) );
m_circle = new QGraphicsEllipseItem( -20, 100, 40, 40, this );
m_circle->setPen( QPen(Qt::black, 3 ));
QRadialGradient g( 0, 120, 20, -10, 110 );
g.setColorAt( 0.0, Qt::white );
g.setColorAt( 0.5, Qt::yellow );
g.setColorAt( 1.0, Qt::black );
m_circle->setBrush(g);
}
.Demo graphicsview/ex-pendulum
36/41
Graphics View
Event Handling
QGraphicsItem::sceneEvent(QEvent*)
Receives all events for an item
Similar to QWidget::event()
keyPressEvent(QKeyEvent*)
mouseMoveEvent(QGraphicsSceneMouseEvent*)
wheelEvent(QGraphicsSceneWheelEvent*)
mousePressEvent(QGraphicsSceneMouseEvent*)
contextMenuEvent(QGraphicsSceneContextMenuEvent*)
dragEnterEvent(QGraphicsSceneDragDropEvent*)
focusInEvent(QFocusEvent*)
hoverEnterEvent(QGraphicsSceneHoverEvent*)
.
Make sure to call base-class versions, too. Without this, the item select,
focus,
move behavior will not work as expected.
.
37/41
Graphics View
zoom(1.0/factor);
}
void MyView::keyPressEvent(QKeyEvent *event) {
switch (event->key()) {
case Qt::Key_Plus:
zoom(1.2);
break;
case Qt::Key_Minus:
zoom(1.0/1.2);
break;
default:
QGraphicsView::keyPressEvent(event);
}
}
38/41
Graphics View
Collision Detection
Determines when items' shapes intersect
Two methods for collision detection:
collidesWithItem(QGraphicsItem* other)
collidingItems(Qt::ItemSelectionMode)
shape()
Returns QPainterPath used for collision detection
Must be overridden properly
items()
Overloaded forms take QRectF, QPolygonF, QPainterPath
Return items found in rect/polygon/shape
39/41
Graphics View
1 child item, that is a "corner drag" button, permitting the user to click
and drag the button, to resize or rotate the image.
Start with the handout provided in graphicsview/lab-cornerdrag
Further details
40/41
Graphics View
Digia Plc.
Digia, Qt and the Digia and Qt logos are the registered trademarks of
Digia Plc. in Finland and other countries worldwide.
41/41
Graphics View