| /**************************************************************************** |
| ** |
| ** Copyright (C) 2016 The Qt Company Ltd. |
| ** Contact: https://www.qt.io/licensing/ |
| ** |
| ** 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 The Qt Company. For licensing terms |
| ** and conditions see https://www.qt.io/terms-conditions. For further |
| ** information use the contact form at https://www.qt.io/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: https://www.gnu.org/licenses/fdl-1.3.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 {Image::}{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. |
| |
| */ |