QML水波纹控件教程

/*************************************
  **    水波纹控件
  **Author**   ：玄德
  **Creare**   :2024-7-29
***************************************/

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.12
import "RipplePaint.js" as RipplePaint


Item{
    id:control
    property real value:80
    property color borderColor:"#8A9CF9"
    property color backgroundColor:"#BEC8F9"
    property color foregroundColor: "#5AA2FC"
    property color           foregroundColor1:Qt.rgba(foregroundColor.r,foregroundColor.g,foregroundColor.b,foregroundColor.a*0.3)
    property color  foregroundColor2:Qt.rgba(foregroundColor.r,foregroundColor.g,foregroundColor.b,foregroundColor.a*0.7)
    property color textColor:"#f0fb37"
    // 比例(必须大于0,越大,波纹幅度越大)
    property real ratio: 20
    //水波速度(必须大于0,越大,波纹流动越快)
    property real speed: 1
    // 采样点数目(必须大于0,值越大,波纹线条越丝滑,处理速度越慢,处理速度慢的可以适当降低)
    property real sampleCnt: 100
    property bool shadow: true


    Rectangle{
        id:loader
        anchors.centerIn: parent
        //矩形的宽度设置为其父元素的宽度和高度中的较小值减去 20。这确保矩形在父元素内居中且保持适当的大小。
        width: Math.min(parent.width,parent.height)-20
        //正方形
        height:width
        //抗锯齿，矩形边缘平滑
        antialiasing: true
        //圆角半径
        radius:width/2
        color:backgroundColor
        border.color: control.borderColor
        border.width: 2
        //启用图层效果
        layer.enabled: shadow
        //添加一个投影效果
        layer.effect: DropShadow{
            color: borderColor
            //决定平滑程度
            samples: 15
        }

    }


}

效果：

加了一个 Canvas 元素和一个 Text 元素，用于在用户界面中创建一个带有动画效果的画布和一个显示百分比值的文本。

    Canvas{
        id:canvas
        parent:loader
        anchors.fill:loader
        antialiasing:true
        onPaint: {
            var ctx = getContext("2d")

            function draw(){
                RipplePaint.draw(ctx);
                requestAnimationFrame(draw);

            }
            draw();
        }
    }

    Text{
        id:text_value
        color: textColor
        text: control.value+'%'
        anchors.centerIn: parent
        font.family: "Microsoft Tahei"
        font.pointSize: 50

    }

效果：