QT滑块图片验证程序

使用QT实现滑块验证程序，原理是画个图片，然后在图片上画个空白区域，再画个滑块图片。

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
private:
    void initForm();
    void drawPicture();

private slots:
    void onUpdateWidget();
    void onSliderValueChanged(int value);
    void onSliderReleased();
    void onUpdatePixmap();

protected:
    bool eventFilter(QObject *watched, QEvent *event);
    void paintEvent(QPaintEvent *event);

private:
    Ui::Widget *ui;

    QString m_pixmap;
    QPoint m_offsetPoint;
    int m_value;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QPaintEvent>
#include <QPainter>
#include <QPainterPath>
#include <QDebug>
#include <QMessageBox>
#include <QTimer>
#include <QSlider>
#include <QRandomGenerator>

const int squarewidth = 46;
const int squareradius = 20;

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    this->setFixedHeight(600);
    this->setFixedWidth(800);

    m_value = 0;
    m_offsetPoint = QPoint(0, 0);
    ui->widget->installEventFilter(this);
    this->initForm();
}

Widget::~Widget()
{
    delete ui;
}

void Widget::initForm()
{
    QTimer::singleShot(10, this, SLOT(onUpdateWidget()));
    connect(ui->horizontalSlider, &QSlider::valueChanged, this, &Widget::onSliderValueChanged);
    connect(ui->horizontalSlider, &QSlider::sliderReleased, this, &Widget::onSliderReleased);
    m_pixmap = QString("H:\\picture\\TorchLight\\TorchLight0.bmp");

    QTimer::singleShot(100, this, SLOT(onUpdatePixmap()));

}

void Widget::onUpdateWidget()
{
    ui->horizontalSlider->setRange(0, ui->widget->width() - squarewidth);
}

void Widget::onUpdatePixmap()
{
    m_offsetPoint.rx() = qBound(0, QRandomGenerator::global()->bounded(1024*10) % this->width() + squarewidth + squareradius,
                                                                  this->width() - squarewidth);
    m_offsetPoint.ry() = qBound(0, QRandomGenerator::global()->bounded(1024*10) % ui->widget->height() + squarewidth + squareradius,
                                                                  ui->widget->height() - squarewidth - squareradius);
    qDebug()<<m_offsetPoint.rx()<<m_offsetPoint.ry();
    this->update();
}

void Widget::onSliderValueChanged(int value)
{
    //ui->widget->setValue(value);
    m_value = qBound(0, value, ui->widget->width() - squarewidth);
    update();
}

void Widget::onSliderReleased()
{
    bool isOverlap = qAbs(-m_offsetPoint.x() + m_value) < 5;
    QString content = isOverlap ? "验证成功！" : "验证失败！";
    QMessageBox msgBox;
    msgBox.setWindowTitle("滑块图片验证");
    msgBox.setText(content);
    msgBox.exec();

}

void Widget::drawPicture()
{
    QPainter painter(ui->widget);
    painter.setRenderHint(QPainter::Antialiasing);
    QPainterPath clippath;
    clippath.addRoundedRect(ui->widget->rect(), 4, 4);
    painter.setClipPath(clippath);
    //画背景图
    const QPixmap & pixmap = QPixmap(m_pixmap).scaled(ui->widget->width(), ui->widget->height(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    painter.drawPixmap(0, 0, ui->widget->width(), ui->widget->height(), pixmap);

    QPainterPath cutoutpath;
    cutoutpath.setFillRule(Qt::WindingFill);
    QRect rect(m_offsetPoint, QSize(squarewidth, squarewidth));
    cutoutpath.addEllipse(rect);

    //画被扣除的空白区域
    QPainterPath subellipsepath;
    subellipsepath.addEllipse(rect.x(), rect.y() - rect.height() / 2, rect.width(), rect.height());
    cutoutpath = cutoutpath.united(subellipsepath);

    painter.setPen(QPen(QColor(80, 80, 80), 1));
    painter.setBrush(QColor(200, 200, 200, 220));
    painter.drawPath(cutoutpath);

    //画滑块图片
    QPixmap puzzlePixmap(ui->widget->size());
    puzzlePixmap.fill(Qt::transparent);
    QPainter puzzlePainter(&puzzlePixmap);
    puzzlePainter.setRenderHints(QPainter::Antialiasing);
    puzzlePainter.setClipPath(cutoutpath);
    puzzlePainter.setPen(QPen(QColor(229, 228, 228), 2));

    puzzlePainter.drawPixmap(0, 0, ui->widget->width(), ui->widget->height(), pixmap);
    puzzlePainter.drawPath(cutoutpath);

    painter.drawPixmap(-m_offsetPoint.x() + m_value, 0, ui->widget->width(), ui->widget->height(), puzzlePixmap);

}

bool Widget::eventFilter(QObject *watched, QEvent *event)
{
    if (watched == ui->widget && event->type() == QEvent::Paint)
    {
        drawPicture();
        return true;
    }
    return QWidget::eventFilter(watched, event);
}

void Widget::paintEvent(QPaintEvent *)
{

}

QSlider的样式表

 QSlider::groove:horizontal {
     border: 1px solid #999999;
     height: 10px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c004);
     margin: 2px 0;
 }

 QSlider::handle:horizontal {
     background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f0f8f);
     border: 1px solid #5c0c5c;
     width: 18px;
     margin: -12px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
     border-radius: 3px;
 }

空白区域画法

在painter中绘制一个封闭的painterpath。path中的路径通过添加形状的方式自己设置。背景色通过setBrush设置。

QPainterPath cutoutpath;
cutoutpath.setFillRule(Qt::WindingFill);
QRect rect(m_offsetPoint, QSize(squarewidth, squarewidth));
cutoutpath.addEllipse(rect);

//画被扣除的空白区域
QPainterPath subellipsepath;
subellipsepath.addEllipse(rect.x(), rect.y() - rect.height() / 2, rect.width(), rect.height());
cutoutpath = cutoutpath.united(subellipsepath);

painter.setPen(QPen(QColor(80, 80, 80), 1));
painter.setBrush(QColor(200, 200, 200, 220));
painter.drawPath(cutoutpath);

形状可以任意修改

//画被扣除的空白区域
    QPainterPath cutoutpath;
    cutoutpath.setFillRule(Qt::WindingFill);
    QRect rect(m_offsetPoint, QSize(squarewidth, squarewidth));
    cutoutpath.addEllipse(rect);
    cutoutpath.addRect(QRect(m_offsetPoint.x() + squarewidth/2, m_offsetPoint.y() + squarewidth/2, squarewidth, squarewidth));


    painter.setPen(QPen(QColor(80, 80, 80), 1));
    painter.setBrush(QColor(200, 200, 200, 220));
    painter.drawPath(cutoutpath);

填充规则

QPainterPath中setFillRule()共有两个填充规则:Qt::OddEvenFill和 Qt::WindingFill。

其中，Qt::OddEvenFill使用的是奇偶填充规则,具体来说就是:如果要判断一个点是否在图形中,那么可以从该点向图形外引一条水平线﹐如果该水平线与图形的交点的个数为奇数,那么该点就在图形中。这个规则是默认值;

而Qt::WindingFill使用的是非零弯曲规则,具体来说就是:如果要判断一个点是否在图形中,那么可以从该点向图形外引一条水平线,如果该水平线与图形的边线相交,这个边线是顺时针绘制的,就记为1;是逆时针绘制的就记为-1。然后将所有数值相加，如果结果不为0,那么该点就在图形中。

对于Qt::OddEvenFill规则,第一个交点记为1,第二个交点记为2;
对于Qt::WindingFill规则，因为椭圆和矩形都是以顺时针进行绘制的，所以各个交点对应的边都使用1来代表。

滑块图片画法

注意puzzlePainter指向puzzlePixmap，puzzlePixmap是个透明图，在里面绘制同上方空白区域的painterpath可见，然后合并图片和空白区域的painter。

QPixmap puzzlePixmap(ui->widget->size());
    puzzlePixmap.fill(Qt::transparent);
    QPainter puzzlePainter(&puzzlePixmap);
    puzzlePainter.setRenderHints(QPainter::Antialiasing);
    puzzlePainter.setClipPath(cutoutpath);
    puzzlePainter.setPen(QPen(QColor(229, 228, 228), 2));

    puzzlePainter.drawPixmap(0, 0, ui->widget->width(), ui->widget->height(), pixmap);
    puzzlePainter.drawPath(cutoutpath);

    painter.drawPixmap(-m_offsetPoint.x() + m_value, 0, ui->widget->width(), ui->widget->height(), puzzlePixmap);