QML使用ShaderEffect绘制环形进度条

谁借莪１个温暖的怀抱￠ 2023-03-13 06:24 7阅读 0赞

# 0.前言 #

之前用 Qt Widgets 的 QOpenGLWidget 类配合着色器写了下环形进度条（[https://blog.csdn.net/gongjianbo1992/article/details/106043023][https_blog.csdn.net_gongjianbo1992_article_details_106043023]），现在用 QML 的 ShaderEffect 重新写下，用的 Qt 默认的 OpenGL 版本，貌似是 OpenGL ES2.0 。

ShaderEffect 是 QML 中用来对 Item 做着色器效果的组件，允许直接在 QML 中编写诸如阴影，模糊，着色和页面卷曲之类的效果。传递参数时，只需要将 ShaderEffect 的 property 声明在 shader 中，该组件也预定了一些属性，详情参考文档：[https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html][https_doc.qt.io_qt-5_qml-qtquick-shadereffect.html]

（也可以参照 QML Book 进行使用 [http://qmlbook.github.io/][http_qmlbook.github.io] ）

# 1.实现思路 #

1.1 圆环我是通过计算距离圆心的距离来渲染的圆环，（ glsl 本来有 distance 内建函数，之前没看到）

void main() {
        float len = abs(sqrt(thePos.x*thePos.x+thePos.y*thePos.y));
        float alpha = 1.0-smoothstep(0.15,0.20,abs(len-0.75));
        gl_FragColor = vec4(0.4,0.1,0.6,alpha);
    }

1.2 圆环的抗锯齿我使用的 smoothstep  函数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

（这里还没有去做斜线部分的抗锯齿）

1.3 修改值时的动画效果用的 QML 的属性行为（[https://blog.csdn.net/gongjianbo1992/article/details/102135779][https_blog.csdn.net_gongjianbo1992_article_details_102135779]）。

1.4（2021-6-6补充）参照[https://bugreports.qt.io/browse/QTBUG-21550][https_bugreports.qt.io_browse_QTBUG-21550]

ShaderEffect的输出颜色需要乘上透明度，即

gl_FragColor.rgb *= gl_FragColor.a;

# 2.实现代码 #

实现效果图片：

![20200512151202795.png][]

实现代码：

//main.qml
    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        id: root
        visible: true
        width: 640
        height: 480
        title: qsTr("龚建波 1992")
    
        //进度条
        MyProgressBar{
            id: progress
            width: root.width>root.height?root.height/2:root.width/2
            height: progress.width
            anchors.centerIn: parent
        }
    
        Row{
            x:10
            y:10
            spacing: 10
    
            //数字框
            SpinBox{
                id: spin
                from: 0
                to: 100
                value: 45
                editable: true
            }
            //按钮
            Button{
                id: btn
                text: "set data"
                onClicked: {
                    progress.value=spin.value
                }
            }
        }
        Component.onCompleted: {
            //初始值
            progress.value=spin.value
        }
    }

import QtQuick 2.12
    
    //自定义的环形进度条组件
    //没设置OpenGL版本，可能默认时OpenGL ES2.0吧
    ShaderEffect{
        id: control
    
        property double min: 0
        property double max: 100
        property double value: 0
        // 给着色器的
        property real aValue: (value-min)/(max-min)
        // 修改值后触发动画效果
        Behavior on aValue{
            NumberAnimation{
                duration: 1000
            }
        }
    
        // 上面的文字
        Text{
            anchors.centerIn: parent
            color: "black"
            font.pixelSize: 20
            text: Number(aValue*100).toFixed(2)+" %"
        }
    
        //mat4 qt_Matrix组合的转换矩阵，从根项到此ShaderEffect的矩阵与正交投影的乘积
        //vec4 qt_Vertex顶点位置，左上角顶点的位置为（0，0），右下角顶点的位置为（width，height）
        //vec2 qt_MultiTexCoord0纹理坐标，左上角坐标为（0，0），右下角坐标为（1，1）
        //thePos用来指定位置，标准化设备坐标
        //aSmoothWidth用来指定smoothstep的宽度
        vertexShader: "
                uniform mat4 qt_Matrix;
                attribute vec4 qt_Vertex;
                attribute vec2 qt_MultiTexCoord0;
                varying vec2 thePos;
                varying float aSmoothWidth;
                uniform float width;
    
                void main() {
                    thePos = vec2(qt_MultiTexCoord0.x*2.0-1.0,-qt_MultiTexCoord0.y*2.0+1.0);
                    aSmoothWidth = 3.0/float(width);
    
                    gl_Position = qt_Matrix * qt_Vertex;
                }"
    
        //float qt_Opacity从根项到此ShaderEffect的不透明度的乘积。
        //es2里字面量也得写成和运算变量一样的类型，如浮点数
        //myatan2把角度归一化为[0,1]
        fragmentShader: "
                #define PI 3.14159265
                varying vec2 thePos;
                varying float aSmoothWidth;
                uniform float qt_Opacity;
                uniform float aValue;
    
                float myatan2(float y,float x)
                {
                    float ret_val=0.0;
                    if(x!=0.0){
                        ret_val=atan(y,x);
                        if(ret_val<0.0){
                            ret_val+=2.0*PI;
                        }
                    }
                    return ret_val/(2.0*PI);
                }
    
                void main() {
                    float len = abs(sqrt(pow(thePos.x,2.0)+pow(thePos.y,2.0)));
                    float alpha = 1.0-smoothstep(0.15,0.15+aSmoothWidth,abs(len-0.75));
                    float angle = myatan2(thePos.y,thePos.x);
                    if(angle<aValue){
                        gl_FragColor = vec4(1.0,0.1,(1.0-angle),alpha);
                    }else{
                        gl_FragColor = vec4(0.4,0.1,0.6,alpha);
                    }
                    gl_FragColor.rgb *= gl_FragColor.a;
                }"
    }

（2020-5-14修复bug及改进）

主要是片段着色器部分，一是之前的圆环顶点 x 为 0 时没进行处理，上下会有竖线；二是圆环色条的抗锯齿现在也处理了下：

fragmentShader: "
                #define PI 3.14159265
                varying vec2 thePos;
                varying float aSmoothWidth;
                uniform float qt_Opacity;
                uniform float aValue;
    
                float myatan2(float y,float x)
                {
                    float ret_val = 0.0;
                    if(x != 0.0){
                        ret_val = atan(y,x);
                        if(ret_val < 0.0){
                            ret_val += 2.0*PI;
                        }
                    }else{
                        ret_val = y>0.0 ? PI*0.5 : PI*1.5;
                    }
                    return ret_val/(2.0*PI);
                }
    
                void main() {
                    float len = abs(sqrt(pow(thePos.x,2.0)+pow(thePos.y,2.0)));
                    float alpha = 1.0-smoothstep(0.15,0.15+aSmoothWidth,abs(len-0.75));
                    float angle = myatan2(thePos.y,thePos.x);
                    float angle_smooth=1.0-smoothstep(aValue,aValue+aSmoothWidth/3.0,angle);
    
                    if(angle_smooth>0.0){
                    if(angle_smooth>=1.0){
                    gl_FragColor = vec4(1.0,0.1,(1.0-angle),alpha);
                    }else{
                    gl_FragColor = vec4(mix(vec3(1.0,0.1,(1.0-angle)),vec3(0.4,0.1,0.6),1.0-angle_smooth),alpha);
                    }
                    }else{
                    gl_FragColor = vec4(0.4,0.1,0.6,alpha);
                    }
                    gl_FragColor.rgb *= gl_FragColor.a;
                }"

[https_blog.csdn.net_gongjianbo1992_article_details_106043023]: https://blog.csdn.net/gongjianbo1992/article/details/106043023
[https_doc.qt.io_qt-5_qml-qtquick-shadereffect.html]: https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html
[http_qmlbook.github.io]: http://qmlbook.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20230312/20a73b700a774d019af6265aab09b552.png
[https_blog.csdn.net_gongjianbo1992_article_details_102135779]: https://blog.csdn.net/gongjianbo1992/article/details/102135779
[https_bugreports.qt.io_browse_QTBUG-21550]: https://bugreports.qt.io/browse/QTBUG-21550
[20200512151202795.png]: /images/20230312/913bc52a1bb44587b591875602e594b4.png