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
|
/****************************************************************************
**
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquick-usecase-visual.html
\title Use Case - Visual Elements In QML
\brief Example of how to display visual item types in a QML application
\section1 The Rectangle Type
For the most basic of visuals, QtQuick provides a \l Rectangle type to draw rectangles. These rectangles can be colored with a
color or a vertical gradient. The \l Rectangle type can also draw borders on the rectangle.
For drawing custom shapes beyond rectangles, see the \l Canvas type or display
a pre-rendered image using the \l Image type.
\snippet qml/usecases/visual-rects.qml 0
\image qml-uses-visual-rectangles.png
\section1 The Image Type
QtQuick provides an \l Image type which may be used to display images. The
\l Image type has a \l source property whose value can be a remote or local
URL, or the URL of an image file embedded in a compiled resource file.
\snippet qml/usecases/visual.qml image
For more complex images there are other types similar to \l Image.
\l BorderImage draws an image with grid scaling, suitable for images used as
borders. \l AnimatedImage plays animated .gif and .mng images. \l AnimatedSprite
and \l SpriteSequence play animations comprised of multiple frames stored adjacently
in a non animated image format.
For displaying video files and camera data, see the \l QtMultimedia module.
\section1 Shared Visual Properties
All visual items provided by the QtQuick are based on the Item type, which provides a common set of attributes for
visual items, including opacity and transform attributes.
\section2 Opacity and Visibility
The QML object types provided by Qt Quick have built-in support for \l{Item::opacity}{opacity}.
Opacity can be animated to allow smooth transitions to or from a transparent
state. Visibility can also be managed with the \l{Item::visible}{visible} property more efficiently,
but at the cost of not being able to animate it.
\snippet qml/usecases/visual-opacity.qml 0
\image qml-uses-visual-opacity.png
\section2 Transforms
Qt Quick types have built-in support for transformations. If you wish to have your
visual content rotated or scaled, you can set the \l Item::rotation or \l Item::scale
property. These can also be animated.
\snippet qml/usecases/visual-transforms.qml 0
\image qml-uses-visual-transforms.png
For more complex transformations, see the \l Item::transform property.
*/
|
