SmoothFadeImage QML Type
Displays an image and smoothly fade when the source is changed. More...
Import Statement: | import Fluid.Controls 1.1 |
Properties
- animationEnabled : bool
- fadeDuration : int
- fillMode : enumeration
- running : bool
- smooth : bool
- source : url
- sourceSize : size
- status : enumeration
Signals
Detailed Description
This component can be used in place of an Image when a smooth fade animation between two sources is needed.
When the source is changed and the fade animation ends, the image loaded before is unloaded; this means that only one image at a time is loaded.
Images are loaded asynchronously and are not cache, so unlike the Image component the asynchronous
and cache
properties are not available.
Example of usage:
import QtQuick 2.10 import Fluid.Controls 1.0 Item { width: 128 height: 128 SmoothFadeImage { anchors.fill: parent source: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Qt_logo_2015.svg/1380px-Qt_logo_2015.svg.png" fillMode: Image.PreserveAspectFit smooth: true fadeDuration: 400 MouseArea { anchors.fill: parent onClicked: parent.source = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1280px-Qt_logo_2016.svg.png" } } }
Property Documentation
Set this property to false to disable the fade animation. If the animation is disable, SmoothFadeImage behaves like a normal Image.
The fade animation is enabled by default.
Set this to change the fade animation time (in milliseconds). Default value is 250 ms.
Set this property to define what happens when the source image has a different size than the item.
- Image.Stretch - the image is scaled to fit (default)
- Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping
- Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary
- Image.Tile - the image is duplicated horizontally and vertically
- Image.TileVertically - the image is stretched horizontally and tiled vertically
- Image.TileHorizontally - the image is stretched vertically and tiled horizontally
- Image.Pad - the image is not transformed
Defaults to Image.Stretch
.
Note that clip
is false by default which means that the item might paint outside its bounding rectangle even if the fillMode is set to PreserveAspectCrop.
This property holds whether the image is smoothly filtered when scaled or transformed. Smooth filtering gives better visual quality, but it may be slower on some hardware.
If the image is displayed at its natural size, this property has no visual or performance effect.
By default, this property is set to true
.
The image being displayed. SmoothFadeImage can handle any image format supported by Qt, loaded from any URL scheme supported by Qt.
See also Image::source.
This property holds the actual width and height of the loaded image.
Unlike the width
and height
properties, which scale the painting of the image, this property sets the actual number of pixels stored for the loaded image so that large images do not use more memory than necessary.
For example, this ensures the image in memory is no larger than 1024x1024 pixels, regardless of the SmoothFadeImage's width and height values:
Rectangle { width: ... height: ... Image { anchors.fill: parent source: "reallyBigImage.jpg" sourceSize.width: 1024 sourceSize.height: 1024 } }
If the image's actual size is larger than the sourceSize, the image is scaled down. If only one dimension of the size is set to greater than 0, the other dimension is set in proportion to preserve the source image's aspect ratio. (The fillMode
is independent of this.)
If both the sourceSize.width and sourceSize.height are set the image will be scaled down to fit within the specified size, maintaining the image's aspect ratio. The actual size of the image after scaling is available via Item::implicitWidth
and Item::implicitHeight
.
If the source is an intrinsically scalable image (eg. SVG), this property determines the size of the loaded image regardless of intrinsic size. Avoid changing this property dynamically; rendering an SVG is slow compared to an image.
If the source is a non-scalable image (eg. JPEG), the loaded image will be no greater than this property specifies. For some formats (currently only JPEG), the whole image will never actually be loaded into memory.
sourceSize can be cleared to the natural size of the image by setting sourceSize to undefined.
Note: Changing this property dynamically causes the image source to be reloaded, potentially even from the network, if it is not in the disk cache.
This property holds the status of image loading. It can be one of:
- Image.Null - no image has been set
- Image.Ready - the image has been loaded
- Image.Loading - the image is currently being loaded
- Image.Error - an error occurred while loading the image
Signal Documentation
This signal is emitted when the swap between the old source and the new one has happened.