QML类型：Image

一、描述

图像类型显示图像。可显示所有Qt支持的图像格式。

二、属性成员

1、currentFrame : int

      frameCount : int

currentFrame 是当前可见的帧。默认值为 0。

frameCount 是图像中的帧数。大多数图像只有一帧。

如果图像包含多个帧，可以将其设置为 0 和 frameCount - 1 之间的数字以显示不同的帧。

2、horizontalAlignment : enumeration

      verticalAlignment : enumeration

设置图像的水平和垂直对齐方式。默认情况下，图像居中对齐。

horizontalAlignment 的有效值：

• Image.AlignLeft
• Image.AlignRight
• Image.AlignHCenter

verticalAlignment 的有效值：

• Image.AlignTop
• Image.AlignBottom
• Image.AlignVCenter

3、paintedHeight : real

      paintedWidth : real

只读属性。这些属性保存实际绘制的图像的大小。

在大多数情况下，与宽度、高度相同，但在使用 Image.PreserveAspectFit 或 Image.PreserveAspectCrop 时，则可以不等于 Image 项的宽度、高度。

4、asynchronous : bool

指定本地文件系统上的图像是否在单独的线程中异步加载。设为true这会导致用户界面线程在加载图像时阻塞。默认值为 false。

此属性仅对从本地文件系统读取的图像有效。通过网络资源（例如 HTTP）加载的图像总是异步加载的。

5、autoTransform : bool

此属性保存图像是否应自动应用图像转换元数据。默认为 false。

6、cache : bool

指定是否应缓存图像。默认值是true。在处理大图像时，将缓存设置为 false 很有用。

7、fillMode : enumeration

填充模式。

• Image.Stretch：默认值。缩放图像以适合项目
• Image.PreserveAspectFit：图像均匀缩放以适应而不裁剪
• Image.PreserveAspectCrop：图像均匀缩放以填充，必要时进行裁剪
• Image.Tile：水平和垂直复制图像
• Image.TileVertically：图像水平拉伸并垂直平铺
• Image.TileHorizontally：图像被垂直拉伸并水平平铺
• Image.Pad：图像未转换

默认情况下 clip 为 false，这意味着即使将 fillMode 设置为 Image.PreserveAspectCrop，该项目也可能在其边界矩形之外进行绘制。

    Row
    {
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.Stretch
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.PreserveAspectFit
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.PreserveAspectCrop
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.Tile
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.TileVertically
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.TileHorizontally
        }
        Image
        {
            width: 200; height: 200;source: "qrc:/img/eee.jpg"
            fillMode:Image.Pad
        }
    }

8、mipmap : bool

此属性保存图像在缩放或变换时是否使用 mipmap 过滤。默认为 false。

与平滑相比，mipmap 过滤在按比例缩小时可提供更好的视觉质量，但它可能会以性能为代价（在初始化图像和渲染期间）。

9、mirror : bool

此属性保存图像是否应水平反转（镜像）。默认值为false。

10、mirrorVertically : bool

此属性保存图像是否应垂直反转（镜像）。默认值为false。

11、progress : real

只读属性。此属性保存图像加载的进度，从 0.0（未加载）到 1.0（已完成）。

12、smooth : bool

此属性保存图像在缩放或变换时是否平滑过滤。默认为 true。

平滑过滤可提供更好的视觉质量，但在某些硬件上可能会较慢。如果图像以其自然大小显示，则此属性没有视觉或性能影响。

13、source : url

图像源 URL。

14、sourceClipRect : rect

如果设置此属性，则保存要加载的源图像的矩形区域。

当仅需加载图像的部分时，sourceClipRect 与 sourceSize 属性一起使用以节省系统资源。

     Image
     {
        anchors.fill: parent
        source: "reallyBigImage.svg"
        sourceSize.width: 1024
        sourceSize.height: 1024
        sourceClipRect: Qt.rect(100, 100, 512, 512)
     }

可以通过将 sourceClipRect 设置为 undefined 清除此属性以重新加载整个图像。

注意：动态更改此属性会导致重新加载图像源。

15、sourceSize : size

此属性保存全帧图像的缩放宽度和高度。

此属性设置为加载的图像存储的最大像素数，以便大图像不会使用不必要的内存。

例如，这可确保内存中的图像不大于 1024x1024 像素，无论图像的宽度和高度值如何：

    Image 
    {
       anchors.fill: parent
       source: "reallyBigImage.jpg"
       sourceSize.width: 1024
       sourceSize.height: 1024
    }

如果图像的实际大小大于 sourceSize，则将图像缩小。

如果同时设置了 sourceSize.width 和 sourceSize.height，图像将被缩小以适应指定的尺寸（除非使用 PreserveAspectCrop 或 PreserveAspectFit，否则它将被缩放以匹配裁剪/拟合的最佳尺寸），并保持图像的纵横比。缩放后图像的实际大小可通过 Item::implicitWidth 和 Item::implicitHeight 获得。

如果源是固有可缩放图像（例如 SVG），则此属性确定加载图像的大小，而不管固有大小。避免动态更改此属性；与渲染普通图像相比，渲染 SVG 很慢。

如果源是不可缩放的图像，则加载的图像将不大于此属性指定的大小。

如果同时设置了 sourceClipRect 属性，则 sourceSize 确定比例，但它将被裁剪为剪辑矩形的大小。

通过将 sourceSize 设置为 undefined，可以将 sourceSize 清除为图像的自然大小。

注意：动态更改此属性会导致重新加载图像源。

16、status : enumeration

此属性保存图像加载的状态。

• Image.Null：没有设置图像
• Image.Ready：图像已加载
• Image.Loading：当前正在加载图像
• Image.Error：加载图像时发生错误

使用此状态以某种方式提供更新或响应状态更改。 例如：

触发状态更改：

 State
 {
     name: 'loaded'
     when: image.status == Image.Ready 
 }

实现一个 onStatusChanged 信号处理程序：

Image
{
    id: image
    onStatusChanged: 
    {
        if (image.status == Image.Ready) 
            console.log('Loaded')
    }
}

绑定到状态值： 

 Text 
 { 
     text: image.status == Image.Ready ? 'Loaded' : 'Not loaded' 
 }