Qt 透明对话框 自定义透明度

测试环境为Qt5.7x86 + VS2015

需求是在QTextEdit中导入的图片，进行双击，产生如QQ聊天时的图片放大效果；

此次选择使用Dialog作为载体，设置其属性，按照导入的图片设置其大小，自定义关闭按钮。

先准备一张png的透明关闭按钮的资源图。

代码如下：

//KsDialog.hpp

class KsDialog : public QDialog
{
    Q_OBJECT

public:
    KsDialog(QWidget *parent = Q_NULLPTR, Qt::WindowFlags f = Qt::WindowFlags());
    ~KsDialog();
    
    void SetImage(QString &imgPath);

    void mousePressEvent(QMouseEvent *event);

    void mouseMoveEvent(QMouseEvent *event);

    void paintEvent(QPaintEvent *e);

protected:
private:
    QPoint dPos;

    QLabel* m_pClose;
};



//KsDialog.cpp

KsDialog::KsDialog(QWidget *parent, Qt::WindowFlags f)
    : QDialog(parent, f)
{
    this->setWindowFlags(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);
    m_pClose = new QLabel(this);
}


KsDialog::~KsDialog()
{

}


void KsDialog::mousePressEvent(QMouseEvent *event)
{
    QPoint windowPos = this->pos();                // 获得部件当前位置
    QPoint mousePos = event->globalPos();     // 获得鼠标位置
    dPos = mousePos - windowPos;       // 移动后部件所在的位置
    QRect rectClose = m_pClose->geometry();

    if (event->button() == Qt::LeftButton)
    {
        if(dPos.x() >= rectClose.x() && dPos.x() <= rectClose.x() + rectClose.width() &&
            dPos.y() >= rectClose.y() && dPos.y() <= rectClose.y() + rectClose.height())
        {
            this->close();
        }
    }
}

void KsDialog::mouseMoveEvent(QMouseEvent *event)
{
    this->move(event->globalPos() - this->dPos);
}

void KsDialog::paintEvent(QPaintEvent *e)
{
    QPainter p(this);
    p.fillRect(rect(), QColor(192, 192, 192, 100));
}

void KsDialog::SetImage(QString &imgPath)
{
    QImage image;
    image.load(imgPath);
    setFixedSize(image.width()*1.1, image.height()*1.1);

    QLabel *pLabel = new QLabel(this);
    pLabel->setPixmap(QPixmap::fromImage(image));
    pLabel->resize(QSize(image.width(), image.height()));
    pLabel->setGeometry(image.width()*0.05, image.height()*0.05, image.width(), image.height());

    QImage imgClose;
    imgClose.load(QString(":/TestEdit/image/close.png"));
    m_pClose->setPixmap(QPixmap::fromImage(imgClose));
    m_pClose->resize(QSize(imgClose.width(), imgClose.height()));
    m_pClose->setGeometry(image.width()*1.1 - imgClose.width(),
           5, imgClose.width(), imgClose.height());
    m_pClose->raise();

}

要点：

1、FramelessWindowHint的Dialog属性可以去掉标题栏显示，引出的问题是没有标题栏，窗体就无法移动了，这里的解决办法是使用QMouseEvent事件取得按下鼠标的动作，使Dialog跟随鼠标拖拽

2、WA_TranslucentBackground属性使Dialog透明，Demo中使用paintEvent的实现填充QColor指定的背景色

3、显示图片时，设置窗体大小，长宽各增加10%，留一部分的边缘半透明，图片会更明显

具体效果如下图