Image QML Type

Displays an image. 更多...

导入语句: import QtQuick .
Since: Qt Quick Ultralite 1.0
继承:

Item

继承者:

ColorizedImage

特性

详细描述

The Image type displays an image.

The source of the image is specified as a resource URI using the source property. Images resources are made available through the qulrcc resource compiler. By default, images are decompressed before being embedded into the binary and thus any of the standard image formats supported by Qt, including bitmap formats such as PNG and JPEG, and vector graphics formats such as SVG are supported. The following table lists all the supported formats:

格式 描述
BMP Windows 位图
DDS Direct Draw Surface
GIF Graphic Interchange Format (图形互换格式) 可选
ICNS Apple 图标图像
JP2 联合摄影专家组 2000
JPG Joint Photographic Experts Group (联合摄影专家组)
JPEG Joint Photographic Experts Group (联合摄影专家组)
MNG 多图像网络图形
PNG Portable Network Graphics (便携式网络图形)
PBM Portable Bitmap (便携式位图)
PGM Portable Graymap (便携式灰度图)
PPM Portable Pixmap (便携式像素图)
SVG Scalable Vector Graphicsd
TGA Truevision 图形适配器
TIFF 标签化图像文件格式
WBMP 无线位图
WEBP WebP
XBM X11 Bitmap (X11 位图)
XPM X11 Pixmap (X11 像素图)

注意: Animated images are not supported.

width and height properties are not specified, the Image automatically uses the size of the loaded image. By default, specifying the width and height of the item causes the image to be scaled to that size. This behavior can be changed by setting the fillMode property, allowing the image to be stretched and tiled instead.

另请参阅 dealing with image resources .

用法范例

The following example shows the simplest usage of the Image type.

import QtQuick 2.15
Image {
    source: "qrc:/pics/qtlogo.png"
}
						


另请参阅 BorderImage , ColorizedImage , qulrcc , QUL_COMPRESSION , QUL_COPY_TO_RAM , QUL_OPTIMIZE_FOR_SCALE , QUL_OPTIMIZE_FOR_ROTATION , Dealing with image resources , Image optimizations , 管理资源和资产 ,和 图像缓存 .

特性文档编制

horizontalAlignment : enumeration

verticalAlignment : enumeration

Sets the horizontal and vertical alignment of the image. By default, the image is center aligned.

The valid values for horizontalAlignment are Image.AlignLeft , Image.AlignRight and Image.AlignHCenter . The valid values for verticalAlignment are Image.AlignTop , Image.AlignBottom and Image.AlignVCenter .


fillMode : enumeration

Set this property to define what happens when the source image has a different size than the item.

  • Image.Stretch - the image is scaled to fit
  • Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping
  • Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary
  • Image.Tile - the image is duplicated horizontally and vertically
  • Image.TileVertically - the image is stretched horizontally and tiled vertically
  • Image.TileHorizontally - the image is stretched vertically and tiled horizontally
  • Image.Pad - the image is not transformed

Stretch (default)
Image {
    width: 130; height: 100
    source: "qrc:/qtlogo.png"
}
											

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

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

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

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

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

注意, clip is false by default which means that the item might paint outside its bounding rectangle even if the fillMode is set to PreserveAspectCrop .

Set QUL_OPTIMIZE_FOR_SCALE on images that are scaled to enable build-time optimizations for the resource.


rotation : real

This property holds the rotation of the item in degrees clockwise around its transformOrigin .

The default value is 0 degrees (that is, no rotation).

Rectangle {
    color: "blue"
    width: 100; height: 100
    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        rotation: 30
    }
}
											

注意: This property is only generated when it has a binding. See Conditional availability of the scale, rotation, and transformOrigin properties .

This property was introduced in Qt Quick Ultralite 1.3.

另请参阅 Transform and Rotation .


scale : real

This property holds the scale factor for this item.

A scale of less than 1.0 renders the item smaller, whereas a scale greater than 1.0 renders the item larger. A negative scale causes the item to be mirrored when rendered.

默认值为 1.0。

Scaling is applied from the transformOrigin .

import QtQuick 2.15
Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "green"
        width: 25; height: 25
    }
    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        scale: 1.4
        transformOrigin: Item.TopLeft
    }
}
											

注意: This property is only generated when it has a binding. See Conditional availability of the scale, rotation, and transformOrigin properties .

This property was introduced in Qt Quick Ultralite 1.3.

另请参阅 Transform and Scale .


source : image

As the url QML basic type is not supported, there exists an another basic type called image which is the type of the 图像 object's source 特性。

Image accepts an absolute resource URI, for example "qrc:/images/map.png". The resource must have been compiled with qulrcc to be available.

If a string that is not known at compile-time will be set as a source Qt Quick Ultralite will perform run-time lookup to find the resource handle for the given string.

For example the following code results in runtime lookup:

Image {
    source: "qrc:/" + "foo.png"
}
								

A failed lookup resets the source property to an empty state in which nothing is rendered.

注意: Qt Quick Ultralite does not support dynamic resources. Every resource must be registered using the Qt Quick Ultralite resource system .

另请参阅 管理资源和资产 and Dealing with image resources .


transform : list < Transform >

This property holds the list of transformations to apply.

更多信息见 Transform .


transformOrigin : enumeration

This property holds the origin point around which scale and rotation transform.

Nine transform origins are available, as shown in the image below. The default transform origin is Item.Center .

This example rotates an image around its bottom-right corner.

Image {
    source: "myimage.png"
    transformOrigin: Item.BottomRight
    rotation: 45
}
								

To set an arbitrary transform origin point use the Scale or Rotation transform types with transform .

注意: This property is only generated when it has a binding. See Conditional availability of the scale, rotation, and transformOrigin properties .

This property was introduced in Qt Quick Ultralite 1.3.