QML--仿苹果下拉框的音量调节

1.为了实现类似仿苹果的音量调节，原始效果如下：

       但是实际过程中，为了实现四周圆角效果，且拖动过程中满足中间填充效果，拖到过程中满足滑动效果，期间参考网上诸多论坛，效果都不太理想，大部分无非就是效果如下。更多的是非圆弧的显示效果，虽然实现音量开关，但是达不到理想要求

                     

类似苹果的效果很慢完美，多次调试后终于找到解决方案：效果如下：

当然，想实现其他，类似圆形效果也能扩展，不规则图形类型：

加上百分比也容易：

                                                   

更多定制化，或者美化外观相对比较简单，废话不多说，直接上代码：

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12

Item{
    id: root
    property alias bgColor: __.bgColor
    property double processValue: parent.width > parent.height ? bar.value : 1-bar.value
    QtObject{
        id: __
        property var bgColor: "#000" //背景颜色
        property var processColor: "#121212"  //进度条前景
    }
    ProgressBar {
        id:bar
        value: 0
        width: parent.width > parent.height ? parent.width: parent.height
        height: parent.width > parent.height ? parent.height: parent.width
        rotation: parent.width > parent.height ? 0 : -90
        anchors.centerIn: parent

        contentItem: Rectangle {
            id:barBg
            Rectangle{
                anchors.fill: parent
                radius: bar.height/2
                color: __.bgColor
                opacity: 0.6
            }
            radius: bar.height/2
            layer.enabled: true
            layer.effect: OpacityMask{
                maskSource: Rectangle{
                    width: barBg.width
                    height: barBg.height
                    radius: bar.height/2
                }
            }
            Rectangle {
                width: bar.visualPosition * bar.width
                height: bar.height
                color: __.processColor
            }
        }
    }
    /*
    Text {
        id: _text
        text: Math.trunc(root.processValue * 100) + "%"
        anchors.centerIn: parent
        font.pixelSize: 25
        color: 'white'
    }
    */
    MouseArea{
        id: mouse
        anchors.fill: parent
        QtObject{
            id: __p
            property var lastMousePos : undefined
            property bool directHor: true
            property bool valid: false
            readonly property int threshold: 5  //防误碰或点击阈值
            property int test: 0
        }
        // 处理鼠标按下事件
        onPressed: {
            __p.directHor = parent.width > parent.height ? true: false
            __p.lastMousePos = Qt.point(mouse.x, mouse.y)
        }
        // 处理鼠标移动事件
        onPositionChanged: {
            var point  = Qt.point(mouse.x, mouse.y)
            var curPos_ = __p.directHor ? point.x : point.y
            if( !__p.valid ){

                var tmp = __p.directHor ? __p.lastMousePos.x : __p.lastMousePos.y
                if( Math.abs(curPos_ - tmp) > __p.threshold )
                    __p.valid = true
            }
            else{
                if( curPos_ >=0 ){
                    var value = curPos_/(__p.directHor ? root.width : root.height)
                    if( !__p.directHor)
                        bar.value = 1-value
                    else
                        bar.value = value
                }
                else {
                    if( !__p.directHor)
                        bar.value = 1
                    else
                        bar.value = 0
                }
            }
        }
        onReleased: {
            __p.valid = false
        }
    }
}