【QML学习4】图像元素的加载

1. 普通本地图片

加载本地图片只要用source声明图片路径即可：

Image {
    x: 150; y: 150
    source: "../images/rocket.png"
}

• 可以通过sourceSize.width和sourceSize.height来获得图片的原始尺寸信息。
• 图片是异步加载的，可以使用progress属性来查看加载进度(0-1)，对于网络图片可以使用这个信息制作加载进度条。
• fillMode属性可以控制图片的填充方式。

2. 动图gif

动图的类型是AnimatedImage，加载方式与普通图片无异。

AnimatedImage {
    x: 100; y: 50
    width: 200; height: 200
    source: "../images/image-animated.gif"
}

• 对于动图，frameCount是总帧数，currentFrame是当前的帧数。

3. 边框图片

边框图片的类型名是BorderImage，它的属性很适合用来制作内容的边框。
被用在边框图片的图片会被划分为9个区域：

区域5会根据设置的horizontalTileMode和verticalTileMode方法进行平铺。

区域2,8会根据设置的horizontalTileMode方法进行平铺。

区域4,6会根据设置的verticalTileMode方法进行平铺。

区域1,3,7,9的图像不会变化。