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

测试环境为Qt5.7x86 + VS2015

 

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

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

 

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

代码如下：

 1 //KsDialog.hpp
 2 
 3 class KsDialog : public QDialog
 4 {
 5     Q_OBJECT
 6 
 7 public:
 8     KsDialog(QWidget *parent = Q_NULLPTR, Qt::WindowFlags f = Qt::WindowFlags());
 9     ~KsDialog();
10     
11     void SetImage(QString &imgPath);
12 
13     void mousePressEvent(QMouseEvent *event);
14 
15     void mouseMoveEvent(QMouseEvent *event);
16 
17     void paintEvent(QPaintEvent *e);
18 
19 protected:
20 private:
21     QPoint dPos;
22 
23     QLabel* m_pClose;
24 };
25 
26 
27 
28 //KsDialog.cpp
29 
30 KsDialog::KsDialog(QWidget *parent, Qt::WindowFlags f)
31     : QDialog(parent, f)
32 {
33     this->setWindowFlags(Qt::FramelessWindowHint);
34     this->setAttribute(Qt::WA_TranslucentBackground);
35     m_pClose = new QLabel(this);
36 }
37 
38 
39 KsDialog::~KsDialog()
40 {
41 
42 }
43 
44 
45 void KsDialog::mousePressEvent(QMouseEvent *event)
46 {
47     QPoint windowPos = this->pos();                // 获得部件当前位置
48     QPoint mousePos = event->globalPos();     // 获得鼠标位置
49     dPos = mousePos - windowPos;       // 移动后部件所在的位置
50     QRect rectClose = m_pClose->geometry();
51 
52     if (event->button() == Qt::LeftButton)
53     {
54         if(dPos.x() >= rectClose.x() && dPos.x() <= rectClose.x() + rectClose.width() &&
55             dPos.y() >= rectClose.y() && dPos.y() <= rectClose.y() + rectClose.height())
56         {
57             this->close();
58         }
59     }
60 }
61 
62 void KsDialog::mouseMoveEvent(QMouseEvent *event)
63 {
64     this->move(event->globalPos() - this->dPos);
65 }
66 
67 void KsDialog::paintEvent(QPaintEvent *e)
68 {
69     QPainter p(this);
70     p.fillRect(rect(), QColor(192, 192, 192, 100));
71 }
72 
73 void KsDialog::SetImage(QString &imgPath)
74 {
75     QImage image;
76     image.load(imgPath);
77     setFixedSize(image.width()*1.1, image.height()*1.1);
78 
79     QLabel *pLabel = new QLabel(this);
80     pLabel->setPixmap(QPixmap::fromImage(image));
81     pLabel->resize(QSize(image.width(), image.height()));
82     pLabel->setGeometry(image.width()*0.05, image.height()*0.05, image.width(), image.height());
83 
84     QImage imgClose;
85     imgClose.load(QString(":/TestEdit/image/close.png"));
86     m_pClose->setPixmap(QPixmap::fromImage(imgClose));
87     m_pClose->resize(QSize(imgClose.width(), imgClose.height()));
88     m_pClose->setGeometry(image.width()*1.1 - imgClose.width(),
89            5, imgClose.width(), imgClose.height());
90     m_pClose->raise();
91 
92 }

要点：

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

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

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

 

具体效果如下图

 

posted @ 2017-05-16 17:06  Coder-Tex  阅读(1540)  评论(0)  编辑  收藏  举报