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

重拾女人心

重拾女人心

2020-06-30

先看一下实现效果:

使用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_OBJECTpublic:    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_OBJECTpublic:    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();}

扫码二维码

获取更多精彩

猜您喜欢

精彩推荐

粤ICP备16095388号-1