38.qt quick-QML水纹波进度条

1.效果展示

2.源码介绍

可以设置的属性如下所示:

可以支持自定义颜色、波纹幅度、水波流动速度、采样点数目(嵌入式效果差的话可以适当降低增加画面刷新速度).

具体绘制逻辑如下所示:

var j = 0;
function draw(ctx) {
    var r = canvas.width/2                    // 半径
    var d = r*2                               // 直径
    var p = control.value/100                 // 百分比
    var pointCnt = control.sampleCnt;         // 采样点
    if (pointCnt > d) {
        pointCnt = d
    }
    var pointOffset = d / pointCnt
    ctx.save()
    ctx.clearRect(0,0,d,d);
    ctx.lineWidth = 1.5
    ctx.translate(canvas.width/2,canvas.height/2)   // 设置中心位置
    ctx.beginPath()
    ctx.arc(0,0,r,0,2*Math.PI)
    ctx.closePath()