三十六QML项目之Image和BorderImage.docx
《三十六QML项目之Image和BorderImage.docx》由会员分享，可在线阅读，更多相关《三十六QML项目之Image和BorderImage.docx（14页珍藏版）》请在冰豆网上搜索。
三十六QML项目之Image和BorderImage
三十六、QML项目之Image和BorderImage
本文章原创于转载请注明出处。
从这一节开始我们讲述QML的一些基本组成元素和项目。
正是这些部件才使得QML变得使用简单但功能强大。
我们先打开QtCreator，然后进入帮助模式，在左上角选择Contents方式显示。
我们点击QtReferenceDocumentation一项，这时就显示出了Qt4.7的内容列表。
如下图。
我们选择QtAPIOverviews的UIdesign&QtQuick一项。
如下图。
这里有DeclarativeUI和QML的概述，下面列有一些教程和QML相关内容的文章列表。
我们可以查看自己所需要的内容。
我们点击Reference下面的QMLElements一项。
这里列出了所有的标准QtDeclarative元素和QML项目。
如下图。
我们以后可以在这里查看自己所需要用到的元素和项目的帮助文件。
在这一节里，我们主要介绍QMLItems中的Image和BorderImage两个项目。
一、Image图片
1.我们新建QtQMLApplication，工程名为“myImage”。
2.我们在库面板中拖入一个Image到场景中，在属性面板中我们可以选择一张图片的路径。
其实，更好的方法是，我们将图片放到工程文件夹中，这样在库面板的资源栏中我们就可以直接看到该图片了，而且该图片也会显示在工程文件列表中。
3.我们将两张图片放到工程文件夹下。
如下图。
然后在库面板的资源页面查看添加的图片。
我们可以将图片直接拖入场景。
如下图。
在工程文件列表中也会显示这两个图片。
4.图片平铺方式。
在属性面板中我们可以设置图片的平铺方式FillMode。
如下图。
Stretch：
默认选择的是Stretch一项，表示拉伸图片。
就是说当将图片缩放时会拉伸图片。
其效果如下：
当图片缩放或者旋转时我们也可以选中属性面板中Smooth一项，使图片变得平滑。
效果如下：
PreserveAspectFit：
拉伸时缩放图片，总是显示完整图片。
PreserveAspectCrop：
拉伸时缩放图片，但是可能对图片进行裁剪。
Tile：
平铺图片。
TileVertically：
竖直平铺图片。
TileHorizontally：
水平平铺图片。
5.使用网络上的图片。
我们也可以使用网络上的图片，直接在属性面板上更改图片路径为图片的地址即可。
这时，如果你的电脑连接着网络，那么图片会自动下载并显示出来，效果如下。
但是有时候从网上下载图片是很慢的，所有我们希望在没有下载完图片时，图片区域可以有些提示，所以我们利用Image的status属性，在Edit代码编辑界面，更改Image段代码如下：
Image{
id:
image1
Text{id:
text1} //用于显示信息
width:
200
height:
200
fillMode:
“Tile”
source:
“http:
//j.imagehost.org/0317/linux.jpg”
states:
[
State{ //没有下载完图片时的状态
name:
"loading"
when:
image1.status!
=Image.Ready
PropertyChanges{
target:
text1
text:
"loading..."
}
}
]
}
这时运行程序效果如下：
二、BorderImage边界图片
边界图片，顾名思义，就是将一张图片作为窗口的边界。
它主要的特点就是，在这里用四条线将一张图片分成了9部分。
如下图。
这四条线分别用它们到图片各边界的像素值来表示，上下左右依次是top，bottom，left和right。
比如top=50就是说离图片上边界50像素的地方就是上边界线。
这样，将图片分为9个区域后，它们各自就有了不同的平铺规定。
下面我们先看例子，再进行总结。
1.我们在库面板中选中BorderImage，拖入场景。
然后在属性面板中输入图片的路径，并设置其各边界线的值均为30。
如下图。
这时我们拉伸图片，查看效果。
可以看到，图片四个角没有变化，其他区域都被拉伸了。
这时我们再将各边界线的值改为60，然后查看效果。
可以看到，被边界线分到四个角的图片是不被拉伸的。
2.平铺方式。
在这里我们可以分别指定水平方向的平铺方式（horizontalTileMode属性）和竖直方向的平铺方式（verticalTileMode属性）。
平铺方式有以下三种：
BorderIamge.Stretch：
缩放图像以适合拉伸。
（默认值）
BorderImage.Repeat：
平铺图像，当空间不够时，最后一个图像可能会被裁剪。
BorderImage.Round：
平铺图像，但是缩放所有平铺的图像，确保最后一个图像不会被裁剪。
我们上面就是使用的Stretch方式。
下面我们改用其他方式，查看效果。
我们先更改代码如下：
BorderImage{
id:
borderimage1
horizontalTileMode:
BorderImage.Repeat
verticalTileMode:
BorderImage.Repeat
border.bottom:
30;border.top:
30;border.right:
30;border.left:
30
anchors.fill:
parent
source:
“colors.png”
}
这时运行程序，效果如下：
我们更改平铺方式：
horizontalTileMode:
BorderImage.Round
verticalTileMode:
BorderImage.Round
再次运行程序，效果如下：
我们再次更改平铺方式：
horizontalTileMode:
BorderImage.Round
verticalTileMode:
BorderImage.Repeat
效果如下：
3.结论
使用边界图片，我们需要先指定四条边界线，然后指定水平和竖直方向的平铺方式。
图片被四条边界线分为9个区域：
区域5会通过horizontalTileMode和verticalTileMode进行平铺。
区域2,8会通过horizontalTileMode进行平铺。
区域4,6会通过verticalTileMode进行平铺。
区域1,3,7,9的图像不会变化。
这一节中我们讲述了图片的使用。
可以看到，在QML中图片是很容易操作的，我们可以按照我们自己的想法来显示图片。
升级会员 