mirror of https://github.com/qt/qtdoc.git
86 lines
3.6 KiB
Plaintext
86 lines
3.6 KiB
Plaintext
|
/****************************************************************************
|
||
|
|
**
|
||
|
|
** Copyright (C) 2013 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, \l {Qt Quick} 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 qmlapp/usecases/visual-rects.qml 0
|
||
|
|
\image qmlapp/qml-uses-visual-rectangles.png
|
||
|
|
|
||
|
|
\section1 The Image Type
|
||
|
|
|
||
|
|
\l {Qt Quick} 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 qmlapp/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 {Qt Multimedia} module.
|
||
|
|
|
||
|
|
\section1 Shared Visual Properties
|
||
|
|
|
||
|
|
All visual items provided by \l {Qt Quick} 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 qmlapp/usecases/visual-opacity.qml 0
|
||
|
|
\image qmlapp/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 qmlapp/usecases/visual-transforms.qml 0
|
||
|
|
\image qmlapp/qml-uses-visual-transforms.png
|
||
|
|
|
||
|
|
For more complex transformations, see the \l Item::transform property.
|
||
|
|
|
||
|
|
*/
|