在登陆界面中,经常用到滑动验证的方式,来确保账号安全
效果图:
样式1
样式2
头文件
#ifndef QWHSLIDERVERIFICATION_H
#define QWHSLIDERVERIFICATION_H
#include <QWidget>
#include <QPaintEvent>
#include <QMouseEvent>
#include <QResizeEvent>
#include <QPainter>
#include <QTime>
class QWHSliderVerification : public QWidget
{
Q_OBJECT
Q_ENUMS(SliderType)
public:
enum SliderType
{
SliderType_Normal, //标准滑块验证方式
SliderType_Picture //图片滑块验证方式
};
explicit QWHSliderVerification(QWidget *parent = nullptr);
~QWHSliderVerification();
protected:
void paintEvent(QPaintEvent *);
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
void resizeEvent(QResizeEvent *event);
void drawNormalSlider(QPainter *painter);
void drawPictureSlider(QPainter *painter);
private:
QPainterPath pixPath(const QRectF pixRect);
signals:
void passVerification(bool verification);
public slots:
private:
int m_sliderX; //滑块左侧位置
int m_sliderWidth; //滑块宽度
int m_sliderHeight; //滑块高度
float m_sliderWRatioH; //滑块宽度与高度比值,值为0+,推荐1.2
int m_pointLeftWidth; //鼠标按下点距滑块左侧距离
bool m_pressedInSlider; //鼠标是否按下且在滑块中
bool m_passVerification; //是否通过验证
QColor m_sliderBorderColor; //边框颜色
QColor m_sliderBgColor; //滑动条背景颜色
QColor m_sliderTipTextColor; //滑动条提示文本颜色
QColor m_sliderBlockMoveColor; //滑块划过区域颜色
QColor m_sliderBlockBgColor; //滑块背景色
QColor m_sliderBlockTextColor; //滑块文本颜色
QColor m_topRectColor; //图片样式中:上方图片滑块背景颜色
int m_picLRMargin; //图片样式中:滑块离左右两侧边距
float m_picTopPosRatioH; //图片样式中:滑块图片离顶部边距与控件高度比值,值为0-1,推荐0.1
QTime m_pressTime; //滑块按下时间
QTime m_releaseTime; //滑块释放时间
SliderType m_sliderType; //滑块验证样式
};
#endif // QWHSLIDERVERIFICATION_H
核心代码
void QWHSliderVerification::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
if (m_sliderType == SliderType_Normal)
{
drawNormalSlider(&painter);
}
else if (m_sliderType == SliderType_Picture)
{
drawPictureSlider(&painter);
}
}
void QWHSliderVerification::drawNormalSlider(QPainter *painter)
{
painter->save();
int width = this->width();
int height = this->height();
QFont font;
font.setPixelSize(height / 2.0);
painter->setFont(font);
//绘制背景
painter->setPen(Qt::NoPen);
painter->setBrush(m_sliderBgColor);
painter->drawRect(rect());
if (!m_passVerification)
{
//绘制滑块
painter->setPen(m_sliderBorderColor);
painter->setBrush(m_sliderBlockBgColor);
painter->drawRect(QRect(m_sliderX, 0, m_sliderWidth, m_sliderHeight));
//绘制滑块文字
painter->setPen(QPen(m_sliderBlockTextColor));
painter->setBrush(Qt::NoBrush);
painter->drawText(QRect(m_sliderX, 0, height * 1.2, height), Qt::AlignCenter, QString(">>"));
//绘制滑块滑过的区域
painter->setPen(Qt::NoPen);
painter->setBrush(m_sliderBlockMoveColor);
painter->drawRect(QRect(0, 0, m_sliderX, height));
//绘制提示文字
painter->setPen(m_sliderTipTextColor);
painter->setBrush(Qt::NoBrush);
painter->drawText(QRect(0, 0, width, height), Qt::AlignCenter, QStringLiteral("请按住滑块,拖动到最右边"));
}
//验证通过后
else if (m_passVerification)
{
//绘制滑块滑过的区域
painter->setPen(Qt::NoPen);
painter->setBrush(m_sliderBlockMoveColor);
painter->drawRect(QRect(0, 0, m_sliderX, height));
//绘制提示文字
painter->setPen(m_sliderBgColor);
painter->setBrush(Qt::NoBrush);
painter->drawText(QRect(0, 0, width, height), Qt::AlignCenter, QStringLiteral("验证通过"));
//绘制滑块
painter->setPen(m_sliderBorderColor);
painter->setBrush(m_sliderBgColor);
painter->drawRect(m_sliderX, 0, m_sliderWidth, m_sliderHeight);
//绘制滑块内容
painter->setBrush(m_sliderBlockMoveColor);
painter->drawEllipse(QPoint(m_sliderX + height * 0.6, height / 2.0), (int)(height * 0.3), (int)(height * 0.3));
painter->setPen(QPen(m_sliderBlockBgColor, height / 15.0, Qt::SolidLine, Qt::RoundCap, Qt::MiterJoin));
painter->setBrush(Qt::NoBrush);
QVector<QPointF> points;
points.push_back(QPointF(m_sliderX + height * 0.42, height / 2.0));
points.push_back(QPointF(m_sliderX + height * 0.54, height * 0.65));
points.push_back(QPointF(m_sliderX + height * 0.54, height * 0.65));
points.push_back(QPointF(m_sliderX + height * 0.78, height * 0.35));
painter->drawLines(points);
}
painter->restore();
}