Стиль CircularGauge

Компонент Стрелка

Компонент стрелка вращается вокруг шкалы для отображения текущего значения.

Начиная со стандартного стиля, добавим простую белую стрелку:

needle: Rectangle {
    y: outerRadius * 0.15
    implicitWidth: outerRadius * 0.03
    implicitHeight: outerRadius * 0.9
    antialiasing: true
    color: "#e5e5e5"
}

Как указано в документации для CircularGaugeStyle, необходимо установить свойства implicitWidth и implicitHeight. Это необходимо для правильного позиционирования стрелки. Мы всегда масштабируем элементы с помощью свойства outerRadius стиля, обеспечивая плавное изменение размеров управления.

Мы смещаем стрелку вертикально, чтобы её задняя часть находилась за пределами ручки.

Компонент Передний план

Мы изменили стрелку, но стандартная ручка осталась; давайте заменим её. Компонент передний план определяет стандартную ручку, поэтому мы можем указать свою собственную, переопределяя её (обратите внимание, что мы также можем установить её в null , если не хотим переднего плана):

foreground: Item {
    Rectangle {
        width: outerRadius * 0.2
        height: width
        radius: width / 2
        color: "#e5e5e5"
        anchors.centerIn: parent
    }
}

Во-первых, мы создаём круг из элемента Rectangle, установив радиус, равный половине ширины (здесь подойдёт либо ширина, либо высота; в этом случае они всегда равны). Мы делаем его дочерним элементом Item, потому что передний план заполняет шкалу. Затем центрируем его внутри Item.

Мы устанавливаем цвет ручки в тот же белый, что и раньше.

Компонент Метки делений

Предположим, мы хотим предупредить пользователя, если значение, отображаемое шкалой, выходит за определённый диапазон. Мы можем представить этот диапазон пользователю несколькими способами:

1. Изменить цвет делений в зависимости от styleData.value
2. Добавить изображение в фон
3. Нарисовать его с помощью Canvas

Мы выберем варианты 1 и 3, так как они более гибкие, чем использование изображения.

Сначала изменим цвет трёх самых высоких меток делений:

tickmarkLabel:  Text {
    font.pixelSize: Math.max(6, outerRadius * 0.1)
    text: styleData.value
    color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
    antialiasing: true
}

Также изменим цвет остальных меток на тот же белый, что мы использовали для стрелки и ручки.

Компонент Деление

Теперь сделаем то же самое для трёх самых высоких делений:

tickmark: Rectangle {
    visible: styleData.value < 80 || styleData.value % 10 == 0
    implicitWidth: outerRadius * 0.02
    antialiasing: true
    implicitHeight: outerRadius * 0.06
    color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
}

Компонент Мелких Делений

Для мелких делений, отобразим только те, которые не выше 80:

minorTickmark: Rectangle {
    visible: styleData.value < 80
    implicitWidth: outerRadius * 0.01
    antialiasing: true
    implicitHeight: outerRadius * 0.03
    color: "#e5e5e5"
}

Это потому, что мы нарисуем что-то между этим диапазоном в следующем разделе.

Компонент Фон

Мы отобразим диапазон, указывающий на осторожность, оранжевой дугой:

function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

background: Canvas {
    onPaint: {
        var ctx = getContext("2d");
        ctx.reset();

        ctx.beginPath();
        ctx.strokeStyle = "#e34c22";
        ctx.lineWidth = outerRadius * 0.02;

        ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
            degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
        ctx.stroke();
    }
}

Мы определим функцию для преобразования градусов в радианы, которые используются в Canvas.

Далее, выполним отрисовку диапазона с помощью Canvas. Нарисуем дугу между 80 и 100, используя функцию valueToAngle(), предоставляемую CircularGaugeStyle. Обратите внимание, что мы вычитаем 90 градусов перед преобразованием в радианы, так как наш источник — север, а у Canvas — восток.

Готовый продукт:

Полный код для этого примера:

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0

Rectangle {
    width: 300
    height: 300
    color: "#494d53"

    CircularGauge {
        id: gauge
        anchors.centerIn: parent
        style: CircularGaugeStyle {
            id: style

            function degreesToRadians(degrees) {
                return degrees * (Math.PI / 180);
            }

            background: Canvas {
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    ctx.beginPath();
                    ctx.strokeStyle = "#e34c22";
                    ctx.lineWidth = outerRadius * 0.02;

                    ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2,
                        degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90));
                    ctx.stroke();
                }
            }

            tickmark: Rectangle {
                visible: styleData.value < 80 || styleData.value % 10 == 0
                implicitWidth: outerRadius * 0.02
                antialiasing: true
                implicitHeight: outerRadius * 0.06
                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
            }

            minorTickmark: Rectangle {
                visible: styleData.value < 80
                implicitWidth: outerRadius * 0.01
                antialiasing: true
                implicitHeight: outerRadius * 0.03
                color: "#e5e5e5"
            }

            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.1)
                text: styleData.value
                color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
                antialiasing: true
            }

            needle: Rectangle {
                y: outerRadius * 0.15
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.9
                antialiasing: true
                color: "#e5e5e5"
            }

            foreground: Item {
                Rectangle {
                    width: outerRadius * 0.2
                    height: width
                    radius: width / 2
                    color: "#e5e5e5"
                    anchors.centerIn: parent
                }
            }
        }
    }
}