C

图像QML类型

显示图像。更多...

导入语句import QtQuick
自Qt Quick Ultralite 1.0
继承

Item

由以下类继承

ColorizedImage

属性

详细描述

Image类型用于显示图像。

图像的来源通过source属性指定为资源URI。图像资源通过qulrcc工具资源编译器提供。默认情况下，图像在嵌入到二进制文件之前会进行解压缩，因此支持Qt支持的所有标准图像格式，包括位图格式，如PNG和JPEG，以及矢量图形格式，如SVG。以下表格列出了所有支持的格式

格式描述
BMPWindows位图
DDSDirect Draw Surface
GIF图形交换格式 (可选)
ICNSApple图标图像
JP2联合摄影专家组2000
JPG联合摄影专家组
JPEG联合摄影专家组
MNG多图像网络图形
PNG可移植网络图形
PBM可移植位图
PGM可移植灰度图
PPM可移植位图
SVG可缩放矢量图形
TGATruevision图形适配器
TIFF标记图像文件格式
WBMP无线位图
WEBPWebP
XBMX11位图
XPMX11位图

注意：不支持动画图像。

如果未指定 宽度 和 高度 属性，图片将自动使用加载的图片大小。默认情况下，指定项目的宽度和高度会导致图片缩放到该大小。可以通过设置 fillMode 属性来改变此行为，允许图片拉伸和平铺。

另请参阅 处理图片资源。

文本 项目支持 HTML <img> 标签将图片作为文本布局的一部分进行渲染。详情请见 QtQuick::Text::textFormat。

示例用法

以下示例展示了图片类型的简单用法。

import QtQuick 2.15

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


另请参阅BorderImage、ColorizedImage、qulrcc 工具、ImageFiles.MCU.resourceCompression、ImageFiles.MCU.resourceCachePolicy、ImageFiles.MCU.resourceOptimizeForRotation、ImageFiles.MCU.resourceOptimizeForScale、处理图片资源、图片优化、资源管理和图片缓存。

属性文档

horizontalAlignment : 枚举

verticalAlignment : 枚举

设置图片的水平和垂直对齐方式。默认情况下，图片居中对齐。

有效的 horizontalAlignment 值为 Image.AlignLeft、Image.AlignRight 和 Image.AlignHCenter。有效的 verticalAlignment 值为 Image.AlignTop、Image.AlignBottom 和 Image.AlignVCenter。


fillMode : 枚举

将此属性设置为定义当源图片大小与项目不同时会发生什么。

  • Image.Stretch - 图片缩放以适应
  • Image.PreserveAspectFit - 图片均匀缩放以适应而不裁剪
  • Image.PreserveAspectCrop - 图片均匀缩放以填充，必要时裁剪
  • Image.Tile - 图片在水平和垂直方向上重复
  • Image.TileVertically - 水平拉伸并垂直平铺图片
  • Image.TileHorizontally - 垂直拉伸并水平平铺图片
  • Image.Pad - 图片不进行变换

拉伸（默认）
Image {
    width: 130; height: 100
    source: "qrc:/qtlogo.png"
}

保持纵横比适应
Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectFit
    source: "qrc:/qtlogo.png"
}

保持纵横比裁剪
Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectCrop
    source: "qrc:/qtlogo.png"
    clip: true
}

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

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

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

请注意，默认情况下 clip 为 false，这意味着即使 fillMode 设置为 PreserveAspectCrop，项目也可能绘画在其边界矩形之外。

对缩放的图片设置 ImageFiles.MCU.resourceOptimizeForScale 以启用对该资源的构建时优化。


[自 Qt Quick Ultralite 1.3 开始] rotation : 实数

此属性表示项目围绕其 transformOrigin 顺时针旋转的度数。

默认值为 0 度（即未旋转）。

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

注意：将 ImageFiles.MCU.Experimental.resourceSplitImageOptimization 设置为 false 以避免渲染伪影（例如，当创建旋转动画时）。

该属性自Qt Quick Ultralite 1.3版本开始引入。

另请参阅变换和旋转。


[自Qt Quick Ultralite 1.3]scale : 实数

此属性持有该项的缩放因子。

小于1.0的缩放会产生较小的渲染效果，大于1.0会产生较大的渲染效果。负值缩放会导致在渲染时镜像该项。

默认值为1.0。

缩放是从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
    }
}

注意将ImageFiles.MCU.Experimental.resourceSplitImageOptimization设置为false，以避免在应用非整数值缩放因子时（例如创建缩放动画时）出现渲染伪影。

该属性自Qt Quick Ultralite 1.3版本开始引入。

另请参阅变换和缩放。


source : image

由于QML基本类型url不受支持，存在另一种基本类型image，它是Image对象source属性的.type类型。

图像接受绝对资源URI，例如 "qrc:/images/map.png"。资源必须通过qulrcc工具编译才能可用。

如果设置的字符串在编译时已知，Qt Quick Ultralite将执行运行时查找，以查找给定字符串的资源句柄。

例如，以下代码会导致运行时查找

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

查找失败会将source属性重置为空状态，此时不进行渲染。

注意Qt Quick Ultralite不支持动态资源。每个资源都必须使用Qt Quick Ultralite资源系统进行注册。

另请参阅管理资源和处理图像资源。


transform : list<变换>

此属性持有要应用变换列表。

更多信息请参阅变换。


[自Qt Quick Ultralite 1.3]transformOrigin : 枚举

此属性持有围绕scale和rotation变换的原点。

有九个变换原点可供选择，如下所示。默认变换原点是Item.Center。

以下示例演示了围绕图像的右下角旋转图像。

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

要设置任意的变换原点，请使用Scale或Rotation变换类型与transform一起使用。

该属性自Qt Quick Ultralite 1.3版本开始引入。


在某些Qt许可证下可用。
了解更多信息。