快捷導(dǎo)航

Qt實(shí)現(xiàn)給窗口繪制陰影的示例代碼

更新時(shí)間：2022年11月25日 09:52:11 作者：音視頻開發(fā)老舅

這篇文章主要為大家詳細(xì)介紹了Qt實(shí)現(xiàn)給窗口繪制陰影的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Qt有一定的幫助，感興趣的可以了解一下

前言

最近自定義一個(gè)消息彈框，但是沒加陰影之前，覺得有點(diǎn)扁平。然后仔細(xì)看了Qt自帶的消息彈框，發(fā)現(xiàn)是沒有加上陰影的問題。所以就在網(wǎng)上搜索怎么加陰影，有多種方法。寫這個(gè)博客的目的是記錄一下這幾種方法，并且加上我對于這些方法的理解。

具體的方法有

重載paintEvent，調(diào)用drawRect或者drawRoundedRect或者drawPath來手繪陰影
使用QGraphicsDropShadowEffect類，來繪制陰影
使用九圖拼湊法
九宮格縮放陰影法

但是不管是哪種方法，都需要設(shè)置窗口的背景透明

    this->setWindowFlags(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);

重載paintEvent法

這個(gè)方法就是重載paintEvent，然后自己設(shè)置繪圖的區(qū)域，根據(jù)陰影的大小、根據(jù)陰影的顏色，一圈一圈的去畫陰影。

然后又分有三個(gè)函數(shù)來進(jìn)行陰影的繪制

drawPath

這個(gè)函數(shù)的作用是繪制一個(gè)路線，路線可以由很多不同的曲線或者直線組成，這個(gè)可以繪制多邊形。

繪制代碼如下：

void Waiting::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
 
    // 1. 初始化一個(gè)QPainter對象用來繪制
    // 2. QPainter::Antialiasing，讓引擎盡可能的消除鋸齒
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    QColor color(0, 0, 0, 50);
    // 此處循環(huán)次數(shù)為10，目的是繪制寬度為10的陰影
    for(int i=0; i<10; i++)
    {
        // 3. 初始化一個(gè)QPainterPath對象
        QPainterPath path;
        // 4. 設(shè)置填充規(guī)則
        path.setFillRule(Qt::WindingFill);
        // 5. 添加一個(gè)矩形
        path.addRect(10-i, 10-i, this->width()-(10-i)*2, this->height()-(10-i)*2);
        // 6. 設(shè)置顏色的透明度
        color.setAlpha(150 - qSqrt(i)*50);
        painter.setPen(color);
        // 7. 繪制線路
        painter.drawPath(path);
    }
}

繪制效果如下：

Tips

drawRect和drawRoundedRect

這兩個(gè)函數(shù)分別是畫矩形陰影和畫帶圓角的陰影，除了最后繪制的時(shí)候鎖調(diào)用的函數(shù)不一樣，其余都是一樣的。drawRect是繪制矩形的，drawRoundedRect是繪制帶圓角的。

代碼如下：

void Waiting::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
 
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    QColor color(0, 0, 0, 50);
    for(int i=0; i<10; i++)
    {
        color.setAlpha(150 - qSqrt(i)*50);
        painter.setPen(color);
        // drawRect 繪制矩形
//        painter.drawRect(10-i, 10-i, this->width()-(10-i)*2, this->height()-(10-i)*2);
        // drawRoundedRect 繪制帶原角
        painter.drawRoundedRect(10-i, 10-i, this->width()-(10-i)*2, this->height()-(10-i)*2, 20, 20);
    }
}

效果圖如下：

QGraphicsDropShadowEffect方法

這個(gè)類就直接用就好了，代碼如下：

m_pEffect = new QGraphicsDropShadowEffect(m_background);
m_pEffect->setOffset(0, 0);
m_pEffect->setColor(QColor(QStringLiteral("black")));
m_pEffect->setBlurRadius(30);
m_background->setGraphicsEffect(m_pEffect);

Tips

setOffser這個(gè)是設(shè)置陰影的起始點(diǎn)位于窗口的哪個(gè)位置setBlurRadius這個(gè)是設(shè)置陰影的模糊程度，越大就越模糊

具體對比請看下圖：