QML - 可视元素 Image

Image 和他的名字一样，在QML 中用来现实一个图片。

在实现一下UI的过程中，使用贴图是最简单的方法。

Qt lib 支持的静态图片格式类型，Image 都可以支持如bitmap， png， jpg， svg 等等。

Image 支持大尺寸的图片，但是大尺寸的图片解码的速度和内存的使用如何平衡那，看看Image 为我们提供了那些功能。

同时Image 支持加载本地图片和网络图片

下面是image的属性

• asynchronous : bool //是否使用额外的线程加载图片（如果是本地大图片，建议设置成true）。如果是网络加载图片参数无法修改默认是true。
• cache : bool //是否缓存加载的图片，默认为true。如果大图片建议设置为false，节约内存。
• fillMode : enumeration //如果item显示区域与image的size 不匹配是，设置如何显示image
• • Image.Stretch -image 缩放到item 显示区域内
  • Image.PreserveAspectFit - 根据item显示区域缩放，不裁剪图片
  • Image.PreserveAspectCrop - 根据itme显示区域缩放，裁减图片，以上都根据寬高比
  • Image.Tile - 根据item显示区域，在水平，垂直方向重复显示图片
  • Image.TileVertically - 水平方向缩放图片，垂直方向重复显示图片
  • Image.TileHorizontally - 垂直方向缩放图片，水平方向重复显示图片
• mirror : bool // 镜子特效
• paintedHeight : real //只读属性，保存着图片被绘制的高度
• paintedWidth : real //只读属性，保存着图片被绘制的宽度
• progress : real // 只读属性，图片加载进度，（0.0-1.0)
• smooth : bool //平滑处理。如果图片经过缩放，那么打开参数会导致图片加载速度变慢。
• source : url // 图片地址，注意qml对路径的处理，有时需要使用file://， qrc。
• sourceSize : QSize // 指定图片在内存中保存的图片宽，高，而不管图片的实际宽，高，这样可以使图片使用内存减少。在设置了sourceSize 之后会引起图片的重新加载。
• status : enumeration // 只读属性，获取图片的状态
  
• • Image.Null - 没有图片
  • Image.Ready - 图片完成加载
  • Image.Loading - 正在加载图片
  • Image.Error - 加载图片时，发生错误

下面是一个简单的现实图片的实例

import QtQuick 2.0

Rectangle {
    id: mainWindow
    width: 800
    height: 600
    color: "white"
    antialiasing: true

    Image {
        id: testImage
        fillMode: Image.PreserveAspectFit
        mirror: true
        smooth: false
        sourceSize: {800, 600}
        anchors.fill: parent
        source: "/home/guilai/Pictures/238645.jpg"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("paintedHeight = ", parent.paintedHeight, "paintedWidth", parent.paintedWidth)
                console.log("status = ", parent.status)
            }
        }
    }

}