Skip to content

Commit 3ffaee4

Browse files
zhengtianzuozhengtianzuo
committed
Add QmlCanvasWaveProgress
1 parent fd6404d commit 3ffaee4

File tree

8 files changed

+170
-1
lines changed

8 files changed

+170
-1
lines changed

‎QmlCanvasText/main.qml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ ApplicationWindow {
4343

4444
FontMetrics {
4545
id: fontMetrics
46-
font.family: "Arial"
46+
font.family: "Microsoft Yahei"
4747
font.pixelSize: 16
4848
font.italic: false
4949
font.bold: false

‎QmlCanvasWaveProgress/QmlCanvasWaveProgress.pro

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#-------------------------------------------------
2+
#
3+
# Copyright (C) 2003-2103 CamelSoft Corporation
4+
#
5+
#-------------------------------------------------
6+
7+
QT += qml quick
8+
9+
CONFIG += c++11
10+
11+
SOURCES += main.cpp
12+
13+
RESOURCES += qml.qrc

‎QmlCanvasWaveProgress/main.cpp

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*!
2+
*@file main.cpp
3+
*@brief 程序主文件
4+
*@version 1.0
5+
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
6+
*@author zhengtianzuo
7+
*/
8+
#include <QGuiApplication>
9+
#include <QQmlApplicationEngine>
10+
11+
int main(int argc, char *argv[])
12+
{
13+
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
14+
QGuiApplication app(argc, argv);
15+
16+
QQmlApplicationEngine engine;
17+
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
18+
19+
return app.exec();
20+
}

‎QmlCanvasWaveProgress/main.qml

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/*!
2+
*@file main.qml
3+
*@brief 主文件
4+
*@version 1.0
5+
*@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
6+
*@author zhengtianzuo
7+
*/
8+
import QtQuick 2.7
9+
import QtQuick.Controls 2.0
10+
11+
ApplicationWindow {
12+
visible: true
13+
width: 400
14+
height: 300
15+
title: qsTr("Qml圆形波浪进度条")
16+
17+
//range信息
18+
property int rangeValue: 66;
19+
property int nowRange: 0;
20+
21+
//画布
22+
property int mW: 250;
23+
property int mH: 250;
24+
property int lineWidth: 2;
25+
26+
//圆
27+
property double r: mH / 2; //圆心
28+
property double cR: r - 16 * lineWidth; //圆半径
29+
30+
//Sin曲线
31+
property int sX: 0;
32+
property int sY: mH / 2;
33+
property int axisLength: mW; //轴长
34+
property double waveWidth: 0.015; //波浪宽度,数越小越宽
35+
property double waveHeight: 6; //波浪高度,数越大越高
36+
property double speed: 0.09; //波浪速度，数越大速度越快
37+
property double xOffset: 0; //波浪x偏移量
38+
39+
Canvas{
40+
id: canvas
41+
height: mH
42+
width: mW
43+
anchors.centerIn: parent
44+
onPaint: {
45+
var ctx = getContext("2d");
46+
47+
ctx.clearRect(0, 0, mW, mH);
48+
49+
//显示外圈
50+
ctx.beginPath();
51+
ctx.strokeStyle = '#148014';
52+
ctx.arc(r, r, cR+5, 0, 2*Math.PI);
53+
ctx.stroke();
54+
ctx.beginPath();
55+
ctx.arc(r, r, cR, 0, 2*Math.PI);
56+
ctx.clip();
57+
58+
//显示sin曲线
59+
ctx.save();
60+
var points=[];
61+
ctx.beginPath();
62+
for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
63+
var y = -Math.sin((sX + x) * waveWidth + xOffset);
64+
var dY = mH * (1 - nowRange / 100 );
65+
points.push([x, dY + y * waveHeight]);
66+
ctx.lineTo(x, dY + y * waveHeight);
67+
}
68+
69+
//显示波浪
70+
ctx.lineTo(axisLength, mH);
71+
ctx.lineTo(sX, mH);
72+
ctx.lineTo(points[0][0],points[0][1]);
73+
ctx.fillStyle = '#1c86d1';
74+
ctx.fill();
75+
ctx.restore();
76+
77+
//显示百分数
78+
ctx.save();
79+
var size = 0.4*cR;
80+
ctx.font = size + 'px Arial';
81+
ctx.textAlign = 'center';
82+
ctx.fillStyle = "rgba(14, 80, 14, 0.8)";
83+
ctx.fillText(~~nowRange + '%', r, r + size / 2);
84+
ctx.restore();
85+
86+
//增加Rang值
87+
if(nowRange <= rangeValue){
88+
nowRange += 1;
89+
}
90+
91+
if(nowRange > rangeValue){
92+
nowRange -= 1;
93+
}
94+
xOffset += speed;
95+
}
96+
97+
Timer{
98+
id: timer
99+
running: false
100+
repeat: true
101+
interval: 10
102+
onTriggered:{
103+
parent.requestPaint();
104+
}
105+
}
106+
}
107+
108+
Button{
109+
id: button
110+
height: 24
111+
width: 60
112+
anchors.bottom: parent.bottom
113+
anchors.horizontalCenter: parent.horizontalCenter
114+
text: qsTr("开始")
115+
onClicked: {
116+
if (timer.running === false){
117+
timer.start();
118+
button.text = qsTr("停止");
119+
}else{
120+
timer.stop();
121+
button.text = qsTr("开始");
122+
}
123+
}
124+
}
125+
}

‎QmlCanvasWaveProgress/qml.qrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<RCC>
2+
<qresource prefix="/">
3+
<file>main.qml</file>
4+
</qresource>
5+
</RCC>

‎QmlCanvasWaveProgress/show.gif

153 KB
Loading

‎QtQuickExamples.pro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ SUBDIRS += QmlCircularProgressButton
4343
SUBDIRS += QmlPageNavigation
4444
SUBDIRS += QmlUpDownRefresh
4545
SUBDIRS += QmlListViewDragDrop
46+
SUBDIRS += QmlCanvasWaveProgress

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,3 +201,8 @@ QmlListViewDragDrop: Qml列表项拖放
201201

202202
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlListViewDragDrop/show.gif?raw=true)
203203

204+
205+
QmlCanvasWaveProgress: Qml圆形波浪进度条
206+
207+
![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlCanvasWaveProgress/show.gif?raw=true)
208+

0 commit comments

Comments
 (0)