Это старая версия документа!

Содержание

Qt Quick: Ввод, Анимация, Преставление, С++
- Элементы графики
- Пользовательский ввод
  - Область мыши
  - Сигналы

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}
}

Градиент

В QML есть только один градиент - линейный, если нужен другой, можно воспользоваться трансформацией.
Для создания, нужно свойству gradient присвоить элемент Gradient, он содержит точки останова (GradientStop) с позициями от 0 до 1.

Создание градиентов может потребовать много ресурсов, поэтому эффективнее использовать изображение градиента.

Пример: Градиент с тремя точками останова, трансформирован в диагональ

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
        gradient: Gradient
        {
            GradientStop{position: 0.0; color: "blue"}
            GradientStop{position: 0.7; color: "gold"}
            GradientStop{position: 1.0; color: "silver"}
        }
        rotation: 30
        scale: 1.5
    }
}

Рисование Canvas

Canvas представляет собой элемент холста, на котором можно выполнять растровые операции, по сути аналогичен QPaintDevice.
Сам QML описательный язык, поэтому алгоритмы рисования реализуются с использованием JavaScript, в свойстве обработки onPaint.

Пример: Прикольный узор, нарисованный на холсте

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
 
ApplicationWindow
{
    width: 480; height: 480; visible: true;
    Rectangle
    {
        anchors.fill: parent
        Canvas
        {
            anchors.fill: parent;
            onPaint:
            {
                function drawFantasy()
                {
                    ctx.beginPath();
                    ctx.translate(parent.width / 2, parent.height / 2);
                    var fAngle = 91 * 3.14156 / 180
                    for(var i = 0; i < 300; ++i)
                    {
                        var n = i * 2;
                        ctx.moveTo(0, 0);
                        ctx.lineTo(n, 0);
                        ctx.translate(n, 0);
                        ctx.rotate(fAngle)
                    }
                    ctx.closePath();
                }
 
                var ctx = getContext("2d");
                ctx.clearRect(0, 0, parent.width, parent.height);
                ctx.save();
                ctx.strokeStyle = "black";
                ctx.lineWidth = 1;
                drawFantasy();
                ctx.stroke();
                ctx.restore();
            }
        }
    }
}

Пример: Градиент на холсте

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
 
ApplicationWindow
{
    width: 480; height: 480; visible: true;
    Rectangle
    {
        anchors.fill: parent
 
        Canvas
        {
            id: canv
            width: 320; height: 320;
            onPaint:
            {
                var ctx = getContext("2d");
                ctx.strokeStyle= "blue";
                ctx.lineWidth = 15;
                var gradient = ctx.createLinearGradient(canv.width, canv.height, 0, 0);
                gradient.addColorStop(0, "Indigo");
                gradient.addColorStop(0.5, "Bisque");
                gradient.addColorStop(1, "ForestGreen");
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canv.width, canv.height);
                ctx.strokeRect(0, 0, canv.width, canv.height);
            }
        }
    }
}

Пользовательский ввод

Область мыши

Для получения событий мыши служат специальные элементы - MouseArea, по сути просто прямоугольные области, в которых осуществляется ввод информации от мыши.

Пример: Нажатие левой и правой кнопок мыши

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
 
ApplicationWindow
{
    width: 300; height: 300; visible: true;
    Rectangle
    {
        anchors.fill: parent
        color: "lightgreen"
        Text
        {
            id: txt
            anchors.centerIn: parent
            text: "<h1>This is text<br>Click here</h1>"
            horizontalAlignment: Text.AlignHCenter
        }
        MouseArea
        {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onPressed:
            {
                if(mouse.button == Qt.LeftButton)
                    parent.color= "red"
                else
                    parent.color= "blue"
            }
            onReleased: parent.color= "lightgreen"
        }
    }
}

Так же, можно использовать свойство containsMouse, для обнаружения находится ли курсор над областью.
Аналогично можно использовать свойства onEntered и onExit.

Пример: Обнаружение находится ли курсор над областью

import QtQuick 2.12; import QtQuick.Controls 2.2
 
ApplicationWindow
{
    width: 300; height: 300; visible: true;
    Rectangle
    {
        anchors.fill: parent
        color: mousearea.containsMouse ? "red" : "lightgreen"
        Text
        {
            anchors.centerIn: parent
            text: "<h1>Hover me</h1>"
        }
        MouseArea
        {
            id: mousearea
            anchors.fill: parent
            hoverEnabled: true
        }
    }
}

Сигналы

Пример:

zxcx

Инструменты пользователя

Инструменты сайта