使用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);
