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

最新推荐文章于 2024-07-29 15:59:47 发布

诺谦

最新推荐文章于 2024-07-29 15:59:47 发布

阅读量1.5k

点赞数 1

分类专栏： Qt Quick/QML入门到精通文章标签：嵌入式 canvas css3 css 数据可视化

本文链接：https://blog.csdn.net/qq_37997682/article/details/119589757

版权

Qt Quick/QML入门到精通专栏收录该内容

该专栏为热销专栏榜第9名

107 篇文章 485 订阅 ¥299.90 ¥399.90

订阅专栏

本文展示了如何使用Qt Quick的QML创建一个具有水纹波动效果的进度条。支持自定义颜色、波纹幅度、流动速度和采样点数目，以适应不同设备性能。详细代码逻辑说明和资源可在QML专栏付费资源群中获取。

摘要由CSDN通过智能技术生成

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

了解本专栏