BorderImage类型被缩放或每个图像的拼接部位创造出边界图像。一个BorderImage打破了源图像,使用指定的源属性,为9个区域。图片的单元在border属性组中定义,它描述了作为边界的源图片离边缘的距离。
本文: https://www.lovejia.win/blog/article/BorderImage.html
参考原文:http://doc.qt.io/qt-5/qml-qtquick-borderimage.html
参考译文:http://blog.csdn.net/vampire_armand/article/details/38926649
属性说明
asynchronous : bool
指定本地文件系统上的映像应以异步方式加载到单独的线程中。默认值为false,导致用户界面线程在加载图像时阻止。将异步设置为true在维护响应用户界面比使图像立即可见更可取时是有用的。
注意:此属性仅对从本地文件系统读取的图像有效。通过网络资源(例如HTTP)加载的图像总是异步加载。
border
border.left : int
border.right : int
border.top : int
border.bottom : int
4个边框线(水平2和垂直2)将图像分成9个部分,每个边界线(左,右,顶部和底部)指定从源图像的相应边缘的像素偏移量。默认情况下,每个边框线的值为0。边界线也可以使用.sci文件指定。
cache : bool
指定是否应缓存图像。默认值为true。将高速缓存设置为false在处理大图像时非常有用,以确保它们不会以小的“ui元素”图像为代价进行缓存。
horizontalTileMode : enumeration / verticalTileMode : enumeration
此属性描述如何重复或拉伸边框图像的中间部分。
BorderImage .Stretch - 缩放图像以适合可用区域。
BorderImage .Repeat - 平铺图像,直到没有更多空间。可裁剪最后一个图像。
BorderImage .Round - 和重复差不多,但缩放图像,以确保最后一个图像不被裁剪。
每个属性的默认平铺模式为BorderImage .Stretch。
mirror : bool
此属性保存图像是否应水平反转(有效地显示镜像图像)。
默认值为false。
progress : real
此属性保持图像加载的进度,从0.0(无加载)到1.0(完成)。
smooth : bool
此属性保存图像在缩放或变换时是否平滑过滤。平滑过滤提供更好的视觉质量,但在一些硬件可能会更慢。如果图像以其自然大小显示,则此属性没有视觉或性能效果。
默认情况下,此属性设置为true。
source : url
此属性保存引用源图像的URL。
BorderImage可以处理Qt支持的任何图像格式,从Qt支持的任何URL方案加载。
此属性还可用于引用.sci文件,这些文件以特定于QML的基于文本的格式编写,指定给定边框图像的边框,图像文件和切片规则。
URL可以是绝对的,或者相对于组件的URL。
sourceSize : QSize
此属性保存加载的图像的实际宽度和高度。
在BorderImage中,此属性是只读的。
status : enumeration
此属性描述图像加载的状态。它可以是以下之一:
BorderImage。null - 未设置图像
BorderImage .Ready - 图像已加载
BorderImage .Loading - 当前正在加载图像
BorderImage .Error - 加载图像时出错
功能简述
BorderImage元素通过缩放或者平铺图片的各个部分来创建超出图片的边界。
一个BorderImage元素将一个图片分成9个区域:
当缩放时,源图片的各个区域用下面的方式进行缩放或者平铺来创建要显示的边界图片:
1) 4个角(1,3,7,9区域)不进行缩放;
2) 区域2和8通过horizontalTileMode属性设置的模式进行缩放;
3) 区域4和6通过verticalTileMode属性设置的模式进行缩放;
4) 中间部分(区域5)会结合horiTileMode和verticalTileMode属性设置的模式进行缩放。
使用border属性组定义图像的区域,该属性组描述与源图像的每个边缘的距离以用作边界。
例
下面的例子说明了不同的模式对图片显示的影响,引导线是为了说明每个单元受到的影响。
没有放大的图片用Image。引导线给出了定义边框后受影响的单元:
1 | import QtQuick 2.0 |
下面是BorderImage显示的图片,给了它一个比原始图片大的尺寸,horizontalTileMode被设置成BorderImage.Stretch,这表示2和8这两个单元被水平拉伸。verticalTileMode被设置成BorderImage.Stretch,这表示4和6这两个单元被垂直拉伸:
1 | BorderImage { |
同样是一个较大的尺寸,设置了边框后,horizontalTileMode被设置成BorderImage.Repeat,这表示2和8两个单元将使用重复的方式填顶部和底部空间。同样的,verticalTileMode也被设置成了BorderImage.Repeat,这表示4和6两个单元使用重复的方时填左边和右边:
1 | BorderImage { |
在大多数情况下,2和8单元最终的尺寸,不是2和8单元原图宽度的整数倍;4和6单元的高度也有同样的情况,这时,我们使用BorderImage.Round来替代BorderImage.Repeat以达到重复的效果。
BorderImage的例子展示了怎样使用BorderImage。看相关的实例分析。
以下例子定义将底线设置为从图像底部向上10像素:
1 | BorderImage { |
下面的例子中.sci文件将图像的每一边的边框设置为10,图片为picture.png:
1 | border.left: 10 |