Стиль CircularGauge

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

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

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

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