首页| 论坛| 消息

标题:Qt编写水波进度条控件
作者:liudianwu
日期:2017-08-24 13:13
内容:

手机app中经常能见到各种各样的水波进度条之类的效果,觉得不错,用QWidget的QPainter绘制了一个。集成到了QUC自定义控件中。原理是利用正弦曲线产生平滑曲线点集合,然后用大路径减去当前进度路径,形成水波效果。
/**
* 水波进度条控件 作者:feiyangqingyun(QQ:517216493) 2017-8-23
* 1:可设置范围值,支持负数值
* 2:可设置水波密度,密度越大浪越多
* 3:可设置水波高度,高度越大越浪
* 4:可设置边框宽度
* 5:可设置是否显示进度值
* 6:可设置进度值是否为百分比格式
* 7:可设置背景颜色、边框颜色、当前进度颜色、文字颜色
* 8:提供三种样式风格选择 方形风格 圆形风格 椭圆风格
*/


核心代码:
void ProgressBarWater::drawValue(QPainter *painter)
{
int height = this-> height();
int width = this->width();
int side = qMin(width, height);
//计算当前值所占百分比
double percent = 1 - (double)(value - minValue) / (maxValue - minValue);
//正弦曲线公式 y = A * sin(ωx + φ) + k
//w表示周期,可以理解为水波的密度,值越大密度越大(浪越密集 ^_^),取值 密度*M_PI/宽度
double w = waterDensity * M_PI / width;
//A表示振幅,可以理解为水波的高度,值越大高度越高(越浪 ^_^),取值高度的百分比
double A = height * waterHeight;
//k表示y轴偏移,可以理解为进度,取值高度的进度百分比
double k = height * percent;
//第一条波浪路径集合
QPainterPath waterPath1;
//第二条波浪路径集合
QPainterPath waterPath2;
//移动到左上角起始点
waterPath1.moveTo(0, height);
waterPath2.moveTo(0, height);
offset += 0.6;
if (offset > (width / 2)) {
..


#1 [pengchengfan 08-24 15:27]
精神值得夸赞
#2 [王闯闯 08-24 15:35]
大师,厉害!
照着大师的代码简单实现了下
#3 [michelle_hxy 08-24 16:01]

#4 [仗剑天涯 08-24 18:16]

#5 [t1029901995 08-24 22:30]
刘大师 一如既往的牛叉

<< 1 2 3 >> (1/6)

回复 发表
主题 版块