// Copyright (C) 2016 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\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.

*/
