Image属性说明

继承自 Item
相关控件：Rectangle

Image显示图像。Image可以以Qt支持的任何标准图像格式提供，包括位图格式（如PNG和JPEG）和矢量图形格式（如SVG）。如果需要显示动画图象，使用或AnimatedImage。

本文: https://www.lovejia.win/blog/article/Image.html
参考原文：http://doc.qt.io/qt-5/qml-qtquick-image.html
参考译文：http://blog.csdn.net/vampire_armand/article/details/39318563
http://blog.csdn.net/gooderfeng/article/details/9143887

属性说明

asynchronous : bool

指定本地文件系统上的映像应以异步方式加载到单独的线程中。默认值为false，导致用户界面线程在加载图像时阻止。将异步设置为true在维护响应用户界面比使图像立即可见更可取时是有用的。
注意：此属性仅对从本地文件系统读取的图像有效。通过网络资源（例如HTTP）加载的图像总是异步加载。

autoTransform : bool

此属性用于保存图像是否应自动应用图像变换元数据（如EXIF方向）。
默认情况下，此属性设置为false。

cache : bool

指定是否应缓存图像。默认值为true。将高速缓存设置为false在处理大图像时非常有用，以确保它们不会以小的“ui元素”图像为代价进行缓存。

fillMode : enumeration

设置此属性以定义源图像与项目大小不同时会发生什么。
Image.Stretch - 图像缩放到适合
Image.PreserveAspectFit - 图像缩放均匀，适合无裁剪
Image.PreserveAspectCrop - 图像被均匀缩放以填充，如果需要，裁剪
Image.Tile - 图像水平和垂直复制
Image.TileVertically - 图像水平拉伸，垂直平铺
Image.TileHorizontally - 图像被垂直拉伸和水平平铺
Image.Pad - 图像不转换
注意：clip属性默认为false。这意味着即使fillMode设置成PreserveAspectCrop，item也可能涂出边界。

horizontalAlignment : enumeration / verticalAlignment : enumeration

设置图像的水平和垂直对齐。默认情况下，图像居中对齐。
horizontalAlignment的有效值是Image.AlignLeft、Image.AlignRight和Image.AlignHCenter；
verticalAlignment的有效值是Image.AlignTop、Image.AlignBottom和Image.AlignVCenter。

mipmap : bool

此属性用于保存图像在缩放或转换时是否使用mipmap过滤。
Mipmap能在缩放时提高视觉质量，使之更平滑，但有执行开销（初始化图片和渲染时）。
默认情况下，此属性设置为false。

mirror：bool

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

paintedHeight : real / paintedWidth：real

这些属性保存实际绘制的图像的大小。在大多数情况下，它是相同的width和height，但是在使用时Image.PreserveAspectFit或Image.PreserveAspectCrop paintedWidth或paintedHeight可以比更小或更大width和height图像的项目。

progress : real

此属性保持图像加载的进度，从0.0（无加载）到1.0（完成）。

smooth : bool

此属性保存图像在缩放或变换时是否平滑过滤。平滑过滤提供更好的视觉质量，但在一些硬件可能会更慢。如果图像以其自然大小显示，则此属性没有视觉或性能效果。
默认情况下，此属性设置为true。

source : url

Image能处理所有Qt支持格式的图片和URL方案。URL可以是绝对路径，也可以是相对组件URL的相对路径。

sourceSize : QSize

此属性保存加载的图像的实际宽度和高度。
与缩放图像绘制的width和height属性不同，此属性设置为加载的图像存储的实际像素数，以便大图像不会占用更多的内存。
注意：如果动态更改此属性，则可能会重新加载图像源，如果不在磁盘缓存中，甚至可能从网络重新加载。

status : enumeration

此属性保存图像加载的状态。它可以是以下之一：
Image.Null - 没有设置图像
Image.Ready - 图片已加载
Image.Loading - 当前正在加载图像
Image.Error - 加载图像时出错
可以用这个属性提供更新或响应状态变化

功能简述

默认情况下，本地可用的图片被立刻加载，并且在加载完成之前用户接口被阻塞。如果要加载大图像，可以通过设置asynchronous属性，用低优先级的线程加载图片。
如果图像是从网络而不是本地资源获取的，则会自动异步加载，进度和状态属性将随着图片加载更新成相应的值。
Images能缓存和内部分享。所以几个Image组件可以有一样的源，此时只有1个图片的拷贝被加载。
如果未指定width和height属性，则图像会自动使用加载的图像的大小。默认情况下，指定项目的宽度和高度会导致图像缩放到该大小。可以通过设置fillMode属性来更改此行为，从而允许图像被拉伸和平铺。
注意：图像通常是QML用户界面中最大的内存用户。建议不构成用户界面一部分的图像的大小通过sourceSize属性定界。这对于从外部源加载或由用户提供的内容尤其重要。

例

下面是最简单的显示图片的例子：

import QtQuick 2.0
Image {
    source: "pics/qtlogo.png"
}

下面是缩放拉伸图片的例子：
Stretch：

import QtQuick 2.0
Image {
    width: 130; height: 100
    source: "qtlogo.png"
}

PreserveAspectFit：

Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectFit
    source: "qtlogo.png"
}

PreserveAspectCrop：

Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectCrop
    source: "qtlogo.png"
    clip: true
}

Tile：

Image {
    width: 120; height: 120
    fillMode: Image.Tile
    horizontalAlignment: Image.AlignLeft
    verticalAlignment: Image.AlignTop
    source: "qtlogo.png"
}

TileVertically：

Image {
    width: 120; height: 120
    fillMode: Image.TileVertically
    verticalAlignment: Image.AlignTop
    source: "qtlogo.png"
}

TileHorizontally：

Image {
    width: 120; height: 120
    fillMode: Image.TileHorizontally
    verticalAlignment: Image.AlignLeft
    source: "qtlogo.png"
}

下面的例子可以确保内存中的图像不大于1024x1024像素，而不管图像的宽度和高度值如何：

import QtQuick 2.0
Rectangle {
    width: ...
    height: ...

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

注意：如果图像的实际大小大于sourceSize，则图像缩小。如果只有一个尺寸的维度设置为大于0，则另一个维度会按比例设置，以保留源图像的宽高比。（该在fillMode是独立的这一点）。
如果同时设置了sourceSize.width和sourceSize.height，则图像将缩小以适合指定的大小，从而保持图像的宽高比。缩放后图像的实际大小可通过Item :: implicitWidth和Item :: implicitHeight获得。
如果源是固有可缩放图像（例如SVG），则该属性确定加载的图像的大小，而不考虑固有大小。避免动态更改此属性; 渲染SVG 与图像相比是慢的。
如果源是不可缩放的图像（例如JPEG），加载的图像将不大于此属性指定的值。对于某些格式（目前只有JPEG），整个图像永远不会实际加载到内存中。
通过将sourceSize设置为sourceSize，可以将sourceSize清除为图像的自然大小undefined。

下面的例子加载图片，加载状态：

import QtQuick 2.0
Image {  
    id: image  
    width: 120; height:120  
    fillMode: Image.Tile  
    source: "http://www.baidu.com/img/baidu_sylogo1.gif"    //加载图片  
  
    onStatusChanged: { //加载状态  
        if(image.status == Image.Ready) console.log("Loaded")  
        else if(image.status == Image.Loading) console.log("Loading")  
    }  
}

下面的例子可以通过status属性提供更新或响应状态变化：
触发状态更改：

import QtQuick 2.0
State { 
    name: 'loaded'; when: image.status == Image.Ready 
}

实现onStatusChanged信号处理程序：

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

绑定到状态值：

1
2
3

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