Как сделать масштабируемый датчик с QML - проблема размера текста

Question

Я пытаюсь сделать измеритель изменяемого размера (аудио-фейдер, как на картинке ниже) с помощью Gauge / GaugeStyle.

Галочки должны быть слева и справа от фейдера.

Почему-то я не могу найти способ корректно изменить размер точки / пикселя меток галочки.

Я уже несколько дней оборачиваюсь этим, но, скорее всего, из-за недостатка опыта и / или ноу-хау в QML, я не могу заставить это работать. Программа начинается с окна «среднего размера», и я хочу изменить его размер больше и меньше до минимальной / максимальной высоты / ширины.

Я почти уверен, что есть лучшие решения, которые могут работать из коробки, чем мои, но я не смог найти что-то подходящее.

Всякий раз, когда я изменяю размер окна до его максимальной высоты, метки отметок (слегка) выходят из своего вертикального центрального положения.

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

Или было бы лучше / проще просто использовать готовое изображение, размер которого будет изменен правильно? Я не думаю, что это повлияет на производительность, поскольку размер окна не будет изменяться очень часто во время работы программы.

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

Я использую Qt 5.12.3 с Qt Creator 4.9.1 на macOS 10.12.6

Вот мой код:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Extras 1.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4

Window
{
    id              : myMainWindow
    visible         : true
    width           : 400
    height          : 400
    minimumHeight   : 300
    minimumWidth    : 300
    maximumHeight   : 800
    maximumWidth    : 800
    title: qsTr("Gauge Test")

    Gauge
    {
        id: myGauge
        height : parent.height
        scale: 0.9
        width: parent.width / 3
        anchors.verticalCenter: parent.verticalCenter    

        minimumValue: -20
        maximumValue: 70
        minorTickmarkCount: 0
        value: 0

        font.family: "Tahoma"

        style: GaugeStyle
        {
            id: myGaugeStyle

            valueBar : Item { visible : false}

            tickmark : Item
            {
                id: myTickmarks
                implicitHeight: Math.max(myMainWindow.height/ 200,1)
                width : myGauge.width / 5

                Rectangle
                {
                    id:leftDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left: myTickmarks.left
                    anchors.leftMargin: myGauge.width / 5
                    color: "blue"
                }

                Rectangle
                {
                    id:noDash
                    anchors.left : leftDash.right
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    color: "transparent"
                }

                Rectangle
                {
                    id:rightDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left : noDash.right
                    color: "blue"
                }
            }

            // Does not work as expected
            /*
            tickmarkLabel: Text
            {
                id: myTickmarkLabel
                text: styleData.value
                font.pointSize : Math.max(
                    Math.sqrt(myMainWindow.width * myMainWindow.height * 0.8 ) / 26
                    ,6)
                // verticalAlignment : Text.AlignVCenter
                color: "blue"
                anchors.left: parent.left
                anchors.leftMargin: font.pointSize
                // anchors.rightMargin : font.pointSize
                // anchors.topMargin : font.pointSize
                // anchors.bottomMargin : font.pointSize
            }
            */

            // Works pretty well : 
            tickmarkLabel: Text
            {
               id: myTickmarkLabel
               text: styleData.value

               transform: Scale 
               {
                  xScale: 3 * myMainWindow.width / myMainWindow.maximumWidth
                  yScale: 3 * myMainWindow.height / myMainWindow.maximumHeight 
               }

               color: "blue"
               anchors.left: parent.left
               anchors.leftMargin: myMainWindow.width / myMainWindow.maximumWidth
            }
        }
    }

    Rectangle
    {
        id: middleRect
        height: parent.height
        width : parent.width / 3
        anchors.left: myGauge.right
        color : "steelblue"
    }

    Rectangle
    {
        id: rightRect
        height: parent.height
        width : parent.width / 3
        anchors.left: middleRect.right
        color : "grey"
    }
}

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

Вот изображение того, как должен выглядеть фейдер: