Стилизация 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
                }
            }
        }
    }
}