Qt之阴影边框(转)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文地址：http://blog.sina.com.cn/s/blog_a6fb6cc90101eoc7.html

阴影边框很常见，诸如360以及其他很多软件都有类似效果，了解CSS3的同学们应该都知道box-shadow，它就是来设定阴影效果的，那么Qt呢？看过一些资料，说是QSS是基于CSS2的，既然如此，box-shadow是基于CSS3的！那么Qt定然就用不了！

搜了一些资料，每张图片都做成阴影效果的固然不可能，直接舍弃（即使可以，也不采纳）。如果实时的去画图，效率太低，最后选择了拼图的方式！

效果如下：

左上角、左下角、右上角、右下角、上、下、左、右，这几个方向都绘制对应的图即可！

#include "shadow_widget.h"

ShadowWidget::ShadowWidget(QWidget *parent)

: QDialog(parent)

{

setWindowFlags(Qt::FramelessWindowHint | Qt::Dialog);

setAttribute(Qt::WA_TranslucentBackground);

}

ShadowWidget::~ShadowWidget()

{

}

void ShadowWidget::paintEvent(QPaintEvent *event)

{

QPainter painter(this);

this->drawShadow(painter);

painter.setPen(Qt::NoPen);

painter.setBrush(Qt::white);

painter.drawRect(QRect(SHADOW_WIDTH, SHADOW_WIDTH, this->width()-2*SHADOW_WIDTH, this->height()-2*SHADOW_WIDTH));

}

void ShadowWidget::drawShadow(QPainter &painter)

{

//绘制左上角、左下角、右上角、右下角、上、下、左、右边框

QList pixmaps;

pixmaps.append(QPixmap(":/shadow/shadow_left"));

pixmaps.append(QPixmap(":/shadow/shadow_right"));

pixmaps.append(QPixmap(":/shadow/shadow_top"));

pixmaps.append(QPixmap(":/shadow/shadow_bottom"));

pixmaps.append(QPixmap(":/shadow/shadow_left_top"));

pixmaps.append(QPixmap(":/shadow/shadow_right_top"));

pixmaps.append(QPixmap(":/shadow/shadow_left_bottom"));

pixmaps.append(QPixmap(":/shadow/shadow_right_bottom"));

painter.drawPixmap(0, 0, SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[4]);

painter.drawPixmap(this->width()-SHADOW_WIDTH, 0, SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[5]);

painter.drawPixmap(0,this->height()-SHADOW_WIDTH, SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[6]);

painter.drawPixmap(this->width()-SHADOW_WIDTH, this->height()-SHADOW_WIDTH, SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[7]);

painter.drawPixmap(0, SHADOW_WIDTH, SHADOW_WIDTH, this->height()-2*SHADOW_WIDTH, pixmaps[0].scaled(SHADOW_WIDTH, this->height()-2*SHADOW_WIDTH));

painter.drawPixmap(this->width()-SHADOW_WIDTH, SHADOW_WIDTH, SHADOW_WIDTH, this->height()-2*SHADOW_WIDTH, pixmaps[1].scaled(SHADOW_WIDTH, this->height()- 2*SHADOW_WIDTH));

painter.drawPixmap(SHADOW_WIDTH, 0, this->width()-2*SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[2].scaled(this->width()-2*SHADOW_WIDTH, SHADOW_WIDTH));

painter.drawPixmap(SHADOW_WIDTH, this->height()-SHADOW_WIDTH, this->width()-2*SHADOW_WIDTH, SHADOW_WIDTH, pixmaps[3].scaled(this->width()-2*SHADOW_WIDTH, SHADOW_WIDTH));

}

写一个公共的类，如果窗口要实现阴影效果直接继承就行了！SHADOW_WIDTH为阴影边框的像素，可以根据自己的需求自由调节！

也可使用QGraphicsDropShadowEffect来实现。。。

更多参考：

Qt之再谈阴影边框.

前面就窗口阴影已经写过一篇博客，使用九宫格的思路实现的，在我看来，凡是用程序能实现的尽量不要使用图片代替（在保证效率的前提下），今天再次分享关于我的一些小见解！

先看效果：

窗口阴影任意调节，包括阴影像素、是否圆角等。

直接上代码：

void DropShadowWidget::paintEvent(QPaintEvent *event)

{

QPainterPath path;

path.setFillRule(Qt::WindingFill);

path.addRect(10, 10, this->width()-20, this->height()-20);

QPainter painter(this);

painter.setRenderHint(QPainter::Antialiasing, true);

painter.fillPath(path, QBrush(Qt::white));

QColor color(0, 0, 0, 50);

for(int i=0; i<10; i++)

{

QPainterPath path;

path.setFillRule(Qt::WindingFill);

path.addRect(10-i, 10-i, this->width()-(10-i)*2, this->height()-(10-i)*2);

color.setAlpha(150 - qSqrt(i)*50);

painter.setPen(color);

painter.drawPath(path);

}

记得加上这行代码：setAttribute(Qt::WA_TranslucentBackground)。保证不被绘制上的部分透明，关于这行代码在一些Qt版本中会有副作用，比如：最小化后窗体子组件失去焦点等问题。具体可以看Qt的这个Bug（Widget with Qt::FramelessWindowHint and Qt::WA_TranslucentBackground stops painting after minimize/restore）。

也许有人会遇到，因为我之前一直使用的是VS集成Qt5插件（非OpenGL版本），一直存在这个问题，寻找各方面资料无果（真的很久，搞不夸张的说大半年应该是有的）。最后改换OpenGL版本的居然好了。。。问题的解决方式太过于诡异，真让人哭笑不得。在此记过，希望对后来人有帮助。