【QT学习】利用QSlider制作滑块图形验证码（完整源码）

---

前言

   目前，越来越多的网站和APP都出现了滑块验证码。使用滑块验证码，可以有效防止批量注册、发广告、刷票和破解密码等恶意操作。本篇，作者将分享自己如何使用QSlider制作滑块图形验证码。

---

一、实现效果

• 我们拖动滑块到指定位置完成拼图，即验证成功；否则，滑块将回到初始位置。
  

二、QSlider类

1.常用方法

（1）设置滑块方向，水平或垂直

	setOrientation(Qt::Vertical);		//垂直
	setOrientation(Qt::Horizontal);		//水平

（2）设置最大值、最小值、范围

	setMaximum(int);					//最大值
	setMinimum(int);					//最小值
	setRange(int min, int max);			//范围

（3）设置步进值，单击QSlider控件一次移动的距离（可设置为0）

	setSingleStep(int);					//步进值

（4）获取/设置滑块的当前值

	int value();						//获取当前值
	setValue(int)						//设置当前值

2.常用信号

（1）移动滑块信号（SIGNAL）

	void sliderMoved(int value);	//参数为当前滑动条所对应的数值,可用value函数作为参数

（2）单击滑块信号（SIGNAL）

	void sliderPressed();

（3）释放滑块信号（SIGNAL）

	void sliderReleased();

（4）数值改变信号（SIGNAL）

	void valueChanged(int value);	//参数为当前滑动条所对应的数值,可用value函数作为参数

三、需求分析

（1）准备素材图片，从某张照片截取一部分

（2）当滑块移动到不正确的位置时，自动回到起点

（3）图片的截取部分，如何随着跟着滑块一起滑动

（4）滑块样式设计，包括自定义滑块，滑块滑过区域，滑块未滑过区域

四、解决方案

（1）使用特定的截图工具，或者直接使用ppt自带截取功能，如下图所示。

（2）使用滑块释放信号（SIGNAL），当滑块值不满足范围时，设置滑块值为0（返回起始位置）

• 连接释放信号（SIGNAL）和自定义验证槽函数（SLOT）

	connect(this->slider,SIGNAL(sliderReleased()),this,SLOT(judgeSuccess()));

• 自定义槽函数实例（若滑块移动值不为滑块设定最大值时，滑块回到起点）

void sliderscreen::judgeSuccess()
{
    if(this->slider->value() != MAX_VALUE)
    {
        this->slider->setValue(0);	//设置滑块移动值为 0（回到起点）
    }
}

（3）创建定时器实时检测滑块释放移动，当滑块移动时，标签图片也跟着水平移动

• 创建定时器，连接槽函数，设置定时器倒计时为0（实时检测）

	this->movetime = new QTimer();
    connect(this->movetime,SIGNAL(timeout()),this,SLOT(picMove()));
    this->movetime->start(0);

• 定时器槽函数实现，移动时标签图片的垂直方向不变，水平方向与滑块值线性相关

void sliderscreen::picMove()
{
    this->label2->move(this->slider->value()*0.7,this->label2->y());
}

（4）通过QSS样式表，设计滑块样式，滑块滑过区域样式，滑块未滑过区域样式

• 凹槽样式：QSlider::groove:horizontal
• 滑块样式：QSlider::handle:horizontal
• 滑块滑过区域：QSlider::sub-page:horizontal
• 各参数含义：width（宽度）、heigh（高度）、margin（边距）、border-image（图片）

	this->slider->setStyleSheet("QSlider::groove:horizontal{margin-top:0px;margin-bottom:-4px;border-image: url(./picture/slider3.png);} \
                                 QSlider::handle:horizontal{width:60px; height:35px; border-image:url(./picture/slider.png);} \
                                 QSlider::sub-page:horizontal{border-image: url(./picture/slider2.png);}");

五、完整源码

1.main.cpp

#include "sliderscreen.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    
    sliderscreen w;
    w.show();

    return a.exec();
}

2.sliderscreen.h

#ifndef SLIDERSCREEN_H
#define SLIDERSCREEN_H

#include <QWidget>
#include <QSlider>
#include <QLabel>
#include <QTimer>

class sliderscreen : public QWidget
{
    Q_OBJECT
public:
    explicit sliderscreen(QWidget *parent = 0);
    QSlider *slider;
    QLabel *label1,*label2,*label3;
    QTimer *movetime;
signals:

public slots:
    void judgeSuccess();
    void picMove();
};

#endif // SLIDERSCREEN_H

3.sliderscreen.cpp

#include <QDebug>
#include <QMessageBox>
#include "sliderscreen.h"

sliderscreen::sliderscreen(QWidget *parent) : QWidget(parent)
{
    //设置窗口大小
    this->setFixedSize(400,280);

    //创建滑块并初始化
    this->slider = new QSlider(Qt::Horizontal,this);    //水平方向滑块
    this->slider->setGeometry(-1,231,402,50);
    this->slider->setMaximum(500);
    this->slider->setPageStep(0);
    this->slider->setStyleSheet("QSlider::groove:horizontal{margin-top:0px;margin-bottom:-4px;border-image: url(./picture/slider3.png);} \
                                 QSlider::handle:horizontal{width:60px; height:35px; border-image:url(./picture/slider.png);} \
                                 QSlider::sub-page:horizontal{border-image: url(./picture/slider2.png);}");
    connect(this->slider,SIGNAL(sliderReleased()),this,SLOT(judgeSuccess()));

    //创建标签并插入图片
    this->label1 = new QLabel(this);
    this->label1->setGeometry(0,0,400,232);
    this->label1->setPixmap(QPixmap("./picture/pic1.png"));
    this->label1->setScaledContents(true);
    this->label2 = new QLabel(this);
    this->label2->setGeometry(0,59,47,51);
    this->label2->setPixmap(QPixmap("./picture/pic2.png"));
    this->label2->setScaledContents(true);

    //设置提示字体
    QFont text;
    text.setPointSize(12);
    text.setFamily("微软雅黑");
    this->label3 = new QLabel("拖动滑块验证",this);
    this->label3->setGeometry(140,216,160,80);
    this->label3->setFont(text);

    //创建定时器
    this->movetime = new QTimer();
    connect(this->movetime,SIGNAL(timeout()),this,SLOT(picMove()));
    this->movetime->start(0);
}

void sliderscreen::judgeSuccess()
{
    if(this->slider->value()<392 || this->slider->value()>398)
    {
        this->slider->setValue(0);
    }
    else
    {
        QMessageBox::information(nullptr,"温馨提示","验证成功!");
        exit(0);
    }
}

void sliderscreen::picMove()
{
    //qDebug() << this->slider->value();
    this->label2->move(this->slider->value()*0.7,this->label2->y());
}

---

总结

   以上就是【QT学习】利用QSlider制作滑块图形验证码（完整源码）的所有内容，希望大家阅读后都能有所收获！原创不易，转载请标明出处，若文章出现有误之处，欢迎读者留言指正批评！