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

qt5.3 实现量角器

  • 2017年11月03日 10:34
  • 63KB
  • 下载

Qt内置控件概览

Qt提供了大量的内建控件及通用对话框可满足程序员的绝大部分要求。本节中我们将对这些控件和对话框作一个大概的介绍。我们将在后面的章节中对部分控件作详细介绍:在第三章将介绍QMenuBar,QToolBa...
  • cibiren2011
  • cibiren2011
  • 2013年11月20日 16:28
  • 1304

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

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

QML 动画特效之撞墙反弹

1.在讲此效果看需要在创建项目时选择qtquick; 2. 源码如下 import QtQuick 2.0 Rectangle { width: 80 height: 8...
  • li235456789
  • li235456789
  • 2016年01月03日 22:47
  • 1286

【QT】QML的粒子系统及图形渲染

在QML中,有两种特效可以让UI更加绚丽多彩,一种是粒子系统,另一种是图形渲染。 下面先来看一下粒子系统。 粒子系统主要有四个QML类型,分别是ParticleSystem、Emitter、Parti...
  • iEearth
  • iEearth
  • 2015年03月20日 16:03
  • 2059

qml学习----------------(progressBar)进度条的学习

今天学习了进度条的使用。查了下qt的官方文档,进度条主要有以下的属性 hovered : bool indeterminate : bool maximumValue : real minim...
  • u011619422
  • u011619422
  • 2015年09月22日 10:31
  • 2462

QML 自定义进度条样式

QML 自定义进度条样式 修改的进度条样式,可以在此基础上根据期望改成自己喜欢的样子。 效果如下: (应该是动态图,如果不是,那就奇怪了) 代码比较长,这里粘贴一份,同时会上传一...
  • lys211
  • lys211
  • 2015年03月28日 10:47
  • 3058

QML 自定义进度条样式

  • 2015年03月28日 10:52
  • 1KB
  • 下载

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

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

QML 实现3D进度条(伪3D)

QML利用DropShadow实现的3D效果的进度条
  • chyuanrufeng
  • chyuanrufeng
  • 2017年10月10日 21:50
  • 146
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt用qml实现简单的粒子效果
举报原因:
原因补充:

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