Стиль CircularGauge

Компонент стрелки

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

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

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

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

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

Компонент переднего плана

Мы изменили стрелку, но по-умолчанию осталась ручка; давайте её заменим. Компонент foreground определяет базовую ручку, поэтому мы можем указать свою собственную, переопределив её (можно также установить значение 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
                }
            }
        }
    }
}