Реализация слайдера в QML с изображением в виде VU-метра в качестве фона

Question

Я пытаюсь создать слайдер, который можно перемещать вверх и вниз с помощью мыши. Однако я хочу использовать собственное изображение в качестве фона. В настоящее время я пытаюсь реализовать это с помощью OpacityMask. По сути, я пытаюсь сделать непрозрачность 0 от того места, где ручка находится на правом конце ползунка.

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

Как я могу создать это поведение?

import QtQuick 2.7
import QtQuick.Templates 2.0 as T
import QtGraphicalEffects 1.12
import "."

T.Slider {
    id: control

    implicitWidth: 200
    implicitHeight: 26

    handle: Rectangle {
        x: control.visualPosition * (control.width - width)
        y: (control.height - height) / 2
        width: 20
        height: 15

        radius: 5
        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
        border.color: "gray"
    }

    background: OpacityMask {
        anchors.fill: sliderImage
        source: sliderImage
        maskSource: mask
    }

    Image{
        id: sliderImage
        source: "./Jarvis2/images/volume_barH.png"
        height: 20
        width: parent.width
        visible: false
    }

    Item{
        id: mask
        anchors.fill: sliderImage

        Rectangle{
            id: outer
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            width: control.visualPosition*parent.width
            color: "gray"
            opacity: 1
            visible: false
        }

        Rectangle {
            id: inner
            color: "transparent"
            z: 1
            opacity: 1
            anchors.left: outer.right
            anchors.right: parent.right
            anchors.top: outer.top
            anchors.bottom: outer.bottom
            visible: false
        }
    }

}

Ползунок на 100%:

Ползунок примерно на 70%:

Ползунок на отметке 24%

Answer 1

Я думаю, вы можете опустить OpacityMask и просто использовать отсечение Item:

Slider {
    id: slider
    width: 100
    height: 300
    orientation: Qt.Vertical

    background: Item {
        id: background

        Item {
            clip: true
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: (1 - slider.visualPosition) * slider.height

            Rectangle { //Your image goes here
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: background.height

                gradient: Gradient {
                    GradientStop { position: 0; color: "blue" }
                    GradientStop { position: 1; color: "red" }
                }
            }
        }
    }
}

Возможно, вам придется немного поиграть с высотой отсечения Item, так как есть некоторые прокладка задействована.

---

Если вы все же хотите использовать OpacityMask (потому что вам нужна другая форма), вы должны поместить их вместе в фоновом режиме:

Slider {
    id: slider
    width: 100
    height: 300
    orientation: Qt.Vertical

    background: Item {
        id: background

        Rectangle { //Your image goes here
            id: image
            anchors.fill: parent
            visible: false

            gradient: Gradient {
                GradientStop { position: 0; color: "blue" }
                GradientStop { position: 1; color: "red" }
            }
        }

        OpacityMask {
            anchors.fill: parent
            source: image
            maskSource: mask
        }

        Item {
            id: mask
            visible: false

            anchors.fill: parent

            Rectangle {
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                height: parent.height * slider.position
                color: "white"
            }
        }
    }
}