qml滑动色块 - 技术栈

cpp 复制代码

    ColorSlider{id:slider; y:20}

    Rectangle{x:slider.width+10;
        width:60;height:width;radius:3
        color:slider.colorValue; border{width:2;color:Qt.darker(color)}
        Text {anchors.centerIn: parent; text: slider.colorValue}
    }

cpp 复制代码

import QtQuick 2.15
import QtQuick.Controls 2.15


Slider {
    id: slider; width: 400; height: _height
    from: 0.0; to:1.0; value:0.5; padding:0

    property int _height:30
    property color colorValue: Qt.hsla(slider.value, 1.0, 0.5, 1.0)

    handle: Rectangle {
        x: slider.visualPosition * (slider.availableWidth - width)
        y: (slider.availableHeight - height) >> 1
        implicitWidth: _height
        implicitHeight: _height
        radius: _height >> 1
        color: "transparent"
        border{width:3;color: "white"}
    }

    // 背景使用Shader实现彩虹渐变
    background: ShaderEffect {
        width:slider.width; height: _height
        x: 0; y: (slider.availableHeight - height) >> 1
        implicitWidth: slider.width
        implicitHeight: _height

        // 传递圆角参数到着色器
        property real radius: _height >> 1
        property real widthFactor: width
        property real heightFactor: height

        // 顶点着色器传递坐标
        vertexShader: "
            uniform highp mat4 qt_Matrix;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 qt_TexCoord0;
            void main() {
                gl_Position = qt_Matrix * qt_Vertex;
                qt_TexCoord0 = qt_MultiTexCoord0;
            }
        "

        fragmentShader: "
            uniform lowp float qt_Opacity;
            uniform highp float radius;
            uniform highp float widthFactor;
            uniform highp float heightFactor;
            varying highp vec2 qt_TexCoord0;

            vec3 hsv2rgb(vec3 c) {
                vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
                vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
                return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
            }

            // 圆角距离计算
            float roundedBoxSDF(vec2 center, vec2 size, float radius) {
                vec2 q = abs(center) - size + radius;
                return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
            }

            void main() {
                // 坐标转换到像素空间
                vec2 pos = qt_TexCoord0 * vec2(widthFactor, heightFactor);
                vec2 center = vec2(widthFactor/2.0, heightFactor/2.0);

                // 计算到圆角矩形的距离
                float d = roundedBoxSDF(pos - center, center, radius);

                // 彩虹色计算
                vec3 hsv = vec3(qt_TexCoord0.x, 1.0, 1.0);
                vec3 rgb = hsv2rgb(hsv);

                // 圆角裁剪：距离>0表示在圆角外，设为透明
                float alpha = d > 0.0 ? 0.0 : 1.0;

                gl_FragColor = vec4(rgb, alpha) * qt_Opacity;
            }
        "
    }
}