在 QML 中以类似 VU 的图像作为背景实现滑块答案

【问题标题】：Implementing a slider in QML with a VU-meter like image as a background在 QML 中以类似 VU 的图像作为背景实现滑块
【发布时间】：2020-06-19 19:52:36
【问题描述】：

我正在尝试创建一个可以用鼠标上下移动的滑块。但是，我想使用自己的图像作为背景。我目前正在尝试使用 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% 左右

【问题讨论】：

很有趣，您找到了handle 属性，但没有找到background 属性，看来您想要这样，对吧？
是的，我想改变背景
试试background: Image { ... }
我刚刚意识到我没有将 OpacityMask 部分放在代码中，所以我只是添加了那个。我尝试将背景设置为 Image 和 OpacityMask。我看到的只是句柄，但没有背景图片。
你能对你想看到的（以及你现在看到的）做一些视觉解释（用油漆或类似的方式）吗？通常滑块应该是透明的，除了滑块和手柄

标签： qt qml

【解决方案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"
            }
        }
    }
}

【讨论】：