QT APP实战-图片播放器

一.前言

图片播放器每个人都有用到，鉴于此，打算再造轮子，写一个自己的图片播放器，顺便巩固所学的知识。

二.整体结构规划
把播放器划分为三个界面。
1> 主界面,也就是打开播放器看到的第一个界面主界面比较简洁，放置了一个退出按钮和一个打开图片按钮
2> 图片预览界面，这个界面用于在用户打开图片后预览缩略图
3> 图片播放界面，也就是所谓的幻灯片播放图片外加一点特效。

三.交互方式设计
主要有三个界面相互跳转，当主界面打开图片后需要转到图片预览界面。当用于在预览界面按下return 按钮需要返回主界面。这里主要有两种方式可以实现交互。
1. 利用QT信号与槽机制，当主界面转到预览界面的时候new一个预览界面并绑定一个信号当预览界面发出指定消息的时候主界面重新show而预览界面hide关于QT信号与槽的实现没有深入研究过，总体个人感觉用信号与槽来交互比较突兀虽然感觉很明了。但是这也导致信号与槽函数分布比较散乱，这里不采用该方式来交互。

2. 利用QT事件机制,事件机制是QT主要通信交互方式，不论是绘制事件还是鼠标键盘事件，QT允许用户继承并从新实现这些事件处理函数从而完成用于想达到的绘制效果。另外，QT除了系统自带的这些事件外还允许用于自定义事件。
Constant Value Description
QEvent::User 1000 User-defined event.
QEvent::MaxUser 65535 Last user event ID.
以上指定了自定义事件ID的范围从1000-65535。
用于事件处理的一系列接口：
bool IBrowserEngine::event(QEvent *pstEvent);
事件分发函数，用于只需要从新实现一下这个接口即可。
QApplication::sendEvent((m_pUpperWindow), pEvent);
事件发送函数，等到事件被处理才返回。
QApplication::postEvent((m_pUpperWindow), pEvent);
事件发送函数，把事件投放到事件队列里面，直接返回。

以上接口与WINDOWS消息机制十分类似只不过现在叫做事件循环而已。利用事件机制可以把自定义事件与系统事件的分发整个在一起，代码比较紧凑。这里采用事件机制用于交互。
四.GUI设计问题点
1.不规则按钮的实现
按钮必定是矩形的，我们不可能造一个圆形的按钮出来，图片也是一样，平常我们见到的多数不规则图片，大多数不过是PNG类型的图片经过加工处理罢了。播放器界面有三个不规则按钮，一个播放按钮，两个切换按钮，这里有两种方式可以实现不规则按钮。
1）使用png图片, 在图片处理过程中，我们可以把png图片上不需要的点扣除，扣除的部分也就是透明的部分，得到一个不规则的图片。在图片显示过程，透明的部分就是一个遮罩，把其下面部分的颜色显露出来而自身隐藏。
QT里面以上步骤表示如下：
QPixmap pix;
pix.load("./images/linux.png", ...);
setMask(pix.mask());
说明：
void QWidget::setMask ( const QBitmap & bitmap )
只有在bitmap中像素数据是1的地方才会显示出widget的相应像素来. Bitmap就是像素数据只有两个值: 0和1 (1 bit-depth, monochrome).
pix.mask()用于获取png图片的掩码，setMask执行覆盖隐藏的操作。注意：只有Png图片可以这样操作，其他格式图片没有效果。
2）利用设置掩码图片的方式，利用两张图片叠加的方式，把相同颜色部分隐藏，显示不同的部分，这就是掩码的作用。
// 掩码
m_btnMask128.load("./pic/mask128.bmp");
//设置图标
ui->m_BtnAutoPlayer->setIcon(m_StartPix);
ui->m_BtnAutoPlayer->setIconSize(QSize(BTNSTART_WIDE, BTNSTART_HIGH));
//设置掩码
ui->m_BtnAutoPlayer->setMask(QBitmap(m_btnMask128));
说明：
这里我们用了一张外围是白色里面是非白色的背景图片，对于位图只有0和1两个像素。只有在像素为1的地方才会显示widget的像素。从而达到了我们要的效果。

2.按钮凹凸效果的呈现
要实现按钮的凹凸效果比较简单，通常按钮会有三种状态，正常/按下/飘过。我们只需要在不同的状态下切换图片即可，如果想要把效果来的明显一点可以利用一个定时器把切换图片这个过程拉长一点。具体根据个人喜好。
3.实现图片切换的动画效果
在图片切换过程中，如果切换太快用于根本没有感觉，体验效果不是很好，因此加入一个动画效果。这里实现的动画效果比较简单，主要利于了void QPainter::drawPixmap(const QRectF & target, const QPixmap & pixmap, const QRectF & source)这个接口，解释一下，这个接口用于把pixmap的source区域绘制到target指定的区域。target指定的是屏幕的某个区域，而source指定的是图片的某个区域。

动画效果实现原理：利用一个定时器延缓图片切换的过程，每次定时器timeout增加要显示图片的target区域和source区域，而减小被替换图片的targert区域和source区域。随着坐标以及显示区域的缓慢变化达到了动画的效果。

需要代码的同学可以到我的资源下载。

____________The End。

QT APP实战-图片播放器相关推荐

QT制作一个图片播放器
前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔 ...
Qt 简易图片播放器
一.前言使用 Qt 制作了一个简单的图片播放器,点击 "浏览按钮" 浏览图片所在目录,目录中的所有图片缩小图标和名称会显示在左侧的图片列表中,点击列表中的图片项,可以在右侧区域的 ...
Bootstrap实战---Dplayer播放器(图片)
Bootstrap实战-Dplayer播放器(图片) 本章介绍如何利用Dplayer播放器来构建视频播放网页. <!DOCTYPE html> <html> <head& ...
Python实现一个小小的图片播放器，就是这么简单！
python实现图片播放器零.小序一.图片播放器介绍 1.功能介绍 2.用到的技术 3.图片播放效果二.主要代码 1.Python代码 2.代码下载地址零.小序 Python是一个语法简单的语 ...
[MAUI 项目实战] 音乐播放器（一）：概述与架构
系列文章将分步解读音乐播放器核心业务及代码: [MAUI 项目实战] 音乐播放器(一):概述与架构 [MAUI 项目实战] 音乐播放器(二):播放内核 [MAUI 项目实战] 音乐播放器(三):界面交 ...
android图片播放器,android案例之图片播放器
很简单的图片播放器,废话不多说了<?xml version="1.0" encoding="utf-8"?> xmlns:android=" ...
树莓派3B qt+mplayer制作音乐播放器(10)
内容树莓派3B qt+mplayer制作音乐播放器:播放.暂停.上一曲.下一曲,音量调节. 平台:树莓派+qt+mplayer 1.配置 qt安装见此: https://blog.csdn.net/ ...
图片播放器的实现1——利用Image2LCD提取图片数据并显示
以下内容源于朱有鹏嵌入式课程的学习与整理,如有侵权请告知删除. 参考内容 (1)https://xiefor100.blog.csdn.net/article/details/71941527 (2) ...
android案例之图片播放器
很简单的图片播放器,废话不多说了 <?xml version="1.0" encoding="utf-8"?> <android.suppor ...

QT APP实战-图片播放器

QT APP实战-图片播放器相关推荐

最新文章

热门文章