Qt用qml实现简单的粒子效果

原创 2016年08月28日 23:25:39

最终运行效果:

涉及到的Qt知识点: 事件:鼠标事件,键盘事件,Paint事件,以及图片遮罩,定时器

新建一个空的qmake工程, loginDlg, 找一个带透明背景的png图片作为背景图

建一个重载于QWidget的类,然后在构造的时候将图形加载并处理好,实现paintEvent函数,进行图形的绘制

需要理解的是Mask。 Mask怎么讲呢?做了一张图片,简单直观地了解下Mask:


重载的类:

.h

#ifndef LOGINDLG_H

#define LOGINDLG_H

#include <QLabel>

#include <QWidget>

 

class loginDlg : public QWidget

{

    Q_OBJECT

public:

    explicit loginDlg(QWidget *parent = 0);

 

protected:

    // 重载函数 响应鼠标事件 用于界面拖动

    virtual void mousePressEvent(QMouseEvent *event);

    virtual void mouseMoveEvent(QMouseEvent *event);

 

    // 实现键盘事件

    virtual void keyPressEvent(QKeyEvent *event);

 

    // 重绘

    virtual void paintEvent(QPaintEvent *event);

 

private slots:

    void showtime();

 

private:

    QPoint m_ptDrag;

    QLabel *m_pLabel;

    QPixmap m_pixMap;

};

 

#endif // LOGINDLG_H


.cpp

#include "logindlg.h"

#include <QTime>

#include <QTimer>

#include <QEvent>

#include <QGridLayout>

#include <QBitmap>

#include <QMouseEvent>

#include <QPainter>

 

loginDlg::loginDlg(QWidget *parent) : QWidget(parent)

{

    setWindowFlags(Qt::FramelessWindowHint);

    QPalette p=palette();

    p.setColor(QPalette::WindowText,Qt::green);

    setPalette(p);

 

    m_pLabel =new QLabel;

    m_pLabel->setStyleSheet("font-size:56px;color:blue");

 

    QGridLayout *mainLayout=new QGridLayout(this);

    mainLayout->addWidget(m_pLabel,0,0,Qt::AlignHCenter);

 

    m_pixMap.load(":/Res/login.png",0,

             Qt::AvoidDither|Qt::ThresholdDither|

             Qt::ThresholdAlphaDither);

 

    resize(m_pixMap.size());

 

    // 以png图片为遮罩,遮罩外面的图就进行删除

    // 最终实现了不规则图形

    setMask(QBitmap(m_pixMap.mask()));

 

    QTimer *timer=new QTimer;   // 定时器

 

    // 到指定时间间隔后 触发timeout信号 响应showtime槽函数

    connect(timer,SIGNAL(timeout()),this,SLOT(showtime()));

 

    timer->start(10);// 启动定时器,timeout=10 即10毫秒触发一次信号

}

 

// 重载父类的虚函数

void loginDlg::mousePressEvent(QMouseEvent *event)

{

    if(event->button()==Qt::LeftButton)

    {

        m_ptDrag=event->globalPos()-frameGeometry().topLeft();

        event->accept();

    }

    else if(event->button()==Qt::RightButton)

    {

        close();    // 右键关闭软件

    }

}

 

 

void loginDlg::mouseMoveEvent(QMouseEvent *event)

{

    move(event->globalPos()- m_ptDrag);

    event->accept();

}

 

void loginDlg::paintEvent(QPaintEvent *event)

{

    QPainter painter(this);

    painter.drawPixmap(0, 0, QPixmap(":/Res/login.png"));

}

 

 

void loginDlg::keyPressEvent(QKeyEvent *event)

{

    if(event->key() == Qt::Key_Return &&

            (event->modifiers() &Qt::ControlModifier)&&

            (event->modifiers()&Qt::ShiftModifier))

    {

        close();

    }

    else if(Qt::Key_Q == event->key())

    {

        close();

    }

}

 

 

void loginDlg::showtime()

{

    QTime time=QTime::currentTime();

    m_pLabel->setText(time.toString("A hh:mm:ss"));

}



然后,我们在main函数中调用并显示它即可

#include <QApplication>

#include <QWidget>

#include <QVBoxLayout>

#include <QTextEdit>

 

#include "logindlg.h"

 

int main(int argc, char* argv[])

{

    QApplication app(argc, argv);

 

    loginDlg* pW = new loginDlg();

 

    pW->show();

 

    return app.exec();

}

 


若在Qt中,使用资源文件,比如图片等,若无法显示,首先考虑使用的图片路径是否正确。可先采用绝对路径作测试,若绝对路径可以正常显示,则再改为相对路径。

在工程文件中,添加一个Qt Resource的资源库,然后再在库中添加图片,复制此图片的路径,即为相对路径

比如:获取图片Image的路径三种方式:

(相对路径) qrc:/res/other/256-1.png

(网络路径) http://www.qzher.com/onlyfortest-not-exist.png
(绝对路径) file:///D:/qzher/abc.png

源码下载: http://download.csdn.net/detail/sinat_35523212/9603234


Linux下,基于Qt5.7, 若Windows下报错,可将中文注释删除即可。
此为QtCreate之Bug

版权声明:更多文件,请访问 qzher.com 致力于良心IT培训,深圳QQ群:326023167

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Qt Quick里的图形效果(Graphical Effects)

Graphical Effects ,姑且叫作图形效果吧。它提供了 Blend 、 Color 等好几类效果,有些类别下面又有多种不同的效果……在界面引入图形效果,能够让我们的UI更具吸引力……...
  • foruok
  • foruok
  • 2015年01月14日 07:07
  • 9809

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

运用QML制作圆形进度条效果

QML中原声的进度条为水平或垂直的直线型进度条,可以用ProgressBar配合style: ProgressBarStyle{}进行实现,要显示圆形或扇形进度,就要用画布进行实现,代码如上。...

分享多个基于QML/Opengles的炫彩效果

第一个基于ListView实现的特性选择影片浏览与进入详情的效果
  • Esonpo
  • Esonpo
  • 2014年07月21日 15:49
  • 2122

Qt Quick里的图形效果——渐变(Gradient)

介绍 Qt Quick 图形效果里的三种渐变效果:LinearGradient、ConicalGradient和RadialGradient……...
  • foruok
  • foruok
  • 2015年01月28日 07:18
  • 9177

Qt Quick里的图形效果:阴影(Drop Shadow)

这次来看看 Qt Quick里的 DropShow(阴影) 和 InnerShadow(内阴影) 怎么使用……...
  • foruok
  • foruok
  • 2015年04月01日 07:33
  • 8445

Qt用qml实现简单的粒子效果

粒子系统,一直是各大游戏引擎标配的一个模块 粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术,而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。 经常使用粒子系...

Qt Quick里的粒子系统

一个使用 Qt Quick 粒子系统的简单示例……
  • foruok
  • foruok
  • 2015年01月04日 07:26
  • 9185
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt用qml实现简单的粒子效果
举报原因:
原因补充:

(最多只允许输入30个字)