diff options
Diffstat (limited to 'src/quick/doc/src/appdevguide/usecases/visual.qdoc')
| -rw-r--r-- | src/quick/doc/src/appdevguide/usecases/visual.qdoc | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/quick/doc/src/appdevguide/usecases/visual.qdoc b/src/quick/doc/src/appdevguide/usecases/visual.qdoc index 66244381e6..d63f944b50 100644 --- a/src/quick/doc/src/appdevguide/usecases/visual.qdoc +++ b/src/quick/doc/src/appdevguide/usecases/visual.qdoc @@ -28,4 +28,58 @@ \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. + */ |