使用QGraphicsBlurEffect实现图片背景模糊效果

先看一下实现效果：

类 QGraphicsBlurEffect 可以实现图像的模糊效果，它的相关接口主要有如下两个：

• void setBlurHints(QGraphicsBlurEffect::BlurHints hints)
• void setBlurRadius(qreal blurRadius)

setBlurHints 是设置模糊质量的函数，它的参数有如下几种：

• PerformanceHint 表明渲染性能是最重要的因素，但可能会降低渲染质量。（默认参数）
• QualityHint 表明渲染质量是最重要的因素，但潜在的代价是降低性能。
• AnimationHint 表示模糊半径将是动画的，暗示实现可以保留一个源的模糊路径缓存。如果源要动态更改，则不要使用此提示。

setBlurRadius 设置模糊半径，半径越大，模糊效果越明显，默认为5。

完整代码如下：

头文件：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class QSlider;
class QGraphicsBlurEffect;
class ImageWidget : public QWidget
{
    Q_OBJECT

public:
    ImageWidget(QWidget* parent = nullptr);
    ~ImageWidget();

    void setPixmap(const QPixmap& pixmap);

protected:
    void paintEvent(QPaintEvent* event) override;

private:
    QPixmap m_pixmap;
};

// ==========================================================
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);
    ~Widget();

private:
    ImageWidget* m_pImageWidget = nullptr;
    ImageWidget* m_pEffectImageWidget = nullptr;
    QGraphicsBlurEffect* m_pBlurEffect = nullptr;

protected:
    virtual void resizeEvent(QResizeEvent *event) override;

private slots:
    void onChangeButtonClicked(void);
    void onChangedSlder(int value);
};

#endif // WIDGET_H

源文件：

#include "widget.h"
#include "UICustomSingleControl/UICustomImageViewer.h"
#include <QVBoxLayout>
#include <QPainter>
#include <QGraphicsBlurEffect>
#include <QPushButton>
#include <QFileDialog>
#include <QSlider>
#include "CustomCombineControl/UICustomIntControl.h"

ImageWidget::ImageWidget(QWidget* parent)
    :QWidget(parent)
{

}

ImageWidget::~ImageWidget()
{

}

void ImageWidget::setPixmap(const QPixmap& pixmap)
{
    m_pixmap = pixmap;
    this->update();
}

void ImageWidget::paintEvent(QPaintEvent* event)
{
    QWidget::paintEvent(event);

    QPainter painter(this);
    if (!m_pixmap.isNull())
        painter.drawPixmap(this->rect(), m_pixmap);
}

// ==========================================================
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QVBoxLayout* layout = new QVBoxLayout(this);
    layout->setMargin(0);
    layout->setSpacing(10);
    layout->addSpacing(50);

    m_pImageWidget = new ImageWidget;
    QPixmap pixmap("./t2.jpg");
    m_pImageWidget->setPixmap(pixmap);
    m_pImageWidget->setFixedSize(150, 150);
    layout->addWidget(m_pImageWidget, 0, Qt::AlignTop | Qt::AlignHCenter);

    QPushButton* pChangedButton = new QPushButton(tr("Change Image"));
    layout->addWidget(pChangedButton, 0, Qt::AlignTop | Qt::AlignHCenter);
    QObject::connect(pChangedButton, &QPushButton::clicked, this, &Widget::onChangeButtonClicked);

    layout->addStretch();

    UICustomIntControl *pIntSlider = new UICustomIntControl;
    pIntSlider->setRangeValue(1, 200);
    pIntSlider->setCurrentValue(50);
    pIntSlider->setTagText(tr("Radius: "));
    pIntSlider->setColumnWidth(0, 80);
    pIntSlider->setStyleSheet("background: transparent;");
    layout->addWidget(pIntSlider);
    layout->addSpacing(30);
    QObject::connect(pIntSlider, &UICustomIntControl::valueChanged, this, &Widget::onChangedSlder);

    // Effect
    m_pEffectImageWidget = new ImageWidget(this);
    m_pEffectImageWidget->setPixmap(pixmap);
    m_pBlurEffect = new QGraphicsBlurEffect;
    m_pBlurEffect->setBlurRadius(50);
    m_pBlurEffect->setBlurHints(QGraphicsBlurEffect::PerformanceHint);
    m_pEffectImageWidget->setGraphicsEffect(m_pBlurEffect);

    pChangedButton->raise();
    m_pImageWidget->raise();
    pIntSlider->raise();
}

Widget::~Widget()
{

}

void Widget::onChangeButtonClicked(void)
{
    QString fileName = QFileDialog::getOpenFileName(this, "Open Image", "./");
    if (fileName.isEmpty())
        return;

    QPixmap pixmap(fileName);
    m_pImageWidget->setPixmap(pixmap);
    m_pEffectImageWidget->setPixmap(pixmap);
}

void Widget::onChangedSlder(int value)
{
    m_pBlurEffect->setBlurRadius(value);
    m_pBlurEffect->update();

    m_pEffectImageWidget->update();
}

void Widget::resizeEvent(QResizeEvent *event)
{
    m_pEffectImageWidget->setGeometry(0, 0, this->width(), this->height());
    return QWidget::resizeEvent(event);
}

这里关键代码如下：

m_pEffectImageWidget->setGraphicsEffect(m_pBlurEffect);

main.cpp

#include "widget.h"
#include <QApplication>
#include "UICustomCore/CustomStyleConfig.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    g_StyleConfig->init();

    Widget w;
    w.resize(400, 600);
    w.show();

    return a.exec();
}

不会飞的纸飞机

扫一扫二维码，了解我的更多动态。