Элемент Image предназначен для вывода изображений. Для управления выводом этот элемент предоставляет ряд свойств. Рассмотрим основные из них:
asynchronous: указывает, что изображения в локальной файловой системе должны загружаться асинхронно в отдельном потоке. Значение по умолчанию —
false
, что приводит к блокировке потока пользовательского интерфейса во время загрузки изображения. Установка значения true
позволяет построить
отзывчивый пользовательский интерфейс, однако изображение в связи с загрузкой отображается не сразу.
cache: указывает, следует ли кэшировать изображение. Значение по умолчанию true
. Установка значения false
полезна при работе
с большими изображениями, чтобы гарантировать, что они не кэшируются за счет небольших изображений.
fillMode: определяет поведение элемента, если размер исходного изображения отличается от размера элемента
horizontalAlignment: выравнивание по горизонтали. Может принимать значения:
Image.AlignLeft
Image.AlignRight
Image.AlignHCenter
verticalAlignment: выравнивание по вертикали. Может принимать значения:
Image.AlignTop
Image.AlignBottom
Image.AlignVCenter
mirror: определяет, должно ли изображение быть зеркально отражено по горизонтали. Значение по умолчанию false
.
mirrorVertically: определяет, должно ли изображение быть зеркально отражено по вертикали. Значение по умолчанию false
.
paintedHeight: хранит фактическую высоту изображения
paintedWidth: хранит фактическую ширину изображения
progress: хранит прогресс загрзуки изображения - от 0.0 (изображение не загружено) до 1.0 (загрузка завершена)
smooth: устанавливает плавность изображения при рендеринге, которая позволяет улучшить визуальное качество, но уменьшает производительность. Значение по умолчанию
true
source: адрес изображения
sourceClipRect: устанавливает отображаемую область изображения
sourceSize: представляет объект size, через который с помощью свойств width и height можно масштабировать изображение. Это свойство устанавливает максимальное количество пикселей, сохраняемых для загруженного изображения, чтобы большие изображения не использовали больше памяти, чем необходимо.
Если фактический размер изображения больше, чем sourceSize, изображение уменьшается. Если только одно измерение размера установлено больше 0,
другое измерение устанавливается пропорционально, чтобы сохранить соотношение сторон исходного изображения. (FillMode не зависит от этого.)
Если установлены оба параметра sourceSize.width
и sourceSize.height
, изображение уменьшается до указанного размера, сохраняя соотношение сторон изображения.
status: статус изображения. Может принимать следующие значения
Image.Null
: Изображение не установлено
Image.Ready
: Изображение загружено.
Image.Loading
: Изображение в данный момент загружается.
Image.Error
: Произошла ошибка при загрузке изображения.
Ключевое свойство - source, которое определяет адрес изображения. Однако добавление файла изображения и его связь с элементом Image - не самый интуитивный процесс, поэтому рассмотрим его поэтапно. Прежде всего возьмем файл изображения и добавим его проект. Для этого можно перейти в стандартный интерфейс проводника текущей файловой системы и через него скопировать в проект нужный нам файл. Либо можно все сделать из Qt Creator. Рассмотрим второй вариант. Для этого в Qt Creator перейдем в режим файловой системы проекта:
Определим для изображений отдельный каталог. Для этого в открывшемся представлении проекта нажмем правой кнопкой мыши на свободное пространство и во всплывающем контекстном меню выберем New Folder (Добавить папку)
Допустим, новая папка будет называться images. Через проводник текущей операционной системы добавим в новую папку файл изображения. Например, в моем случае это будет файл "forest.png":
Переключимся обратно на вид проекта (опция Projects), нажмем на название проекта правой кнопкой мыши и в контекстном меню выберем пункт Add Existing Directory...:
На открывшемся окне выберем ранее добавленную папку images с добавленным в нее изображением
После этого в проект будет связан с ресурсами-изображениями из папки images
А в файле CMakeLists.txt появится запись о наличии ресурсов в проекте
# Добавляем файлы qml qt_add_qml_module(QmlApp URI path VERSION 1.0 QML_FILES main.qml RESOURCES images/forest.png # доступный ресурс )
Мы можем вручную добавить в проект нужные папки и файлы и затем подредактировать файл CMakeLists.txt, чтобы проект воспринимал их как ресурсы.
Для отображения этого изображения в файле main.qml определим следующий интерфейс:
import QtQuick Window { width: 250 height: 180 visible: true title: "METANIT.COM" Image { anchors.fill: parent source: "images/forest.png" } }
Здесь определен один элемент Image, который растянут по всему пространству окна, а его свойство source
указывает на ресурс "images/forest.png".
И при запуске приложения отобразится указанный ресурс изображения:
Причем в элементе Image могут располагаться и другие элементы, которые накладываются на изображение. Например, элемент Text:
import QtQuick Window { width: 250 height: 200 visible: true title: "METANIT.COM" Image{ anchors.fill: parent source: "images/forest.png" Text { text: "Зимний лес" width: parent.width horizontalAlignment: Text.AlignHCenter font.pixelSize: 16 } } }
Свойство fillMode определяет поведение элемента, если размер исходного изображения отличается от размера элемента. Может принимать следующие значения:
Image.Stretch
: изображение масштабируется по размеру
Image.PreserveAspectFit
: изображение масштабируется равномерно, чтобы соответствовать размеру, без обрезки.
Image.PreserveAspectCrop
: изображение масштабируется равномерно для заполнения, при необходимости обрезается.
Image.Tile
: изображение дублируется по горизонтали и вертикали.
Image.TileVertically
: изображение растягивается по горизонтали и дублируется по вертикали.
Image.TileHorizontally
: изображение растягивается по вертикали и дублируется по горизонтали.
Image.Pad
: изображение не изменяется
Пример применения:
import QtQuick Window { width: 250 height: 450 visible: true title: "METANIT.COM" Column{ anchors.fill: parent spacing: 5 padding: 5 Row { Image { width:80 height: 60 fillMode: Image.Pad source: "images/cpp.png" } Text { text: "Image.Pad" } } Row { Image { width:80 height: 60 fillMode: Image.Stretch source: "images/cpp.png" } Text { text: "Image.Stretch" } } Row { Image { width:80 height: 60 fillMode: Image.PreserveAspectFit source: "images/cpp.png" } Text { text: "Image.PreserveAspectFit" } } Row { Image { width:80 height: 60 fillMode: Image.PreserveAspectCrop source: "images/cpp.png" } Text { text: "Image.PreserveAspectCrop" } } Row { Image { width:80 height: 60 fillMode: Image.Tile horizontalAlignment: Image.AlignLeft verticalAlignment: Image.AlignTop source: "images/cpp.png" } Text { text: "Image.Tile" } } Row { Image { width:80 height: 60 fillMode: Image.TileVertically verticalAlignment: Image.AlignTop source: "images/cpp.png" } Text { text: "Image.TileVertically" } } Row { Image { width:80 height: 60 fillMode: Image.TileHorizontally horizontalAlignment: Image.AlignLeft source: "images/cpp.png" } Text { text: "Image.TileHorizontally" } } } }
Стоит отметить, что для опций Image.Tile
/Image.TileVertically
/Image.TileHorizontally
может потребоваться настроить выравнивание.
Свойства mirror
и mirrorVertically
позволяют отразить изображение по горизонтали и вертикали соответственно:
import QtQuick Window { width: 250 height: 450 visible: true title: "METANIT.COM" Column{ anchors.fill: parent spacing: 5 padding: 5 Image { width: 80 height: 80 source: "images/cpp.png" } Image { width: 80 height: 80 mirror:true source: "images/cpp.png" } Image { width: 80 height: 80 mirrorVertically:true source: "images/cpp.png" } } }
Здесь первое изображение без какого-либо отражения. Ко второму изображению применяется зеркальное отражение по горизонтали, а к третьему - отражение по вертикали: