-
UID:110085
-
- 注册时间2010-12-21
- 最后登录2024-05-01
- 在线时间3538小时
-
- 发帖2743
- 搜Ta的帖子
- 精华2
- 金钱32753
- 威望3373
- 贡献值590
- 好评度3391
-
访问TA的空间加好友用道具
|
现在的web发展越来越快,很多流行的布局样式,都是从web开始的,写惯了Qt widgets 项目,很多时候想改进一下现有的人机交互,尤其是在现有的按钮上加一些动画的效果,例如鼠标移上去变大,移开还原。 Qt编写自定义控件还是非常方便和非常强大的,数量掌握Qpainter的各种绘制,自定义任意控件几乎都不是难题,只有想不到,没有做不到。贴一张个人认为做的比较炫的UI界面:如果工控项目的界面能够做到这种程序,应该可以让人眼前一亮。 运行效果图: 核心代码:- void AnimationButton::paintEvent(QPaintEvent *)
- {
- if (image.isEmpty()) {
- return;
- }
-
- QPainter painter(this);
- painter.setRenderHint(QPainter::Antialiasing);
-
- QPixmap pix(image);
- pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
-
- if (enter || leave) {
- int pixX = rect().center().x() - targetWidth / 2;
- int pixY = rect().center().y() - targetHeight / 2 - 10;
- QPoint point(pixX, pixY);
- painter.drawPixmap(point, pix);
- painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text);
- }
- }
完整代码:animationbutton.h- #ifndef ANIMATIONBUTTON_H
- #define ANIMATIONBUTTON_H
-
- /**
- * 作者:feiyangqingyun(QQ:517216493) 2016-10-22
- * 1:可设置显示的图像和底部的文字
- */
-
- #include <QWidget>
- #include <QVariant>
-
- class QPropertyAnimation;
-
- class AnimationButton : public QWidget
- {
- Q_OBJECT
- public:
- explicit AnimationButton(QWidget *parent = 0);
- ~AnimationButton();
-
- protected:
- void enterEvent(QEvent *);
- void leaveEvent(QEvent *);
- void paintEvent(QPaintEvent *);
-
- private:
- bool enter; //是否进入
- bool leave; //是否离开
- int pixWidth; //图片宽度
- int pixHeight; //图片高度
- int oldWidth; //图片旧宽度
- int oldHeight; //图片旧高度
-
- QPropertyAnimation *enterAnimation; //进入动画
- QPropertyAnimation *leaveAnimation; //离开动画
-
- int targetWidth; //目标宽度
- int targetHeight; //目标高度
- QString text; //显示文字
- QString image; //图像路径
-
- private slots:
- void enterImageChanged(QVariant index);
- void leaveImageChanged(QVariant index);
-
- public slots:
- //设置显示的文字
- void setText(QString text);
- //设置显示的图像
- void setImage(QString image);
- };
-
- #endif // ANIMATIONBUTTON_H
animationbutton.cpp- #include "animationbutton.h"
- #include "qpainter.h"
- #include "qpropertyanimation.h"
- #include "qdebug.h"
-
- AnimationButton::AnimationButton(QWidget *parent) : QWidget(parent)
- {
- enter = true;
- leave = false;
- pixWidth = 0;
- pixHeight = 0;
- oldWidth = 0;
- oldHeight = 0;
-
- enterAnimation = new QPropertyAnimation(this, "");
- enterAnimation->setStartValue(0);
- enterAnimation->setEndValue(5);
- enterAnimation->setDuration(200);
- connect(enterAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(enterImageChanged(QVariant)));
-
- leaveAnimation = new QPropertyAnimation(this, "");
- leaveAnimation->setStartValue(0);
- leaveAnimation->setEndValue(5);
- leaveAnimation->setDuration(200);
- connect(leaveAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(leaveImageChanged(QVariant)));
- }
-
- AnimationButton::~AnimationButton()
- {
- delete enterAnimation;
- delete leaveAnimation;
- }
-
- void AnimationButton::enterEvent(QEvent *)
- {
- enter = true;
- leave = false;
- pixWidth = pixWidth - 25;
- pixHeight = pixHeight - 25;
- enterAnimation->start();
- }
-
- void AnimationButton::leaveEvent(QEvent *)
- {
- enter = false;
- leave = true;
- pixWidth = oldWidth;
- pixHeight = oldHeight;
- leaveAnimation->start();
- }
-
- void AnimationButton::paintEvent(QPaintEvent *)
- {
- if (image.isEmpty()) {
- return;
- }
-
- QPainter painter(this);
- painter.setRenderHint(QPainter::Antialiasing);
-
- QPixmap pix(image);
- pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
-
- if (enter || leave) {
- int pixX = rect().center().x() - targetWidth / 2;
- int pixY = rect().center().y() - targetHeight / 2 - 10;
- QPoint point(pixX, pixY);
- painter.drawPixmap(point, pix);
- painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text);
- }
- }
-
- void AnimationButton::enterImageChanged(QVariant index)
- {
- int i = index.toInt();
- targetWidth = pixWidth + i * 5;
- targetHeight = pixHeight + i * 5;
- update();
- }
-
- void AnimationButton::leaveImageChanged(QVariant index)
- {
- int i = index.toInt();
- targetWidth = pixWidth - i * 5;
- targetHeight = pixWidth - i * 5;
- update();
- }
-
- void AnimationButton::setImage(QString image)
- {
- this->image = image;
- QPixmap pix(image);
- pixWidth = pix.width();
- pixHeight = pix.height();
- oldWidth = pixWidth;
- oldHeight = pixHeight;
- targetWidth = pixWidth - 25;
- targetHeight = pixHeight - 25;
- update();
- }
-
- void AnimationButton::setText(QString text)
- {
- this->text = text;
- update();
- }
此自定义控件集成在QFramework中。自定义控件可执行文件下载:http://pan.baidu.com/s/1i5iCfzv QFramework简介:QFramework是一套通用的Qt程序开发框架,集成主界面布局、各种自定义控件、数据库处理、excel极速导出、数据打印、串口通信、网络通信、协议解析、全局热键、邮件发送,短信发送,百度地图调用、ffmpeg+vlc处理等功能,将常用的功能封装成类库,提供统一直观的调用接口,方便使用者使用,对应封装的库都有对应的demo程序。 QFramework基本功能:1:支持从4.7.0到5.7.0的任何Qt版本,不受版本限制。用了此框架,不会再有Qt版本不同而引起的程序编译通不过的烦恼。2:极速导出数据到excel,支持表格数据或者查询的数据,不依赖任何组件,支持任何excel、wps等表格软件版本,导出10万行数据8个字段只需要3秒完成。对导出的表格样式可自定义主标题和副标题,可对导出的数据按照指定条件红色突出显示。3:数据导出到pdf及打印功能,支持表格数据或者查询的数据,支持横向纵向打印,自动分页。4:数据分页dbapi类,只需传入表格对象,表名,翻页按钮即可。无需再写重复的方法处理翻页。5:各种自定义控件,例如开关按钮、发光按钮,仪表盘控件、音量控件、温湿度控件、仪表仪器类控件等。6:全新超级中英双拼输入法,非常适合触摸设备。7:全局热键处理。8:串口热敏打印机打印。9:qcustomplot 2D图形曲线绘制(含鼠标数据跟踪)。10:多线程邮件发送,支持多个接收邮箱。11:多线程短信发送,支持多个接收号码及长短信。12:Qffmpeg+Qvlc视频处理。13:取字模,字符转LED数据处理。14:全局日志输出类 applog,可动态挂载和卸载。15:全局程序控制类 appkey,可控制程序的使用时间、运行时间、设备数量限制等。16:封装百度地图调用接口,支持设备标注、路线查询、位置显示等。17:自动清理程序早期数据类 cleanapi,传入要清理的数据库表名,执行间隔,保留的最大记录数即可。这样保证了整个系统存储的都是最新的数据。18:NTP校时服务程序。19:全局截图处理,可以很方便的直接在ARM上对程序进行截图。20:程序存活检测功能 applive,通过udp通信实时发送心跳命令,这样可以保证程序7*24小时运行,在ARM上可采用appdog看门狗程序。21:已运行时间+当前时间+实时CPU使用率+实时内存使用率等。22:自定义程序主界面底部信息。23:Echart图表的交互使用。
|