QML类型说明-Image

Image

ImportStatement:   import QtQuick 2.2

Inherits:      Item

InheritedBy:    AnimatedImage.

 

Properties

asynchronous: bool

cache : bool

fillMode : enumeration

horizontalAlignment: enumeration

mipmap :bool

mirror :bool

paintedHeight: real

paintedWidth: real

progress :real

smooth :bool

source : url

sourceSize :QSize

status :enumeration

verticalAlignment: enumeration

 

DetailedDescription

Image显示一个图片。

图片的源使用source属性指定URL。任何被Qt支持的标准图片格式都能提供给Images。包括bitmap—诸如PNG和JPEG；矢量图格式—诸如SVG。如果我们需要显示动画图象，使用AnimatedSprite或AnimatedImage。

如果width和height属性没有被指定，Image自动使用加载的图片的尺寸。默认情况下，指定width和height将促使缩放图片。缩放行为能通过设置fillMode属性改变，fillMode允许图片拉伸或瓷砖平铺。

下面是最简单的显示图片的例子：

importQtQuick 2.0

 

Image {

    source: "pics/qtlogo.png"

}

Performance

默认情况，本地可用的图片被立刻加载，在加载完成前，用户接口被阻塞。如果一个巨大的图片被加载，可以通过设置asynchronous属性，用低优先级的线程加载图片。如果资源来自网络，它将自动异步加载图片。进度和状态属性将随着图片加载更新成相应的值。

Images能缓存和内部分享。所以几个Image组件可以有一样的源，此时只有1个图片的拷贝被加载。

注意：在QML用户接口中，图片常常是最大的内存用户。在构成用户界面的图片部分，使用图片的源尺寸是被推荐的。对于从外部加载源或被用户提供的源来说，这是非常重要的。

 

PropertyDocumentation

asynchronous: bool

在本地文件系统的图片将使用独立的线程异步加载。默认为假，此时当图片加载时，用户接口将会阻塞。当维持快速的用户响应比立即显示图片更重要是，异步加载就很有用。注意，这个属性仅仅工作在图片来源于本地文件系统。来源于网络的资源（例如HTTP）将总是通过异步加载。

 

cache : bool

是否缓冲图片。默认为真。当处理大图片时，设置为假是有用户。例如在UI上用小空间显示实际很大的图片。

 

fillMode :enumeration

当源图片和Image的尺寸不同时，使用什么操作显示图片。

Image.Stretch- 缩放图片，使用拉伸

Image.PreserveAspectFit- 图片按比例缩放，但不裁减。

Image.PreserveAspectCrop-图片按比例缩放，裁减

Image.Tile -图片在水平方向和垂直方向瓷砖平铺。

Image.TileVertically- 图片水平拉什，垂直平铺

Image.TileHorizontally- 图片垂直拉什，水平平铺

Image.Pad - 图片不改变。

Stretch (default)

Image {    width: 130; height: 100    source: "qtlogo.png"}

PreserveAspectFit

Image {    width: 130; height: 100    fillMode: Image.PreserveAspectFit    source: "qtlogo.png"}

PreserveAspectCrop

Image {    width: 130; height: 100    fillMode: Image.PreserveAspectCrop    source: "qtlogo.png"    clip: true}

Tile

Image {    width: 120; height: 120    fillMode: Image.Tile    horizontalAlignment: Image.AlignLeft    verticalAlignment: Image.AlignTop    source: "qtlogo.png"}

TileVertically

Image {    width: 120; height: 120    fillMode: Image.TileVertically    verticalAlignment: Image.AlignTop    source: "qtlogo.png"}

TileHorizontally

Image {    width: 120; height: 120    fillMode: Image.TileHorizontally    verticalAlignment: Image.AlignLeft    source: "qtlogo.png"}

注意：clip属性默认为假。这意味着即使fillMode设置成PreserveAspectCrop，item也可能涂出边界。

 

horizontalAlignment: enumeration

设置图片水平和垂直对齐，默认图片中心对齐。

horizontalAlignment的有效值是Image.AlignLeft、Image.AlignRight和Image.AlignHCenter

verticalAlignment的有效值是Image.AlignTop、Image.AlignBottom和Image.AlignVCenter.

 

mipmap :bool

当缩放和转换时，图片是否用mipmap过滤。

Mipmap能在缩放时提高视觉质量，使之更平滑，但有执行开销（初始化图片和渲染时）。默认为假。

 

mirror :bool

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

 

paintedHeight: real

实际涂的图片尺寸。大多数情况下，它和Image的height一样。但当fillMode为PreserveAspectFit或PreserveAspectCrop时，paintedHeight可能比Image的height大或小。

 

paintedWidth: real

实际涂的图片尺寸。大多数情况下，它和Image的width一样。但当fillMode为PreserveAspectFit或PreserveAspectCrop时，paintedWidth可能比Image的width大或小。

 

progress :real

图片加载的过程，值从0.0（未加载）到1.0（加载完成）。

 

smooth :bool

当缩放或转换时，图片是否平滑过滤。平滑过滤提供更好的视觉质量，但在一些硬件上可能更慢。如果图片显示在自然大小，这个属性没有视觉或执行影响。默认为真。

 

source : url

Image能处理所有Qt支持格式的图片和URL方案。URL可以是绝对路径，也可以是相对组件URL的相对路径。

 

sourceSize :QSize

加载后图片实际的宽和高。不像width和height属性，他们缩放图片的绘制。这个属性设置为了保存加载图片的实际像素数目。这样图片不会使用比需要还多的内存。例如，下面的代码确定了不管Image的width和height是多少，内存中的图片都不会比1024x1024像素大。

Rectangle {

    width: ...

    height: ...

 

    Image {

       anchors.fill: parent

       source: "reallyBigImage.jpg"

       sourceSize.width: 1024

       sourceSize.height: 1024

    }

}

如果图片的实际尺寸比sourceSize大，图片将缩小。如果仅仅只有1个维度被设置成大于零，另一个维度将根据图片的宽高比，自动设置值。（fillMode不被这个属性依赖）

如果sourceSize.width和sourceSize.height都被设置，图片将保持宽高比地缩放到匹配的指定尺寸。图片缩放后的尺寸，可经Item::implicitWidth和Item::implicitHeight获得。

如果源本质上是可伸缩的图片（例如SVG），这个属性决定了加载图片的尺寸，而忽视本质尺寸。避免动态的改变这个属性，渲染SVG比渲染图片慢。

如果源是非伸缩的图片（例如JPEG），加载的图片将不会比这个设置指定的大。对一些格式（当前仅仅是JPEG），整个图片永远不会实际被加载到内存。

sourceSize设置成undefined，将被清理成图片的自然尺寸。

注意，动态改变这个属性将促使图片源被重新加载。对于网络加载来说，如果图片没有被缓存到磁盘，它会从网络重新加载图片。

 

status :enumeration

图片加载的状态。它是下面的值之一：

Image.Null -没有图片被设置。

Image.Ready- 图片已经加载。

Image.Loading- 图片当前正在加载。

Image.Error- 加载图片发生错误。

有时候可以用这个属性提供更新或响应状态变化。例如：

我们能触发State变化：

State {name: 'loaded'; when: image.status == Image.Ready }

实现状态变化句柄

Implement anonStatusChanged signal handler:

Image {

    id: image

    onStatusChanged: if (image.status ==Image.Ready) console.log('Loaded')

}

绑定状态值：

Text { text:image.status == Image.Ready ? 'Loaded' : 'Not loaded' }

 

verticalAlignment: enumeration

设置图片水平和垂直对齐，默认图片中心对齐。

horizontalAlignment的有效值是Image.AlignLeft、Image.AlignRight和Image.AlignHCenter

verticalAlignment的有效值是Image.AlignTop、Image.AlignBottom和Image.AlignVCenter.