Qt滑块图片验证码

Qt滑块图片验证码

@[toc]

（一）、控件介绍

1. 自定义随机图片
2. 滑动条滑动验证
3. 重定义验证图片
4. 抠图位置随机

（二）、效果图

1.gif 2.gif

void PuzzleWidget::setPixmap(const QString& pixmap)
{
    m_pixmap = pixmap;
    QTimer::singleShot(10, this, SLOT(onUpdatePixmap()));
}

void PuzzleWidget::onUpdatePixmap()
{
    m_offsetPoint.rx() = qBound(0, qrand() % this->width() + squarewidth + squareradius, this->width() - squarewidth - squareradius);
    m_offsetPoint.ry() = qBound(0, qrand() % this->height() + squarewidth + squareradius, this->height() - squarewidth - squareradius);
    update();
}

void PuzzleWidget::setValue(int value)
{
    m_value = qBound(0, value, this->width() - squarewidth - squareradius + m_offsetPoint.x());
    update();
}

void PuzzleWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    QPainterPath clippath;
    clippath.addRoundedRect(this->rect(), 4, 4);
    painter.setClipPath(clippath);
    const QPixmap& pixmap = QPixmap(m_pixmap).scaled(this->width(), this->height(), Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    painter.drawPixmap(0, 0, this->width(), this->height(), pixmap);

    QPainterPath cutoutpath;
    cutoutpath.setFillRule(Qt::WindingFill);
    QRect rect(m_offsetPoint, QSize(squarewidth, squarewidth));
    cutoutpath.addRoundedRect(rect, 2, 2);
    cutoutpath.addEllipse(rect.center().x() - squareradius / 2, rect.top() - squareradius + 6, squareradius, squareradius);
    QPainterPath subellipseparh;
    subellipseparh.addEllipse(rect.right() - squareradius + 6, rect.center().y() - squareradius / 2, squareradius, squareradius);
    cutoutpath -= subellipseparh;

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

    QPixmap puzzlePixmap(this->size());
    puzzlePixmap.fill(Qt::transparent);
    QPainter puzzlePainter(&puzzlePixmap);
    puzzlePainter.setRenderHints(QPainter::Antialiasing);
    puzzlePainter.setClipPath(cutoutpath);
    puzzlePainter.setPen(QPen(QColor(80, 80, 80), 2));
    puzzlePainter.setBrush(QColor(200, 200, 200, 100));
    puzzlePainter.drawPixmap(0, 0, this->width(), this->height(), pixmap);
    puzzlePainter.drawPath(cutoutpath);

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

bool PuzzleWidget::isOverlap()
{
    return qAbs(-m_offsetPoint.x() + m_value) < 5;
}

工程文件

Qt交流大会(收费群) 853086607
QQ 3246214072

在这里插入图片描述

结尾

不定期上传新作品，解答群中作品相关问题。相关外，能解答则解答。欢迎大家一起探索Qt世界