QML图像、状态和动画--图片、边界图片和动态图片

1. 图片 Image

    source: 资源URL，可以用所有Qt支持的格式，PNG、JPEG、SVG等

    大小：width、height，图片缩放到这个大小。没有指定，自动使用加载的图片的大小

   fillMode：允许图片拉伸或者平铺

         Image.Stretch //拉伸
         Image.PreserveAspectFit //适应高宽
         Image.PreserveAspectCrop  //适应宽度
         Image.Tile    //宽、高方向复制填满
         Image.TileVertically //宽方向拉伸，高方向复制填满
         Image.TileHorizontally //高方向拉伸，宽方向复制填满

默认的，本地图片会立即加载，阻塞界面，如果要加载一个巨大的图片，最好实在一个低优先级的线程中进行，通过设置asynchronous: true 实现

        progress和status：会在何时的时间进行更新

        source：图片会在内部进行缓存和共享，如果几个Image元素中使用了相同的source，那么只会加载该图片的一个备份

        占内存：图片一般是QML用户界面中最占内存的，所以建议将不是界面的组成部分的图片使用sourceSize属性设置其大小

         sourceSize：sourceSize.width和sourceSize.height，它们与width和height属性不同，因为设置Image的width和height属性会在绘制图片时进行缩放，而这个属性加载的图片保存时的真实像素数量，这样巨大的图片也不会使用太多的内存了。

import QtQuick 2.4

Image {
    width: 100; height:100
    fillMode: Image.TileVertically
    source: "hehe.jpg"     //程序所在目录
}

加载图片，加载状态

import QtQuick 2.4

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")
    }
}

2. 边界图片BorderImage

BorderImage元素通过缩放或者平铺图片的各个部分来创建超出图片的边界

一个BorderImage元素将一个图片分成9个区域

当缩放时，源图片的各个区域用下面的方式进行缩放或者平铺来创建要显示的边界图片：

  1) 4个角(1,3,5,7,9区域)不进行缩放

  2) 区域2和8通过horizontalTileMode属性设置的模式进行缩放；

  3) 区域4和6通过verticalTileMode属性设置的模式进行缩放

  4) 中间部分(区域5)会结合horiTileMode和verticalTileMode属性设置的模式进行缩放

四条边界线：border.top、border.bottom、border.left和border.right

平铺模式：BorderImage.Strech拉伸、borderImage.Repeat平铺

图片可能会被修剪，BorderImage.Round进行平铺，将图片进行缩小来确保最后的图片不进行修剪

horizontalTileMode: BorderImage.Repeat  //水平方向复制
verticalTileMode: BorderImage.Stretch//垂直方向拉伸

3. 动态图片AnimatedImage

AnimatedImage扩展了Image元素的功能，可以用来播放包含了一系列帧的图片动画，比如GIF文件

当前帧和动画总长度等信息可以使用currentFrame和frameCount属性来获取

可以通过改变playing和paused属性来开始、暂停和停止动画

import QtQuick 2.4

BorderImage {
    width: animation.width; height:animation.height + 8

    AnimatedImage {id: animation; source:"animation.gif"}
}