QML类型说明-BorderImage

BorderImage

 

ImportStatement:   import QtQuick 2.2

Inherits:      Item

 

Properties

asynchronous: bool

border

border.left: int

border.right: int

border.top :int

border.bottom: int

cache : bool

horizontalTileMode: enumeration

mirror :bool

progress :real

smooth :bool

source : url

sourceSize :QSize

status :enumeration

verticalTileMode: enumeration

DetailedDescription

这个组件瓷片化每个图片，并在放大的时候创建边框。注意：它不是给放大的源图片家边框，而是将源图片分割后，按照配置的属性填充显示效果。它将图片按下面的方式分成9个单元。

当图片放大时，它按照下面的规则创建显示的边界。

单元1、3、7、9不放大

单元2和8根据horizontalTileMode的配置放大

单元4和6根据verticalTileMode的配置放大

单元5根据horizontalTileMode和verticalTileMode放大。

图片的单元在border属性组中定义。它描述了作为边界的源图片离边缘的距离。

使用例子：

下面的例子说明了不同的模式对图片显示的影响，引导线是为了说明每个单元受到的影响。

没有放大的图片用Image。引导线给出了定义边框后受影响的单元。

Image {

    source: "pics/borderframe.png"

}

下面是BorderImage显示的图片，给了它一个比原始图片大的尺寸，horizontalTileMode被设置成BorderImage.Stretch，这表示2和8这两个单元被水平拉伸。verticalTileMode被设置成BorderImage.Stretch，这表示4和6这两个单元被垂直拉伸。

BorderImage{

    width: 180; height: 180

    border { left: 30; top: 30; right: 30;bottom: 30 }

    horizontalTileMode: BorderImage.Stretch

    verticalTileMode: BorderImage.Stretch

    source: "pics/borderframe.png"

}

 

同样是一个较大的尺寸，设置了边框后，horizontalTileMode被设置成BorderImage.Repeat，这表示2和8两个单元将使用重复的方式填顶部和底部空间。同样的，verticalTileMode也被设置成了BorderImage.Repeat，这表示4和6两个单元使用重复的方时填左边和右边。

BorderImage{

    width: 180; height: 180

    border { left: 30; top: 30; right: 30;bottom: 30 }

    horizontalTileMode: BorderImage.Repeat

    verticalTileMode: BorderImage.Repeat

    source: "pics/borderframe.png"

}

 

在大多数情况下，2和8单元最终的尺寸，不是2和8单元原图宽度的整数倍；4和6单元的高度也有同样的情况，这时，我们使用BorderImage.Round来替代BorderImage.Repeat以达到重复的效果。

BorderImage的例子展示了怎样使用BorderImage。看相关的实例分析。

资源图片可能不会立即加载完成，这跟图片的保存位置相关，我们可以监控progress属性来知道当前的Loading过程。同时参阅Image和AnimatedImage的组件说明。

PropertyDocumentation

asynchronous: bool

在加载本地文件系统中的图片时，使用专门的线程异步加载。默认为假。这个值的意义在于保持快速响应的用户界面，比更快的加载图片更有意义。注意，只有加载本地图片时，这个属性才有效，加载网络资源时，处理过程总是异步的。

 

border group

border.left: int

border.right: int

border.top :int

border.bottom: int

分割图片为9个单元的4个边框位置。每个边框线是分割点到图片边缘的像素数。默认的边框线为0。

 

BorderImage{

    border.bottom: 10

    // ...

}

边框也能用.sci文件指定。

 

cache : bool

指定图片是否缓存，默认为真。当我们扩展小图片为巨大的图片时，设置它为假，已确保我们不缓存图片。

 

horizontalTileMode: enumeration

这个属性描述了边的中心单元的拓展方法。

BorderImage.Stretch- 拉伸到有效距离

BorderImage.Repeat- 重复图片，直到没有更多的空间。最后的图片可以裁减。

BorderImage.Round- 跟重复差不多，但会拉伸图片，以使最后的图片不裁减。

默认属性是拉伸。

 

mirror :bool

是否水平镜像图片。默认为假。

 

progress :real

图片加载的过程，从0.0到1.0。同时参阅status属性。

 

smooth :bool

当拉伸或过渡时，是否平滑处理。平滑处理提供更好的视觉效果，但会消费一些硬件资源。如果图片是自然大小的，这个属性没有视觉和性能上的影响。默认为真。

 

source : url

资源图片的URL。QT支持的所有图片格式和URL方法，BorderImage都支持。这个属性也能用.sci文件提供。这种文件是QML指定的，基于文档的用于指明边框的文档格式。内容为图片文件是什么，边框规则为什么。

下面是一个.sci文件的内容，边框都为10，图片为picture.png：

border.left:10

border.top:10

border.bottom:10

border.right:10

source:"picture.png"

URL可以使绝对路径，也可以是相对路金。同时参阅QQuickImageProvider。

 

sourceSize :QSize

加载的图片的实际宽和高，这个属性是只读的。同时参阅Image::sourceSize。

 

status :enumeration

图片加载的状态描述，它是下面的其中一个值：

BorderImage.Null- 没有设置图片

BorderImage.Ready- 图片加载完成

BorderImage.Loading- 图片正在被加载

BorderImage.Error- 加载图片出现错误。

同时看progress属性的文档

 

verticalTileMode: enumeration

4和6号单元处理方法的描述，值是下面的一种：

BorderImage.Stretch- 拉伸到目标尺寸

BorderImage.Repeat- 重复到没有多余空间，最后一张图片可能被裁减。

BorderImage.Round- 类似于重复，但使用拉伸来让最后的图片不会被裁减。

默认为拉伸。