360悬浮球-小贝常规样式

一、效果图

二、效果图拆解
根据效果图上显示，常规模式的小贝是由多个同心圆组成的，最外圈是一个圆圈，然后是一个白色的圆环，圆环上绘制渐变色进度条，再里面是一个边缘向中心渐变的圆形渐变圆，最中间的文字是三个标签组成的。
三、绘制过程拆解
①首先绘制一个圆圈，颜色指定为灰色即可。
②将半径减少一个像素，绘制一个填充的带透明度的白色圆。
③半径不变，从90°开始顺时针绘制锥形渐变扇形圆环。
④半径减小，留出进度条显示的宽度，绘制一个带有透明度的圆圈。
⑤半径再减小一个像素，绘制一个带有透明度的圆形渐变圆。
⑥设置中间控件上的文字变化。
四、准备工作
①初始化窗口类，类继承自QDialog，设置窗口大小，去掉标题栏，任务栏，窗口置顶等，代码如下所示：

 setFixedSize(70,70);//去掉标题栏 设置置顶 去掉任务栏图标setWindowFlags(Qt::FramelessWindowHint|Qt::Tool|Qt::WindowCloseButtonHint|Qt::WindowStaysOnTopHint);

②设置控件再主屏幕上的显示位置，将窗口移动到主屏幕右下角位置，代码如下：

 //获取主屏尺寸 设置位置QScreen *primaryScreen=QGuiApplication::primaryScreen();if(primaryScreen==nullptr)return;geometry=primaryScreen->availableGeometry();this->move(geometry.width()-100,geometry.height()*0.6);

③很重要的一点，设置窗口背景透明，如果不设置这个，窗口运行起来就是有一个白色背景，设置代码如下：

 //设置窗口背景透明setAttribute(Qt::WA_TranslucentBackground, true);

④设置窗口可以随着鼠标拖动而移动，这里需要重写QWidget类的三个虚函数方法，分别是：

 void mousePressEvent(QMouseEvent*);void mouseMoveEvent(QMouseEvent*);void mouseReleaseEvent(QMouseEvent*);

实现代码如下所示：

 //定义变量-记录最后的移动位置QPoint last;//实现三个虚函数void GuardXiaobei::mousePressEvent(QMouseEvent *e){last = e->globalPos();}void GuardXiaobei::mouseMoveEvent(QMouseEvent *e){if((last.x()==0)&&(last.y()==0))return;int dx = e->globalX() - last.x();int dy = e->globalY() - last.y();last = e->globalPos();this->move(x()+dx, y()+dy);}void GuardXiaobei::mouseReleaseEvent(QMouseEvent *e){if((last.x()==0)&&(last.y()==0))return;int dx = e->globalX() - last.x();int dy = e->globalY() - last.y();this->move(x() + dx, y() + dy);}

五、详细绘制过程
①首先初始化必要的变量，比如设置圆圈的半径大小（这里默认设置为35像素），初始化界面上显示百分比的几个控件，设置对齐方式等，设置几个控件的代码如下：

 //初始化控件lab_Value=new QLabel();QLabel *lab_Unit=new QLabel();QLabel *lab_NetSpeed=new QLabel();QHBoxLayout* valueLayout=new QHBoxLayout();QVBoxLayout* mainLayout=new QVBoxLayout();//设置控件样式lab_Value->setFont(QFont("宋体",18));//设置控件文字lab_Value->setText("25");lab_Unit->setText("%");lab_NetSpeed->setText("0K/s");//设置控件文字对齐方式lab_Value->setAlignment(Qt::AlignHCenter|Qt::AlignBottom);lab_Unit->setAlignment(Qt::AlignHCenter|Qt::AlignBottom);lab_NetSpeed->setAlignment(Qt::AlignHCenter|Qt::AlignTop);lab_Value->setFixedHeight(40);lab_Unit->setFixedHeight(36);//设置布局valueLayout->setMargin(0);valueLayout->setSpacing(0);valueLayout->addStretch(1);valueLayout->addWidget(lab_Value);valueLayout->addWidget(lab_Unit);valueLayout->addStretch(1);mainLayout->setMargin(0);mainLayout->setSpacing(0);mainLayout->addLayout(valueLayout,3);mainLayout->addWidget(lab_NetSpeed,2);setLayout(mainLayout);

②重载QWidget的绘图函数paintEvent。初始化绘图的QPainter对象，启用反锯齿，将绘制中心移动到控件中心，代码如下所示：

 QPainter painter(this);//启动反锯齿painter.setRenderHint(QPainter::Antialiasing, true);//将画笔中心点移动到窗体中心painter.translate(this->width()/2,this->height()/2);

③绘制外圆环，颜色值为RGB(230,230,230)，透明度为100（完全不透明为255），代码入下所示：

 //调用代码DrawLineEllipse(painter,radius,QColor(230,230,230,100));实现代码void GuardXiaobei::DrawLineEllipse(QPainter& painter,int r,QColor color){QBrush brush(color);painter.setPen(QPen(brush,1,Qt::SolidLine));painter.setBrush(brush);painter.drawEllipse(-r,-r,r<<1,r<<1);}

效果图如下所示，由于我桌面是蓝色的，窗口背景被设置成了透明，所以这里看到的是蓝色背景：

④绘制中间的带透明度的圆，代码如下所示：

//调用代码如下，半径减小一个像素，颜色值为白色，透明度为50
DrawConicalGradientFullArc(painter,radius-1,QColor(255,255,255,50));
//实现代码如下
void GuardXiaobei::DrawConicalGradientFullArc(QPainter& painter,int r,QColor color)
{QConicalGradient conicalGradient(QPointF(0, 0), 90);conicalGradient.setColorAt(0, color);conicalGradient.setColorAt(1.0, color);painter.setBrush(conicalGradient);painter.drawEllipse(QPoint(0,0),r,r);
}

效果图如下，同样由于设置了透明度，所以背景会受到桌面颜色的影响：

⑤绘制中间带有圆形渐变色的进度条，实际是绘制一个整圆，中间绘制遮罩，实现环状效果，代码如下：

 //调用代码如下，设置进度条开始位置颜色为绿色，结束位置颜色为红色DrawConicalGradientArc(painter,radius-1,QColor(86,229,108),QColor(255,0,0));实现代码如下void GuardXiaobei::DrawConicalGradientArc(QPainter& painter,int r,QColor startColor,QColor endColor){// 渐变色QConicalGradient conicalGradient(QPointF(0, 0), 90);conicalGradient.setColorAt(0,endColor);conicalGradient.setColorAt(1.0, startColor);painter.setBrush(conicalGradient);QRectF rect(-r,-r,r<<1,r<<1);QPainterPath path;path.arcTo(rect,currentAngle,90-currentAngle);painter.setPen(Qt::NoPen);painter.drawPath(path);}

效果图如下所示，这里第一个图红色部分不明显，因为设置的是终点为红色，中间都为过渡渐变色：

⑥绘制内圆环，颜色值设置为绿色，代码如下所示：

 //调用代码如下DrawLineEllipse(painter,radius-6,QColor(21,207,96,150));实现代码如下void GuardXiaobei::DrawLineEllipse(QPainter& painter,int r,QColor color){QBrush brush(color);painter.setPen(QPen(brush,1,Qt::SolidLine));painter.setBrush(brush);painter.drawEllipse(-r,-r,r<<1,r<<1);}

效果图如下所示：

⑦绘制一个中心遮罩，将中间多余的绿色遮住，代码如下所示：

 //调用代码如下，设置颜色值为RGB(230,230,230)DrawConicalGradientFullArc(painter,radius-6,QColor(230,230,230));//实现代码如下void GuardXiaobei::DrawConicalGradientFullArc(QPainter& painter,int r,QColor color){QConicalGradient conicalGradient(QPointF(0, 0), 90);conicalGradient.setColorAt(0, color);conicalGradient.setColorAt(1.0, color);painter.setBrush(conicalGradient);painter.drawEllipse(QPoint(0,0),r,r);}

效果图如下所示：

⑧绘制一个带透明度的锥形渐变圆，代码如下所示：

 //调用代码如下，设置边缘颜色为绿色，透明度为80，中心颜色为白灰色DrawRadialGradientArc(painter,radius-7,QColor(21,207,96,80),QColor(230,230,230));实现代码如下所示void GuardXiaobei::DrawRadialGradientArc(QPainter& painter,int r,QColor startColor,QColor endColor){QRadialGradient radialGradient(0,0,r,0,0);radialGradient.setColorAt(0.7,endColor);radialGradient.setColorAt(1,startColor);painter.setBrush(radialGradient);painter.drawEllipse(-r,-r,r<<1,r<<1);}

其中setColorAt中1表示边缘的颜色，0.7是半径的70%处显示白色。
效果图如下所示：

到此，绘制小贝常规模式的UI界面完成，由于截图背景色没有处理，所以截图上四个角落有蓝色，最后是百分比和角度的对应关系转换，比如现在的25%对应的角度是0°，对应转换代码如下：

 value的值范围是0-100currentAngle=-(value/100.0)*360+90;

六、最后总结
①目前只是实现了悬浮球的鼠标点击拖动，并没有做悬浮球碰到边界的检测和贴边收缩功能。后续增加这个功能。
②上面描述的是绘制的整个过程，源码中，给出了设置开一系列参数设置函数，可以根据自身需要设置不同的值，实现不同的效果。

七、代码获取
从Git下载，地址为：https://github.com/youyicc/GuardXiaobei.git

360悬浮球-小贝常规样式相关推荐

android悬浮球代码,Android 仿360悬浮球与加速球
先来看一张动态图昨天跟着视频学了如何自定义View并做成仿360悬浮球与加速球的样式可以看出来,做成的效果有: 点击按钮后退出Activity,呈现一个圆形的悬浮球,可以随意拖动并会自动依靠到屏幕 ...
android 悬浮球动画,Android 仿360悬浮球与加速球
先来看一张动态图昨天跟着视频学了如何自定义View并做成仿360悬浮球与加速球的样式可以看出来,做成的效果有: 点击按钮后退出Activity,呈现一个圆形的悬浮球,可以随意拖动并会自动依靠到屏幕 ...
360悬浮加速小火箭，内存清理，加速缓存
360悬浮加速小火箭,内存清理,加速缓存关于我最近时间都比较的紧,处理不同项目的BUG,今天偷得半日闲,把剩下项目的一部分扔给了组长.有个问题没解决,做了两天也没完成,实在是没有办法了.也很感谢, ...
vc++实现悬浮窗，迅雷360悬浮球效果
1.SetWindowRgn创建圆角悬浮窗DlgFloat rgn.CreateRoundRectRgn(rect.left, rect.top, rect.Width(), rect.Height( ...
Qt 仿360悬浮球
功能: 1,常规自定义拖动时间 2,异形窗体 3,鼠标进出区域 4,自定义右键菜单 5,自动贴边以及防止拖拽出屏幕区域下载路径:https://download.csdn.net/download/ ...
C# 仿360悬浮球开发demo程序
https://files.cnblogs.com/files/wohexiaocai/%E4%BB%BF360%E5%8A%A0%E9%80%9F%E5%99%A8.zip
QT制作360悬浮球
经过几天的努力还是成功的在返校前把基本效果都完成了,可以实现的功能有左键点击拖拽,松开按键后自动贴边,右键点击后出现菜单栏,中键点击后关闭.其中自动贴边使用动画完成. 等代码审核通过会附上代码链接,由 ...
华为畅享8的悬浮窗在哪里_华为畅享8悬浮球设置 | 手游网游页游攻略大全
发布时间:2015-12-03 华为畅享5s是近期华为推出的金属指纹识别千元机,较高的售价和十足的卖点让华为畅享5s关注度颇高.但是真正用起来华为畅享5s表现怎么样呢?好不好呢?下面99安卓网小编就分 ...
手机html端悬浮球,大屏手机绝配！一款轻巧强大的悬浮球App
很多智能手机用户,特别是iPhone用户,很喜欢使用悬浮球.不过和iPhone相比,安卓上的悬浮球可丰富多彩得多.安卓原生并不自带悬浮球的功能,但诸多悬浮球App,却提供了丰富多彩的方案.加之安卓机的 ...

360悬浮球-小贝常规样式

360悬浮球-小贝常规样式相关推荐

最新文章

热门文章