作者:admin,发布日期:2021-04-06
阅读:1221;评论:0
写在开头
通过Qt的QPaint,我们可以直接在界面上绘制图形,再通过鼠标事件,获取到鼠标的状态和位置,配合这些信息实现界面的绘制和实现,下面展示代码。
具体代码
具体过程可参考注释
dialog.h
C++
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include <QDebug>
#include <QKeyEvent>
#include <QPaintEvent>
#include <QPainter>
#include <QMessageBox>
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
C++
#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()<<event->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";
}
界面设计