Тип QML CircularGaugeStyle

Предоставляет пользовательскую стилизацию для CircularGauge. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• angleRange : real
• background : Компонент
• control : CircularGauge
• foreground : Компонент
• labelCount : int
• labelInset : real
• labelStepSize : real
• maximumValueAngle : real
• minimumValueAngle : real
• minorTickmark : Компонент
• minorTickmarkCount : int
• minorTickmarkInset : real
• needle : Компонент
• needleRotation : real
• outerRadius : real
• tickmark : Компонент
• tickmarkCount : int
• tickmarkInset : real
• tickmarkLabel : Компонент
• tickmarkStepSize : real

Методы

• real valueToAngle(real value)

Подробное описание

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

• background
• tickmark
• minorTickmark
• tickmarkLabel
• needle
• foreground

Ниже приведен пример, в котором игла заменяется простым оранжевым прямоугольником:

CircularGauge {
    style: CircularGaugeStyle {
        needle: Rectangle {
            y: outerRadius * 0.15
            implicitWidth: outerRadius * 0.03
            implicitHeight: outerRadius * 0.9
            antialiasing: true
            color: Qt.rgba(0.66, 0.3, 0, 1)
        }
    }
}

Результат:

Направление

minimumValueAngle и maximumValueAngle определяют не только положение шкал, меток и иглы, но и направление их отображения вокруг циферблата. Например, если minimumValueAngle больше maximumValueAngle, циферблат будет отображаться против часовой стрелки. Ниже приведены два циферблата: верхний циферблат имеет minimumValueAngle в -90 градусах и maximumValueAngle в 90 градусах, а нижний циферблат имеет обратное значение.

См. также Стиль CircularGauge.

Документация по свойствам

[только для чтения] angleRange : real

Диапазон между minimumValueAngle и maximumValueAngle в градусах. Это значение всегда будет положительным.

background : Компонент

Фон циферблата.

Если установлено, фон определяет неявный размер циферблата.

По умолчанию фон не определен.

См. также Стиль фона CircularGauge.

[только для чтения] control : CircularGauge

Циферблат CircularGauge, к которому прикреплен этот стиль.

foreground : Компонент

Передний план циферблата. Этот компонент рисуется поверх всех остальных.

Как и background, компонент foreground заполняет весь циферблат.

По умолчанию здесь определена ручка циферблата.

См. также Стиль переднего плана CircularGauge.

[только для чтения] labelCount : int

Количество меток, отображаемых циферблатом, вычисляется из labelStepSize и значений minimumValue и maximumValue элемента управления.

См. также tickmarkCount и minorTickmarkCount.

labelInset : real

Расстояние в пикселях от внешнего края циферблата (outerRadius) до центра текста значения метки.

labelStepSize : real

Интервал отображения меток.

Например, если это свойство установлено в 10 (значение по умолчанию), control.minimumValue равно 0, а control.maximumValue равно 100, то метки, отображаемые на циферблате, будут 0, 10, 20 и т. д., до 100.

maximumValueAngle : real

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

Установленный угол влияет на следующие компоненты циферблата:

• Угол иглы
• Положение шкал и меток

Начало отсчета угла — север:

Для этого свойства нет минимального или максимального значения, но в стандартном стиле поддерживаются углы, абсолютный диапазон которых не превышает 360 градусов. Это связано с тем, что диапазоны, превышающие 360 градусов, приведут к наложению шкал и меток друг на друга.

Значение по умолчанию — 145.

minimumValueAngle : real

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

Установленный угол влияет на следующие компоненты циферблата:

• Угол иглы
• Положение шкал и меток

Начало отсчета угла — север:

Для этого свойства нет минимального или максимального значения, но в стандартном стиле поддерживаются углы, абсолютный диапазон которых не превышает 360 градусов. Это связано с тем, что диапазоны, превышающие 360 градусов, приведут к наложению шкал и меток друг на друга.

Значение по умолчанию — -145.

minorTickmark : Компонент

Этот компонент определяет каждую отдельную малую метку. Положение каждой малой метки уже задано; необходимо указать только implicitWidth и implicitHeight.

Каждый экземпляр этого компонента имеет доступ к следующим свойствам:

См. также Стиль малых меток CircularGauge.

minorTickmarkCount : int

Количество малых меток между каждой меткой.

Значение по умолчанию — 4.

См. такжеtickmarkCount.

minorTickmarkInset : real

Расстояние в пикселях от внешней части циферблата (outerRadius) до внешней точки линии меньшей шкалы.

needle : Component

Стрелка, указывающая на текущее значение циферблата.

Этот компонент отображается ниже компонента foreground.

Стиль ожидает, что стрелка будет направлена вверх при повороте 0, для корректного отображения поворота. Например:

При определении собственного компонента стрелки, единственные свойства, которые должен установить стиль, это implicitWidth и implicitHeight.

Необязательно, вы можете установить x и y для изменения точки начала преобразования стрелки. Установка позиции x может быть полезна для изображений стрелок, где стрелка не центрирована точно по горизонтали. Установка позиции y позволяет расположить основание стрелки за пределами центра циферблата.

См. такжеНастройка стрелки CircularGauge.

needleRotation : real

Это свойство содержит угол поворота стрелки в градусах.

[только для чтения] outerRadius : real

Расстояние от центра циферблата до внешнего края.

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

tickmark : Component

Этот компонент определяет каждую отдельную отметку. Положение каждой отметки уже задано; необходимо только указать implicitWidth и implicitHeight.

Каждый экземпляр этого компонента имеет доступ к следующим свойствам:

Чтобы проиллюстрировать, к чему относятся эти свойства, можно использовать следующий пример:

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

Rectangle {
    width: 400
    height: 400

    CircularGauge {
        id: gauge
        anchors.fill: parent
        style: CircularGaugeStyle {
            labelInset: outerRadius * 0.2

            tickmarkLabel: null

            tickmark: Text {
                text: styleData.value

                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.bottom
                    text: styleData.index
                    color: "blue"
                }
            }

            minorTickmark: Text {
                text: styleData.value
                font.pixelSize: 8

                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.bottom
                    text: styleData.index
                    font.pixelSize: 8
                    color: "blue"
                }
            }
        }

        Text {
            id: indexText
            text: "Major and minor indices"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: valueText.top
            color: "blue"
        }
        Text {
            id: valueText
            text: "Major and minor values"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
        }
    }
}

Мы заменили стандартные отметки линиями на элементы Text и скрыли компонент tickmarkLabel, чтобы сделать связь более ясной:

Свойство index может быть полезно, если у вас есть другая модель, содержащая изображения для отображения каждого индекса.

Свойство value полезно для рисования нижних и верхних пределов вокруг циферблата, чтобы указать рекомендуемые диапазоны значений. Например, скорости выше 200 километров в час на спидометре автомобиля могут быть обозначены как опасные с использованием этого свойства.

См. такжеНастройка отметки CircularGauge.

[только для чтения] tickmarkCount : int

Количество отметок, отображаемых циферблатом, вычисляется из tickmarkStepSize и свойств minimumValue и maximumValue контрола.

См. такжеminorTickmarkCount.

tickmarkInset : real

Расстояние в пикселях от внешнего края циферблата (outerRadius) до внешней точки линии отметки.

tickmarkLabel : Component

Определяет текст каждой метки на циферблате.

Каждый экземпляр этого компонента имеет доступ к следующим свойствам:

См. такжеНастройка метки отметки CircularGauge.

tickmarkStepSize : real

Интервал, через который отображаются отметки.

Например, если это свойство установлено в 10 (по умолчанию), control.minimumValue в 0, и control.maximumValue в 100, отображаемые отметки будут 0, 10, 20 и т.д. до 100 вокруг циферблата.

Документация по методам

real valueToAngle(real value)

Возвращает value в виде угла в градусах.

Эта функция полезна для пользовательского рисования или позиционирования элементов в компонентах стиля. Например, ее можно использовать для вычисления углов, под которыми следует рисовать дугу вокруг циферблата, указывающую безопасную область для стрелки.

Например, если minimumValueAngle установлено в 270 и maximumValueAngle в 90, эта функция вернет 270 при передаче minimumValue и 90 при передаче maximumValue.

См. такжеНастройка фона CircularGauge.