當前位置:網站首頁>Qt給靜態屏保加上粒子特效

Qt給靜態屏保加上粒子特效

2022-01-27 13:10:12 菜鳥清清

最近正在開發一個系統,有時我覺得常用的靜態屏保頁面太單調了,想加入一些動態的要素。然後就發現了Qt有一個粒子特效的系統,但是需要用到Qml,而我的系統是用QWidget開發的,沒辦法直接用Qml…

但是Qt也想到了這一點,官方提供了一個叫做quickwidgets的模塊,通過它就可以在QWidgets裏嵌入動態的Qml頁面。

基於此,我們開始逐步改寫。

一、添加quickwidgets模塊

QT       += quickwidgets

二、編寫qml頁面
這裏采用的方案是在qml中顯示原來的靜態圖片,並在其上添加粒子特效。使用粒子特效需引用QtQuick.Particles這個包。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
import QtGraphicalEffects 1.0

Rectangle {
    
    id: root
    x: 0                  // 右上角橫坐標,缺省為0
    y: 0                  // 右上角縱坐標,缺省為0
    width: 800            // 寬度,缺省為0,其子對象仍會顯示(相對於0)
    height: 1280          // 高度,缺省為0,其子對象仍會顯示(相對於0)
    z: 1                  // 顯示順序,同一層的元素,越大越在上面

    Image {
    
        id: bg
        source: "qrc:/images/screen"
        width: parent.width
        height: parent.height
        visible: true
    }

    ParticleSystem {
    
        id: particleSystem
    }

    Emitter {
    
        id: emitter
        anchors.centerIn: parent
        x: 0
        y: 400
        width: 800
        height: 880
        system: particleSystem
        emitRate: 4
        lifeSpan: 2000
        lifeSpanVariation: 500
        size: 5
        endSize: 20
        sizeVariation: 5
    }

    ImageParticle {
    
        system: particleSystem
        source: "qrc:/images/star"
        color: "#0D9EED"
        colorVariation: 0.6
        rotation: 15
        rotationVariation: 5
        rotationVelocity: 45
        rotationVelocityVariation: 15
        entryEffect: ImageParticle.Scale
    }
}

代碼搭建在Rectangle上,它類似於QWidgets中的label,此處不能使用Window,否則qml頁面將在獨立的窗口中顯示。
Image控制圖片顯示,相當於setIcon。長度和寬度都選擇填滿。
聲明了一個ParticleSystem並命名,在其上添加了發射器Emitter和圖像粒子ImageParticle,通過二者的共同作用,構造初想要的粒子效果。
此處的效果為星光在畫面隨機比特置緩慢亮起,又緩慢黯淡。

三、將qml嵌入QWidgets中
首先將需要的qml放入我們的qrc資源中。
然後在屏保頁頭文件中引入:

#include <QtQuickWidgets>

最後在原來屏保畫面的比特置,用如下代碼替換。

    QQuickWidget *m_quickWidget = new QQuickWidget(this);
    QUrl source("qrc:/screen.qml");
    m_quickWidget -> setSource(source);

最後調試,如果環境配置正確,就可以看到動態的顯示效果了。

版權聲明
本文為[菜鳥清清]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201271310116068.html

隨機推薦