Инструменты пользователя
develop:qt:quick2
Это старая версия документа!
Содержание
Qt Quick: Ввод, Анимация, Преставление, С++
Элементы графики
Растровые изображения
Можно использовать форматы: JPG, PNG и SVG.
Элемент Image
Этот элемент отображает файл изображения, указанный в свойстве source, файл может находится как локально так и в сети.
Есть интерактивный редактор для изменения свойств.
Свойствами можно подвергать изображение трансформациям, типа увеличение/уменьшение (scale), поворот (rotation), сглаживание (smooth).
Пример: Изображение с уменьшением, поворотом и сглаживанием
import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12 ApplicationWindow { width: img.width; height: img.height; visible: true; Rectangle { anchors.fill: parent Image { id: img source: "qrc:/../../../../Downloads/11.jpg" x: 0; y: 0 smooth: true scale: 0.75 rotation: -30 } } }
Для более тонкой настройки трансформации, ее можно задавать списками (в квадратных скобках).
Пример: Аналогично, только трансформацию задаем двумя списками свойству transform
import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12 ApplicationWindow { width: img.width; height: img.height; visible: true; Rectangle { anchors.fill: parent Image { id: img source: "qrc:/../../../../Downloads/11.jpg" x: 0; y: 0 smooth: true transform: [ Scale { origin.x: width / 2 origin.y: width / 2 xScale: 0.75 yScale: 0.75 }, Rotation { origin.x: width / 2 origin.y: width / 2 angle: -30.0 } ] } } }
Добавим элемент загрузки BusyIndicator
Пример: Загрузка и отображение изображения из web
import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12 ApplicationWindow { width: 640; height: 480; visible: true; Rectangle { anchors.fill: parent Image { id: img source: "http://qt-book.com/pic.jpg" anchors.fill: parent smooth: true Column { anchors.centerIn: parent visible: img.status == Image.Loading ? true:false Text { text: "Загрузка..." } BusyIndicator {} } } } }
BorderImage
Элемент для нормального масштабирования графики, особенно полезно при закругленных углах (кнопок и т.д.). Элемент разбивает изображение на девять частей.
Пример: Масштабируемое изображение кнопки, с закругленными углами
import QtQuick 2.12 BorderImage { source: "" width: 100; height: 45 border {left: 30; top: 15; right: 30; bottom: 15} }
Пример:
Пример:
develop/qt/quick2.1629720725.txt.gz · Последнее изменение: 2021/08/23 12:12 — admin
Инструменты страницы
