Qt| imitation text floating letter

the front

Recently, it may be that the small video is possessed , Especially the effect of animated subtitles , As a technology developer , Of course, I want to have a try , Even simple movement is possible ~

see , Just do it. Pick up mine C++ Language is about to try , It's good to use Qt frame , This is using MFC Frame write small demo, It's really difficult ！

Let's take a look at the effect I achieved ~

The effect is simple: the text moves up , In the process of moving, the text as a whole becomes larger or smaller .

that , Let me explain how I achieved it ！

Function realization

In the process of realizing the effect of text movement , The following functions are used ：

1： Timer

2：QLabel Control self drawing

Timer operation

stay QWidget A timer operation function is provided in , We only need inheritance to realize

virtual void timerEvent(QTimerEvent *event);


Use QWidget When the built-in timer operates , There is no need to new QTiemr The way of the , Just use int Value records the current start timer number , When the trigger time is reached, it can be processed .

Text offset implementation

First, before implementation , Let's explain the main process first ！

1： Define the text movement timer

2： Trigger every second , Each trigger requires the creation of a new control to display the content .

3： After triggering, the displayed text traversal mode will be shifted upward as a whole , Random numbers will be used in the migration process , Randomly change the size of the text font .

4： Font changes , Cause the width and height of the text to change , With a new width 、 Position after height calculation offset .

ad locum , We can QLabel Control to redraw , Suppose it's called QCustomLabel, The parent class is QLabel. Let me explain step by step how I realize timer offset ~

First step

Define containers for storing text content that needs to be displayed , Here you can use a simple container vector To record ,

std::vector< std::string >m_vetContent;

The second step

Define a container for storing text controls that have been displayed , Use QVector To record ,QVector<QCustomLabel*> m_vetControls;

Why are the first and second steps used vector Record , But one uses C++ Of , Another use Qt What about ？

In fact, in the first and second stored procedures , You can use QVector To record , One thing to note is that , The second step is to use QVector.

Why? ？ because vector And QVector Storage is in the form of first in, first out , When we record the control pointer , The control pointer taken out first should be the data inserted later . stay QVector It is more convenient to insert data from the front end , Simply, the containers used in these two steps are slightly different , you get Have we arrived ？

The third step

After the timer is triggered , Temporarily create control data that displays text , And stored in containers in time m_vetControls in , In case of memory leakage caused by not destroying the pointer in time when destroying the window .

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);


Use QVector Of push_font() Method , Every time the stored data is displayed first , That is, store the data in the subscript 0 Under the position of .

Step four

After data storage , Update the position of all displayed text controls , Use here :UpdateShowRectStyle() Function to realize ~

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();


Loop through the data content of the entire stored control pointer , Change the text zoom size while updating the position （ That is, change the font size ）, Get the latest change location , Get the width again 、 Height .

Suppose the current height is 0 when , The description is that the first data needs to be changed , The position of the offset , Directly refers to the height of the control ; Assume that the current height is not 0 when , Description is a piece of data in the migration process , Because it is upward offset , Every time the height after offset is calculated , You need to subtract , If it is downward offset , Every time you calculate the height after the offset, you add .

Step five

When you finish reading and writing all the displayed content , Stop timer operation

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


Come here , The function of automatic text offset is realized , Next, let's talk about how to self draw QLabel Control bar ~

Control self drawing

First we need to define QLabel Self drawing class of , Here I give you a simple framework , What functions you need in the future can be added directly ~

.h  Use

#pragma once

#include <QLabel>

class QCustomLabel : public QLabel
{
 Q_OBJECT

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


.cpp  Use

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

QCustomLabel::~QCustomLabel()
{
}


What functions do you want to achieve , Just expand on this basis .

In self drawing QLabel There are two key points in

1： How to fix the text area according to the font size ？

2： The text flashing effect is realized

Draw according to these two points QLable Control bar ！

function 1：

The font size can use random numbers qrand() To achieve .

Usage method ：

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


The random number generated in this way ensures uniqueness .

According to the font size , Set up QFont Properties of

QFont fontContent =this->font();
// Set up ： Font style ： Microsoft YaHei
fontContent.setFamily("Microsoft YaHei");
// Set up ： font size ：22
fontContent.setPixelSize(nFontSize);
// Font binding
this->setFont(fontContent);


The key! ！！！

After setting the font style , At this time, we can get the height of the font , But the overall width cannot be obtained, and it needs to be obtained dynamically .

QFontMetrics metrics(font());
int nheight = metrics.height();
// Set content and store text content
m_qsTextContent = QString::fromLocal8Bit(sText.c_str());
setFixedHeight(nheight);
this->setText(m_qsTextContent);
this->adjustSize();
int nwidth = this->width();
// Set customization QLable The width and height of the control
QSize size(nwidth , nheight);

// Turn on timer
m_nTimerId = startTimer(100);
return size;


function 2：

Text color gradient display .

This function is very simple , The core is real-time update QColor value , Here I use random numbers to make the color values generated each time different

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++)
{
 // Set up ： tonal （H）、 saturation （S）、 brightness （Y）
 int nIndex = (m_nStep + i) % 16;
 color.setHsv((15 - nIndex) * 16, 255, 191);
 painter->setPen(color);
 // Single character drawing
 painter->drawText(x, y, QString(m_qsTextContent[i]));
 // Calculate the of the next character x Coordinate starting point
 x += metrics.width(m_qsTextContent[i]);
}


summary

Come here , The text movement effect has been achieved , Function is relatively simple , The only difficulty is when the writing style changes , Regional changes , As long as we understand the law of change , Isn't location display a piece of cake ？

I am a good citizen of China st, a C++ Development program yuan ~