iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt模仿实现文字浮动字母的效果
  • 460
分享到

Qt模仿实现文字浮动字母的效果

2024-04-02 19:04:59 460人浏览 薄情痞子
摘要

目录前沿功能实现定时器操作文本偏移实现控件自绘总结前沿 最近可能是小视频着魔了,尤其是动画字幕效果的,身为一名技术开发人员,当然是想试一试了,哪怕只是简单的移动也是可以的~ 这不,说

前沿

最近可能是小视频着魔了,尤其是动画字幕效果的,身为一名技术开发人员,当然是想试一试了,哪怕只是简单的移动也是可以的~

这不,说干就干拿起来我的c++语言就要尝试,还好使用的Qt框架,这样是使用MFC框架写小demo,真的好困难呀!

先来看一看我实现的效果吧~

效果很简单就是文本向上移动,在移动过程中文字整体变大或缩小。

那么,我就来讲解下我是如何实现的吧!

功能实现

在实现这个文本移动的效果过程中,用到了以下几个功能:

1:定时器

2:QLabel控件自绘

定时器操作

在QWidget中提供了一个定时器操作函数,我们只需要继承就可以实现了

virtual void timerEvent(QTimerEvent *event);

使用QWidget自带的定时器操作时,就不需要new QTiemr的方式了,只需要使用int值记录当前开启定时器编号,等达到触发时间后进行处理即可。

文本偏移实现

首先在实现之前,先来讲解下主要流程是怎么回事吧!

1:定义文本移动定时器

2:每一秒触发一次,每次触发都需要创建一个新的控件用于展示内容。

3:触发后将已经展示的文本遍历方式向上整体偏移,偏移过程中会根据随机数,随机更改文本字体的大小。

4:字体变化,导致文本的宽度高度变更,用新的宽度、高度计算偏移后的位置。

在这里,我们可以对QLabel控件进行重绘,假设叫做QCustomLabel,父类是QLabel。那么我来一步一步地讲解我是如何实现定时器偏移的吧~

第一步

定义容器用于存储需要展示的文本内容,这里可以用一个简单的容器vector来记录,std::vector< std::string >m_vetContent;

第二步

定义容器用于存储已经展示过的文本控件,使用QVector来记录,QVector<QCustomLabel*> m_vetControls;

为什么第一步和第二步都是用vector记录,但是一个使用C++的,另一个使用Qt的呢?

其实在第一步与第二步存储过程中,都可以使用QVector来进行记录,有一点需要注意的是,第二步存储必须使用QVector。

为什么?因为vector与QVector存储都是先入先出的形式,我们在记录控件指针时,最先拿出的控件指针应该是后插入的数据。在QVector中从前端插入数据更为方便些,索性这两个步骤用的容器就稍微有一些差别了,你get到了吗?

第三步

触发定时器后,临时创建显示文本的控件数据,并及时存储到容器m_vetControls中,以防销毁窗口时不及时销毁指针导致的内存泄漏问题。

QCustomLabel *lab = new QCustomLabel(this);
QSize size = lab->SetTextData(m_vetContent[m_nTimerTriggerNumber], 1);
int nTop = (height() - size.height()) / 2;
lab->setGeometry(DistanceLeft, nTop, size.width(), size.height());
lab->show();
m_vetControls.push_font(lab);

使用QVector的push_font()方法,每次存储的数据都最先展示,也就是将数据存储到下标为0的位置下。

第四步

数据存储后,更新所有展示的文本控件位置,这里使用:UpdateShowRectStyle()函数进行实现哦~

for (int i = 0; i < m_vetControls.size(); i++)
{
	QCustomLabel *lab = m_vetControls[i];
	QSize size = lab->UpdateZoomStyle(bFontZoom);
	QRectF rectF = lab->geometry();
	if (nTop == 0)
	{
		nTop = lab->geometry().top();
	}
	else
	{
		nTop = nTop - size.height();
	}
	lab->move(DistanceLeft, nTop);
}
this->update();

循环遍历整个存储控件指针的数据内容,在更新位置的同时更改文本缩放大小(也就是变化字体大小),获取最新的变更位置,重新获取宽度、高度。

假设当前的高度是0时,说明是第一条数据需要变更,偏移的位置,直接是控件的高度; 假设当前的高度非0时,说明是偏移过程中的某一条数据,因为是向上偏移,所有每次计算偏移后的高度时,都需要做减法,如果是向下偏移,每次计算偏移后的高度就是做加法了。

第五步

当读写完所有的显示内容时,停止定时器操作

if (m_nTimerTriggerNumber == m_vetContent.size())
{
	killTimer(m_nTimerId);
	m_nTimerId = 0;
}

到这里,文字自动偏移的功能就实现了,接下来我们来讲一讲是如何自绘QLabel控件吧~

控件自绘

首先我们需要定义QLabel的自绘类,这里我给除了简单的框架,以后需要什么功能直接追加就可以啦~

.h 使用

#pragma once

#include <QLabel>

class QCustomLabel : public QLabel
{
	Q_OBJECT

public:
	QCustomLabel(QWidget *parent = nullptr, Qt::WindowFlags f = Qt::WindowFlags());
	~QCustomLabel();
};

.cpp 使用

#include "QCustomLabel.h"
QCustomLabel::QCustomLabel(QWidget *parent, Qt::WindowFlags f)
	: QLabel(parent, f)
{
}

QCustomLabel::~QCustomLabel()
{
}

想要实现什么功能,就只需要在这个基础上扩充就可以了。

在自绘QLabel中有两个重点

1:如何根据字体的大小固定文本区域?

2:文字闪烁效果实现

根据这两个重点来绘制QLable控件吧!

功能1:

字体的大小可以使用随机数qrand()来实现。

使用方法:

QTime time = QTime::currentTime();
qsrand(time.msec() + time.second() * 1000);
int nFontSize = qrand() % 30 + 20;

这种方式生成的随机数保证了唯一性。

根据字体大小,设置QFont的属性

QFont fontContent =this->font();
//设置:字体样式:微软雅黑
fontContent.setFamily("Microsoft YaHei");
//设置:字体大小:22
fontContent.setPixelSize(nFontSize);
//字体绑定
this->setFont(fontContent);

重点来啦!!!

设置了字体风格之后,这时候我们是可以获取到字体的高度的,但是整体的宽度是获取不到的需要动态获取。

QFontMetrics metrics(font());
int nheight = metrics.height();
//设置内容并存储文本内容
m_qsTextContent = QString::fromLocal8Bit(sText.c_str());
setFixedHeight(nheight);
this->setText(m_qsTextContent);
this->adjustSize();
int nwidth = this->width();
//设置自定义QLable控件的宽度以及高度
QSize size(nwidth , nheight);

//开启定时器
m_nTimerId = startTimer(100);
return size;

功能2:

文字颜色渐变展示。

这个功能很简单,核心就是实时的更新QColor值,这里我使用了随机数使每次生成的颜色值都不相同

QFontMetrics metrics(font());
int x = 0;
int y = (height() + metrics.ascent() - metrics.descent()) / 2;
QColor color;
for (int i = 0; i < m_qsTextContent.size(); i++)
{
	//设置:色调(H)、饱和度(S)、亮度(Y)
	int nIndex = (m_nStep + i) % 16;
	color.setHsv((15 - nIndex) * 16, 255, 191);
	painter->setPen(color);
	//单个字符绘制
	painter->drawText(x, y, QString(m_qsTextContent[i]));
	//计算下一个字符的x坐标起始点
	x += metrics.width(m_qsTextContent[i]);
}

总结

到这里,文字移动效果就已经实现了,功能比较简单,唯一的难点就在于文字风格变动时,区域的变化,只要我们了解了变化规律,位置展示还不是小菜一碟吗?

以上就是Qt模仿实现文字浮动字母的效果的详细内容,更多关于Qt文字浮动的资料请关注编程网其它相关文章!

--结束END--

本文标题: Qt模仿实现文字浮动字母的效果

本文链接: https://www.lsjlt.com/news/163493.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Qt模仿实现文字浮动字母的效果
    目录前沿功能实现定时器操作文本偏移实现控件自绘总结前沿 最近可能是小视频着魔了,尤其是动画字幕效果的,身为一名技术开发人员,当然是想试一试了,哪怕只是简单的移动也是可以的~ 这不,说...
    99+
    2024-04-02
  • Qt如何实现字幕滚动效果
    这篇文章主要介绍“Qt如何实现字幕滚动效果”,在日常操作中,相信很多人在Qt如何实现字幕滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Qt如何实现字幕滚动效果”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-02
  • Three.js+React实现3D文字悬浮效果
    目录背景效果实现资源引入DOM结构设置状态网格背景场景初始化创建材质创建文字模型创建几何体模型鼠标事件监听背景色切换后期渲染动画缩放适配双击全屏总结 背景 在 Three....
    99+
    2024-04-02
  • CSS3如何实现文字浮雕效果,镂刻效果,火焰文字
    这篇文章主要介绍了CSS3如何实现文字浮雕效果,镂刻效果,火焰文字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。要做出这个效果,首先必须知道css的一个属性:text-sha...
    99+
    2023-06-08
  • Qt实现字幕滚动效果的示例代码
    目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件五、效果演示一、项目介绍 利用QTimer实现字幕滚动功...
    99+
    2024-04-02
  • js实现文字滚动的效果
    本文实例为大家分享了js实现文字滚动的效果的具体代码,供大家参考,具体内容如下 在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果。该动画效...
    99+
    2024-04-02
  • vue实现文字滚动效果
    本文实例为大家分享了vue实现文字滚动效果的具体代码,供大家参考,具体内容如下 项目需求:系统公告,要从右忘左循环播放的牛皮广告效果。 实现: 方案一:使用定时器和CSS3的过渡属性...
    99+
    2024-04-02
  • C#实现会移动的文字效果
    本文实例为大家分享了C#实现会移动的文字效果的具体代码,供大家参考,具体内容如下 1 题目描述 (1)Form1窗体设计界面如下: (2)窗体左侧为一个靠左停靠的panel,其中包...
    99+
    2024-04-02
  • 怎么用Three.js+React实现3D文字悬浮效果
    本篇内容介绍了“怎么用Three.js+React实现3D文字悬浮效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!背景在 Thr...
    99+
    2023-06-29
  • js如何实现文字滚动的效果
    这篇文章主要介绍“js如何实现文字滚动的效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js如何实现文字滚动的效果”文章能帮助大家解决问题。1、取值:(1)writing-mode:horizon...
    99+
    2023-07-02
  • HTML如何实现滚动文字效果
    小编给大家分享一下HTML如何实现滚动文字效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在HTML中,可以使用marquee标签实现滚动文字效果,该标签可以向...
    99+
    2023-06-15
  • python实现字母闪烁效果的示例代码
    目录1. 介绍2. 完整代码效果图 1. 介绍 屏幕上随机闪烁的代码块,一定能满足我们对于电影中黑客的一丝丝设想,这次,让我们用简简单单的30行python代码,实现这个效果。 前...
    99+
    2024-04-02
  • C#如何实现会移动的文字效果
    这篇文章主要介绍了C#如何实现会移动的文字效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。C#实现会移动的文字效果的具体内容如下1 题目描述(1)Form1窗体设计界面如下...
    99+
    2023-06-14
  • 如何用javascript实现文字滚动效果
    这篇文章主要介绍“如何用javascript实现文字滚动效果”,在日常操作中,相信很多人在如何用javascript实现文字滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • jquery怎么实现文字上下滚动效果
    你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码:HTML部分:```htmlLorem ...
    99+
    2023-08-09
    jquery
  • CSS实现文字下波浪线动画效果
    这篇文章主要介绍“CSS实现文字下波浪线动画效果”,在日常操作中,相信很多人在CSS实现文字下波浪线动画效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS实现文字下波浪...
    99+
    2024-04-02
  • Android实现文字消除效果
    今天和大家分享一个如何从右到左消除文本的动画。 先看效果图: 由于项目和语音识别相关,有时候人在不经意间交流的无效音频会被识别出来,并展示于界面,为了美观,客户要求我们将这些无效的...
    99+
    2024-04-02
  • css如何实现文字循环滚动效果
    这篇文章主要介绍“css如何实现文字循环滚动效果”,在日常操作中,相信很多人在css如何实现文字循环滚动效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何实现文字循...
    99+
    2024-04-02
  • 如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果
    如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。浮动的文字标签当我们处理输入框时,会想方设法提供...
    99+
    2023-06-08
  • CSS实现文字滚动效果的技巧和方法
    在网页设计中,文字滚动效果可以增加页面的活力和吸引力,为用户提供更好的视觉体验。通常情况下,我们可以使用CSS来实现文字滚动效果,使文字以流畅的动画形式在页面上滚动。本文将介绍一些常用的技巧和方法,帮助您实现文字滚动效果,并提供具体的代码示...
    99+
    2023-10-21
    文字效果 技巧方法 CSS滚动
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作