电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
利用Qt原生widget实现滑动验证
分 享
扫描二维码分享
利用Qt原生widget实现滑动验证
Qt
C++
xbk_425933
关注
发布时间: 2022-01-05
丨
阅读: 414
#写在开头 通过Qt的QPaint,我们可以直接在界面上绘制图形,再通过鼠标事件,获取到鼠标的状态和位置,配合这些信息实现界面的绘制和实现,下面展示代码。 # 具体代码 具体过程可参考注释 dialog.h ```cpp #ifndef DIALOG_H #define DIALOG_H #include
#include
#include
#include
#include
#include
QT_BEGIN_NAMESPACE namespace Ui { class Dialog; } QT_END_NAMESPACE class Dialog : public QDialog { Q_OBJECT public: Dialog(QWidget *parent = nullptr); ~Dialog(); protected: // 重写三个需要的事件 void mouseMoveEvent(QMouseEvent *event); void mouseReleaseEvent(QMouseEvent *event); void paintEvent(QPaintEvent *event); private: Ui::Dialog *ui; // 鼠标所在的x,也就是滑块的位置 int mouseX; }; #endif // DIALOG_H ``` dialog.cpp ```cpp #include "dialog.h" #include "ui_dialog.h" Dialog::Dialog(QWidget *parent) : QDialog(parent) , ui(new Ui::Dialog) { ui->setupUi(this); } Dialog::~Dialog() { delete ui; } void Dialog::mouseMoveEvent(QMouseEvent *event) { // 输出鼠标的位置 qDebug()<
x(); // 存储鼠标当前所在位置 int eventX = event->x(); // 如果鼠标没有在滑块地方则返回 if(mouseX == 0 && eventX >= 30){ return; } // 存储mouseX mouseX = eventX; // 防止滑块超出界面 if(mouseX > this->width()){ mouseX = this->width(); } // 强制重绘 this->repaint(); } void Dialog::mouseReleaseEvent(QMouseEvent *event) { // qDebug()<<"release"; // 鼠标放开时滑块重新回到起点 mouseX = 0; // 强制重绘 this->repaint(); } void Dialog::paintEvent(QPaintEvent *event) { // 判断滑块位置 if(mouseX >= this->width() - 30){ QMessageBox::information(this,"验证结果","验证通过了!"); mouseX = 0; } // 开始绘制 QPainter painter(this); painter.drawText(this->width()/ 2,15,"请通过滑动验证"); // 绘制滑块 painter.fillRect(mouseX,0,30,30,QBrush(QColor::fromRgb(255,0,0))); // 绘制划过的路径 painter.fillRect(0,0,mouseX,30,QBrush(QColor::fromRgb(0,255,0))); qDebug()<<"repaint"; } ``` #界面设计 ![](https://cf04.ickimg.com/bbsimages/202112/f903172f744987a07605b0a2fafeea0e.jpg) # 效果图 ![](https://cf04.ickimg.com/bbsimages/202112/3521bc1e7eb67252328fa3ac5408164c.jpg) ![](https://cf04.ickimg.com/bbsimages/202112/6f9bff7d8afc584ffa377871e3cf78fd.jpg)
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
xbk_425933
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交