• 2198阅读
  • 2回复

zhengtianzuo系列-Qml圆形波浪进度条 [复制链接]

上一主题 下一主题
离线zhengtianzuo
 

只看楼主 倒序阅读 楼主  发表于: 2017-12-01
参考 Canvas制作动态进度加载水球
感谢原博主的分享

```
    //range信息
    property int rangeValue: 66;
    property int nowRange: 0;

    //画布
    property int mW: 250;
    property int mH: 250;
    property int lineWidth: 2;

    //圆
    property double r: mH / 2; //圆心
    property double cR: r - 16 * lineWidth; //圆半径

    //Sin曲线
    property int sX: 0;
    property int sY: mH / 2;
    property int axisLength: mW;        //轴长
    property double waveWidth: 0.015;   //波浪宽度,数越小越宽
    property double waveHeight: 6;      //波浪高度,数越大越高
    property double speed: 0.09;        //波浪速度,数越大速度越快
    property double xOffset: 0;         //波浪x偏移量

    Canvas{
        id: canvas
        height: mH
        width: mW
        anchors.centerIn: parent
        onPaint: {
            var ctx = getContext("2d");

            ctx.clearRect(0, 0, mW, mH);

            //显示外圈
            ctx.beginPath();
            ctx.strokeStyle = '#148014';
            ctx.arc(r, r, cR+5, 0, 2*Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(r, r, cR, 0, 2*Math.PI);
            ctx.clip();

            //显示sin曲线
            ctx.save();
            var points=[];
            ctx.beginPath();
            for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
                var y = -Math.sin((sX + x) * waveWidth + xOffset);
                var dY = mH * (1 - nowRange / 100 );
                points.push([x, dY + y * waveHeight]);
                ctx.lineTo(x, dY + y * waveHeight);
            }

            //显示波浪
            ctx.lineTo(axisLength, mH);
            ctx.lineTo(sX, mH);
            ctx.lineTo(points[0][0],points[0][1]);
            ctx.fillStyle = '#1c86d1';
            ctx.fill();
            ctx.restore();

            //显示百分数
            ctx.save();
            var size = 0.4*cR;
            ctx.font = size + 'px Arial';
            ctx.textAlign = 'center';
            ctx.fillStyle = "rgba(14, 80, 14, 0.8)";
            ctx.fillText(~~nowRange + '%', r, r + size / 2);
            ctx.restore();

            //增加Rang值
            if(nowRange <= rangeValue){
                nowRange += 1;
            }

            if(nowRange > rangeValue){
                nowRange -= 1;
            }
            xOffset += speed;
        }

        Timer{
            id: timer
            running: false
            repeat: true
            interval: 10
            onTriggered:{
                parent.requestPaint();
            }
        }
    }
```



需要完整代码请访问 QtQuickExamples
博客地址: https://blog.csdn.net/zhengtianzuo06
Github: https://github.com/zhengtianzuo
个人产品: https://github.com/zhengtianzuo/Silk
产品网站: http://www.camelstudio.cn
离线新手崛起

只看该作者 1楼 发表于: 2019-12-17
佐佐,竟然没人理你,可怜
只有想不到,没有做不到的
离线liudianwu

只看该作者 2楼 发表于: 2019-12-18
回 新手崛起 的帖子
新手崛起:佐佐,竟然没人理你,可怜 (2019-12-17 17:35) 

波风,丝绸又不靠这个吃饭
专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!你正好需要,我正好专业!QQ:517216493 微信:feiyangqingyun Email:feiyangqingyun@163.com
群号:853086607(Qt交流大会,雨田哥群,不定期上传作品,解答作品中相关问题!) 312125701(QtQML多多指教群) 46679801(Qt开发技术交流群-5000人大群)
快速回复
限100 字节
 
上一个 下一个