blob: c03221493a2b15bb04378c75f83959a192b3d2ee (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
/****************************************************************************
**
** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: http://www.qt-project.org/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file.
**
** Other Usage
** Alternatively, this file may be used in accordance with the terms
** and conditions contained in a signed written agreement between you
** and Nokia.
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\title Scenegraph Painted Item Example
\example declarative/painteditem/textballoons
The Painted Item example shows how to use the QML Scene Graph framework to
implement custom scenegraph items using QPainter.
\image declarative-textballoons_example.png
The QQuickPaintedItem class is a class derived from QQuickItem for implementing
custom QML Scene Graph items using the QPainter interfaces.
The example consists of an item class, a plugin class and a QML file
to use this plugin. The \c TextBalloon class represents the individual
text balloons extending QQuickPaintedItem, the \c TextBalloonPlugin class
represents the skeleton code for a QtQuick plugin and the
\c textballoons.qml file is used to load the plugin and display the text
balloons.
We will focus on the \c TextBalloon class first and continue with the
\c textballoons.qml file. For an example on how to implement a QtQuick
plugin please look at \l{declarative/tutorials/extending/chapter6-plugins}
{Writing an Extension Plugin}
\section1 TextBalloon Class Declaration
The \c TextBalloon class inherits from QQuickPaintedItem. QQuickPaintedItem
is the base class for all QPainter based items in the QML Scene Graph
framework.
\snippet examples/declarative/painteditem/textballoons/textballoon.h 0
To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure
virtual function \l {QQuickPaintedItem::}{paint()} which implements the
painting of the element.
\section1 TextBalloon Class Definition
We have to be sure to initialize the rightAligned property for a
TextBalloon item.
\snippet examples/declarative/painteditem/textballoons/textballoon.cpp 0
Then we implement the \c paint() function which is automatically called by
the Scenegraph framework to paint the contents of the item. The function
paints the item in local coordinates.
\snippet examples/declarative/painteditem/textballoons/textballoon.cpp 1
We start with setting the pen and brush on the item to define the look of
the item. After that we start drawing. Note that the \l {QQuickPaintedItem::}{boundingRect()}
item is called to draw depending on the size of the item. The rectangle
returned by the \l {QQuickPaintedItem::}{boundingRect()} function is the size
of the item as defined in the QML file.
\section1 textballoons.qml file
The Interface consists of two main parts. The scrollable area with the
textballoons and the controls button to add new balloons.
\section2 BalloonView
\snippet examples/declarative/painteditem/textballoons/textballoons.qml 0
The balloonModel contains two elements at application start which will be
displayed by the balloonView. The balloonView alernates the TextBalloon
delegate items between left-aligned and right-aligned.
\section2 Controls
\snippet examples/declarative/painteditem/textballoons/textballoons.qml 1
The controls part of the UI contains a rectangle with a MouseArea which
changes color when the mouse hovers over it. This control 'button' adds
a new element to the end of the model with a random width.
*/
|
