2024年3月13日发(作者：)

Qt in Education

Exercises Lecture 6 – The Graphics View Canvas

Aim: This exercise will take you through the process of using the Graphics View

framework as well as extending it with custom items.

Duration: 1h

© 2011 Nokia Corporation and its Subsidiary(-ies).

The enclosed Qt Materials are provided under the Creative Commons Attribution-Share Alike 2.5 License Agreement.

The full license text is available here: /licenses/by-sa/2.5/legalcode.

Nokia, Qt and the Nokia and Qt logos are the registered trademarks of Nokia Corporation in Finland and other countries

worldwide.

© 2011 Nokia Corporation and its Subsidiary(-ies).

Qt in Education

Composing Items

This exercise comes with a source code package. Extract that package to a location of your

choice. In it, you will find a number of projects that will serve as starting points for the steps of this

exercise.

The first task is about creating a smiling face from existing graphics view items. These will be

composed into a single item. The starting point is the composedgraphicsitem project.

Create the face by implement the

addSmiley()

function. The figure below suggests coordinates for

different parts of the smiley. The starting point only draws the face itself. Your task is to add two

eyes (

QGraphicsEllipseItem

) and the smile (

QGraphicsPathItem

).

To get you started, the code for the left eye is shown below. Notice that the rectangle of the ellipse

needs to be calculated from the center point (-15, -25) and the dimensions of the eyes (12x24).

Also notice that the parent of the eye is

face

.

QGraphicsEllipseItem *leftEye =

new QGraphicsEllipseItem(QRect(-21, -37, 12, 24), face);

leftEye->setPen(QPen(Qt::black));

leftEye->setBrush(Qt::white);

The smile is created using the

QGraphicsPathItem

class. When using a path item, you first create a

QPainterPath.

Using the

arcMoveTo

and

arcTo

methods you can create the smile. Finally, you provide

the path to the path item using the

setPath

method.

Transforming items

Start from the transformedsmiley project. It is the same project that you used in the last step, but

the smiley is added three times to the graphics view scene.

The purpose of adding the smiley several times is to be able to compare them after having applied

different transformations to them.

For

smiley1,

scale the item to double size using the

scale

method, then translate 200 pixels to the

left using the

translate

method.

© 2011 Nokia Corporation and its Subsidiary(-ies).