Qt之图形(绘制文本)

简述

前面我们讲解了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度。

时间: 2024-10-27 05:25:43

Qt之图形(绘制文本)的相关文章

QT 基本图形绘制

QT 基本图形绘制 1.告诉绘制引擎一些东西 QPainter::Antialiasing 在可能的情况下,反锯齿       QPainter::TextAntialiasing 在可能的情况下,文字反锯齿       QPainter::SmoothPixmapTransform   采用平滑的Pixmap变换算法 2.绘制函数 3.风格 1)画刷风格 2)画笔风格 3)画笔连接点风格 4)顶端风格 4.绘图前的准备 1  如果要在绘图设备(一般为窗口部件)上绘图,只需创建一个QPainte

Qt之图形(QPainter的基本绘图)

简述 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类. QPainter用来执行绘图操作,其提供的API在GUI或QImage.QOpenGLPaintDevice.QWidget和QPaintDevice显示图形(线.形状.渐变等).文本和图像. QPaintDevice不直接绘制物理显示画面,而利用逻辑界面的中间媒介.例如,绘制矩形图形时,为了将对象绘制到QWidget.Q

Qt--基础图形绘制

一.基础图形绘制 A.Qt图形系统中的关键角色QPainter--Qt中的画家,能够绘制各种基础图形 ,拥有绘图所需的画笔.画刷.字体QPaintDevice--Qt中的画布,画家的绘图板,所有的QWidget类都继承自QPaintDeviceQt图形系统中的关键角色Qt中所使用的工具1.QPen-用于绘制几何图形的边缘,由颜色.宽度.线风格等参数组成2.QBrush-用于填充几何图形的调色板,由颜色和填充风格组成3.QFont-用于文本绘制,由字体属性组成需要注意的是--只能在QWidget:

绘制文本

本课中,我们将学习如何在窗口的客户区“绘制”字符串.我们还将学习关于“设备环境”的概念. 理论: Windows 中的文本是一个GUI(图形用户界面)对象.每一个字符实际上是由许多的像素点组成,这些点在有笔画的地方显示出来,这样就会出现字符.这也是为什么我说“绘制”字符,而不是写字符.通常您都是在您应用程序的客户区“绘制”字符串(尽管您也可以在客户区外“绘制”).Windows 下的“绘制”字符串方法和 Dos 下的截然不同,在 Dos 下,您可以把屏幕想象成 85 x 25 的一个平面,而 W

【Windows编程】系列第五篇:GDI图形绘制

上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数百个API可供我们使用,本篇把最常用的GDI绘图做一个讲解.GDI可以绘制点.直线曲线.填充封闭区域.位图以及文本,其中文本部分已经在上一篇中将了,请参考[Windows编程]系列第三篇:文本字符输出. 跟前面的GDI对象一样,本篇的这些绘图函数也必须要设备上下文句柄(HDC)作为函数参数,从前文我

第68课 基础图形绘制(下)

1. 简易绘图程序 (1)功能需求 ①自由图形绘制 ②基本图形绘制(直线.矩形和椭圆) ③能够选择图形绘制颜色 (2)界面解决方案 ①以QWidget为基类创建绘图主窗口 ②使用QGroupBox创建图形设置区域 ③使用单选按钮QRadioBox实现目标图形的选择 ④使用组合框QCombox实现绘图颜色的选择 2. 自由绘图的实现 (1)自由绘图的本质是跟踪鼠标的移动轨迹:因此,必须考虑什么时候开始?什么时候结束?以及如何记录鼠标移动? (2)从绘图参数的角度,可以将己经绘制结束的图形与正在绘制

Qt之自绘制饼图

1.说明 最近在搞绘图方面的工作,说实话C++的第三方绘图库并不算多,总之我了解的有:qtcharts.ChartDirector.qwt.kdchart和QCustomPlot.这几个库各有利弊. qtcharts:qt5.7之后才开源的模块,支持绘制各种图标,并且功能相当丰富,但是可扩展性差,如果自己想高度定制,比较困难,主要是和qt的源码风格有决定性的关系. ChartDirector:开源的第三方绘图库,使用方便,推荐使用 qwt:主要绘制仪表盘类似的东西(这个库可以编译后加入qt帮助文

图形绘制-线段绘制相关

最近公司的项目要用到一些图表效果,本来也打算在github上找一些第三方.然而第三方的风格与公司的需求不尽相同,改动起来较麻烦.于是自己写了一个,并且通用化,现已共享至github上.一下是自己的一些开发历程. 1.刚起手的时候,想完全用Quartz2D来绘制,然而Quartz2D只能绘制一些基本的图形,并不能达到路径绘制的动画效果.想要完全用UIBezierPath(UIBezierPath实际上也是使用OC语法将Quartz2D封装而成,使用更加方便)绘制,有觉得大材小用了,最终觉得使用Qu

android游戏开发中图形绘制:Canvas和Paint的使用

android游戏开发中,使用android.graphics中的类来绘制2D向量图和文字. 一 画布Canvas 在Android中的绘图应该继承View组件,并重写它的onDraw(Canvas canvas)方法. Canvas代表指定View上的画布,常用方法如图: 二 画刷Paint Paint代表Canvas上的画刷,主要用于绘制风格,包括画刷颜色.画刷笔触粗细.填充风格等. 大体上可以分为两类,一类与图形绘制相关,一类与文本绘制相关. 常用方法如图: 三 路径Path Path表示