visual.qdoc

Go to the documentation of this file.

// 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
\meta {keywords} {qmltopic}
\title Visual types
\keyword 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
       {Square and rounded rectangle with gradient fill}
 
\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 {qtmultimedia-index.html}{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
       {Red and blue overlapping squares demonstrating opacity blending}
 
\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
       {Blue square rotated 45 degrees and smaller green square}
 
For more complex transformations, see the \l Item::transform property.
 
*/