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版本的居然好了。。。问题的解决方式太过于诡异,真让人哭笑不得。在此记过,希望对后来人有帮助。

为子部件添加阴影比较简单,使用如下方式:

QGraphicsDropShadowEffect *shadow_effect = new QGraphicsDropShadowEffect(this);

shadow_effect->setOffset(-5, 5);

shadow_effect->setColor(Qt::gray);

shadow_effect->setBlurRadius(8);

network_group_box->setGraphicsEffect(shadow_effect);

效果如下:

时间: 2024-10-13 07:30:17

Qt之阴影边框(转)的相关文章

QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)

QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg(this); dlg.exec(); 如果不加this,则会在任务管理器里面产生一个新的EXE. 3.如果对话框的标题是自定义,不想使用系统的标题,这时候需要在代码中加入: setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint ); setAttr

Qt之圆角阴影边框

Qt的主窗体要做出类似WIN7那种圆角阴影边框,这一直是美工的需求. 这里是有一些门道的,尤其是,这里藏着一个很大的秘密. 这个秘密是一个QT的至少横跨3个版本,存在了2年多的BUG... https://bugreports.qt-project.org/browse/QTBUG-17548 ok,看完这个BUG的应急解决办法,然后你再需加上如下代码例子,就可见效了 void MainWindow::paintEvent(QPaintEvent *event){    QPainterPath

IOS UIView圆角,阴影,边框,渐增光泽

圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView.layer.shadowColor = [[UIColor blackColor] CGColor];sampleView.layer.shadowOffset = CGSizeMake(3.0f, 3.0f); // [水平偏移, 垂直偏移]sampleView.layer.shadowOpaci

阴影边框

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

纯CSS实现漂亮圆角阴影边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[荐]纯CSS实现漂亮圆角阴影边框_潜水射

Qt QGroupBox StyleSheet 边框设置

/**************************************************************************** * Qt QGroupBox StyleSheet 边框设置 * 声明: * 之前陈颖奇问到这个效果要怎么做出来,查了点资料后直接给他了,自己没有 * 进行相关测试,现在貌似自己要用到这个功能,于是再次查资料并自己验证其功能 * 效果. * * 2015-12-25 深圳 南山平山村 曾剑锋 *************************

【CSS】圆角阴影边框CSS

.someClassName { width:300px; display: inline-block; padding: 5px 10px 6px; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba

【Qt】QLabel之动态阴影边框

效果如下: 实现思路参考了下面的文章: Qt 之 QPropertyAnimation 该文章是自定义属性alpha,原理类似,代码如下: //在头文件加入 Q_PROPERTY(int iBorderRadius READ iBorderRadius WRITE setBorderRadius) //自定义属性修改QLable的边框,以达到动画效果 private: int iBorderRadius() const; void setBorderRadius(const int radius

Qt窗口的阴影边框

将窗口设置为透明(setAttribute(Qt::WA_TranslucentBackground);) 然后重载paintEvent: void MyWidget::paintEvent(QPaintEvent *event){ QPainterPath path; path.setFillRule(Qt::WindingFill); path.addRect(10, 10, this->width() - 20, this->height() - 20); QPainter painte