简述
前面我们讲解了Qt图形的基本绘制,其中包括: 绘制文本、直线、直线、矩形、弧线、椭圆、多边形、图片,以及其它一些高级用法,比如:渐变、转换等。
本节我们来详细讲解文字的绘制。主要通过QPainter的darwText()函数来实现,里面包含多个重载函数,其中,可以通过QRect来指定绘制的区域,也可以通过QPoint来指定绘制的起始点。
QFont类可以辅助设置文本的大小、粗细、字符间距等,然后使用setFont()来设置。
QFontInfo类用来获取字体的信息,可以通过fontInfo()函数来获取。
也可以使用更多其它辅助类来实现更好的效果,比如:QTextOption、QFontMetrics。其中QTextOption可以对文本换行,并设置换行方式以及文本显示方向等效果。QFontMetrics可以计算文本长度,进行特殊处理(比如:显示…)。
- 简述
- 基本绘制
- 效果
- 源码
- 文本位置
- 效果
- 源码
- 显示不全
- 效果
- 源码
- QTextOption
- 效果
- 源码
- QFontMetrics
- 效果
- 源码
- 字体
- 效果
- 源码
基本绘制
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
// 绘制区域为当前界面的整个区域(默认-左上角开始)
painter.drawText(rect(), QStringLiteral("一去丶二三里"));
// 绘制区域从x坐标100,y坐标100处开始
painter.drawText(100, 100, QStringLiteral("青春不老,奋斗不止!"));
// 绘制区域从坐标点(20, 200)处开始
painter.drawText(QPoint(20, 200), QStringLiteral("纯正开源之美,有趣、好玩、靠谱。。。"));
}
drawText的重载函数比较,这里我们先介绍常用的几种绘制方式。
文本位置
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
// 绘制区域为当前界面的整个区域(居中)
painter.drawText(rect(), Qt::AlignCenter, QStringLiteral("一去丶二三里"));
}
从前面来看,无论我们使用哪种方式,首先都需要控制文本的绘制区域-QRect或起始点QPoint,然后可以根据对齐方式来辅助控制位置的显示-左对齐、右上对齐、居中对齐等。
显示不全
下面,我们先来看一个显示不全的效果图。
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
painter.drawText(rect(), Qt::AlignCenter, QStringLiteral("青春不老,奋斗不止!-纯正开源之美,有趣、好玩、靠谱。。。"));
}
有时,我们会出现类似情况,显示不全,这时我们很烦恼,没关系,我们可以使用文本选项QTextOption来换行,也可以使用QFontMetrics来显示…。
QTextOption
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
option.setWrapMode(QTextOption::WordWrap);
painter.drawText(rect(), QStringLiteral("青春不老,奋斗不止!-纯正开源之美,有趣、好玩、靠谱。。。"), option);
}
文本过长,QTextOption可以帮助我们换行,也可以设置对齐方式,除此以外,还可以设置换行方式以及文本显示方向等效果。
QFontMetrics
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
QFontMetrics fm = painter.fontMetrics();
QString strText = QStringLiteral("青春不老,奋斗不止!-纯正开源之美,有趣、好玩、靠谱。。。");
QString strElidedText = fm.elidedText(strText, Qt::ElideRight, 200, Qt::TextShowMnemonic);
painter.drawText(rect(), Qt::AlignCenter, strElidedText);
}
如果文本过长,我们又不想换行,只想把其中一部分省略为…,那么我们可以通过QFontMetrics来实现。这里,当长度超过200px时,对文本右侧设置…。
字体
效果
源码
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
QTransform transform;
transform.rotate(45);
// 设置画笔颜色
painter.setPen(QColor(0, 160, 230));
QFont font;
font.setFamily("Microsoft YaHei");
// 大小
font.setPointSize(16);
// 斜体
font.setItalic(true);
// 设置下划线
font.setUnderline(true);
// 设置上划线
font.setOverline(true);
// 设置字母大小写
font.setCapitalization(QFont::SmallCaps);
// 设置字符间距
font.setLetterSpacing(QFont::AbsoluteSpacing, 20);
// 使用字体
painter.setFont(font);
// 获取字体信息
QFontInfo info = painter.fontInfo();
info.family();
info.italic();
// 转换
painter.setTransform(transform);
painter.drawText(rect(), QStringLiteral("一去丶二三里"));
}
通过QFont我们可以很轻易的设置文本的大小、字体间距等效果,再根据fontInfo()来获取字体信息QFontInfo。当然,我们也可以添加更多效果,比如:通过QTransform来实现转换,这里我们旋转了45度。