当前位置： 首页 > news >正文

Linux应用开发基础知识——LInux学习FreeType编程（七）

news 2025/7/29 7:08:05

目录

一、使用freetype 显示一个文字

二、使用 freetype 显示一行文字

1. 了解笛卡尔坐标系

2. 每个字符的大小可能不同

3. 怎么在指定位置显示一行文字

4. freetype 的几个重要数据结构

4.1、FT_Library结构体

4.2、FT_Face结构体

4.3、FT_GlyphSlot结构体

4.4、FT_Glyph结构体

4.5、FT_BBox结构体

5.读懂显示一行字体的代码

draw函数

第一步

第二步：计算外框

第三步：调整坐标

第四步： 转换、加载位图、绘制

第五步：上机实验

一、使用freetype 显示一个文字

之前学习Framebuffer的时候，把它和Framebuffer写在了一起，可以看看我写的这个文章：Framebuffer应用编程

二、使用 freetype 显示一行文字

1. 了解笛卡尔坐标系

在 LCD 的坐标系中，原点在屏幕的左上角。对于笛卡尔坐标系，原点在左下角。freetype 使用笛卡尔坐标系，在显示时需要转换为 LCD 坐标系。
在这里插入图片描述

V：纵向总像素个数
从图可知，X 方向坐标值是一样的。
在 Y 方向坐标值需要换算，假设 LCD 的高度是 V。
在 LCD 坐标系中坐标是(x, y)，那么它在笛卡尔坐标系中的坐标值为(x, V-y)。
反过来也是一样的，在笛卡尔坐标系中坐标是(x, y)，那么它在 LCD 坐标系中坐标值为(x, V-y)。

2. 每个字符的大小可能不同

在使用 FT_Set_Pixel_Sizes 函数设置字体大小时，这只是“期望值”。比如“百问网 www.100ask.net”，如果把“.”显示得跟其他汉字一样大，不好看。
所以在显示一行文字时，后面文字的位置会受到前面文字的影响。
例：
在这里插入图片描述幸好，freetype 帮我们考虑到了这些影响。
对于 freetype 字体的尺寸(freetype Metrics)，需要参考图：
在这里插入图片描述
在显示一行文字时，这些文字会基于同一个基线来绘制位图：baseline。
在 baseline 上，每一个字符都有它的原点(origin)，比如上图中 baseline左边的黑色圆点就是字母“g”的原点。当前 origin 加上 advance 就可以得到下一个字符的 origin，比如上图中 baseline 右边的黑色圆点。在显示一行中多个文件字时，后一个文字的原点依赖于前一个文字的原点及 advance。

有图可得：
origin + advance = origin（下一个字的）

字符的位图是有可能越过 baseline 的，比如上图中字母“g”在 baseline下方还有像。
上图中红色方框内就是字母“g”所点据的位图，它的四个角落不一定与原点
重合。
上图中那些 xMin 、 xMax 、 yMin 、 yMax 如 何 获 得 ？ 可 以 使 用
FT_Glyph_Get_CBox 函数获得一个字体的这些参数，将会保存在一个 FT_BBox结构体中，以后想计算一行文字的外框时要用到图这些信息：
在这里插入图片描述
更多结构体后面会详细说明！！

3. 怎么在指定位置显示一行文字

要显示一行文字时，每一个字符都有自己外框：xMin、xMax、yMin、yMax。把这些字符的 xMin、yMin 中的最小值取出来，把这些字符的 xMax、yMax 中的最大值取出来，就可以确定这行文字的外框了。

要想在指定位置(x, y)显示一行文字，步骤如图所示：
在这里插入图片描述

第1步 先指定第 1 个字符的原点 pen 坐标为(0, 0)，计算出它的外框
第2步 再计算右边字符的原点，也计算出它的外框
把所有字符都处理完后就可以得到一行文字的整体外框：假设外框左上角坐标为(x’, y’)。
第3步 想在(x, y)处显示这行文字，调整一下 pen 坐标即可。怎么调整？
pen 为(0, 0)时对应左上角(x’, y’)；那么左上角为(x, y)时就可以算出pen 为(x-x’, y-y’)。

4. freetype 的几个重要数据结构

4.1、FT_Library结构体

对应 freetype 库，使用 freetype 之前要先调用以下代码：

FT_Library library; /* 对应 freetype 库 */
error = FT_Init_FreeType( &library ); /* 初始化 freetype 库 */

4.2、FT_Face结构体

它对应一个矢量字体文件，在源码中使用 FT_New_Face 函数打开字体文件后，就可以得到一个 FT_Face结构体face。
为什么称之为 face？
估计是文字都是写在二维平面上的吧，正对着人脸？不用管原因了，总之认为它对应一个字体文件就可以。
代码如下：

error = FT_New_Face(library, font_file, 0, &face ); /* 加载字体文件 */

4.3、FT_GlyphSlot结构体

插槽？用来保存字符的处理结果：比如转换后的 glyph、位图，如图：
在这里插入图片描述

上一个说的FT_Face结构体里面成员有一个FT_GlyphSlot结构体，里面保存的是字符的处理结果（含有变换后的glyph、位图、advance等信息）
一个 face 中有很多字符，生成一个字符的点阵位图时，位图保存在哪里？
保存在插槽中：face->glyph
生成第 1 个字符位图时，它保存在 face->glyph 中；生成第 2 个字符位图时，也会保存在 face->glyph 中，会覆盖第 1 个字符的位图。
所以我们生成后要及时取走，防止覆盖！
使用当中我们通常会定义一个变量来保存：
FT_GlyphSlot slot = face->glyph; / 插槽: 字体的处理结果保存在这里 /

4.4、FT_Glyph结构体

字体文件中保存有字符的原始关键点信息，使用 freetype 的函数可以放大、缩小、旋转，这些新的关键点保存在插槽中(注意：位图也是保存在插槽中)。
新的关键点使用 FT_Glyph 来表示，可以使用这样的代码从 slot 中获得glyph：

error = FT_Get_Glyph(slot , &glyph);

4.5、FT_BBox结构体

FT_BBox 结构体定义如下，它表示一个字符的外框，即新 glyph 的外框：
在这里插入图片描述
可以使用以下代码从 glyph 中获得这些信息：

FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &bbox );

5.读懂显示一行字体的代码

学习了上面的一堆基础知识，我们就懂了步骤：
第1步 先指定第 1 个字符的原点 pen 坐标为(0, 0)，计算出它的外框
第2步 再计算右边字符的原点，也计算出它的外框
把所有字符都处理完后就可以得到一行文字的整体外框：假设外框左上角坐标为(x’, y’)。
第3步 想在(x, y)处显示这行文字，调整一下 pen 坐标即可。怎么调整？
pen 为(0, 0)时对应左上角(x’, y’)；那么左上角为(x, y)时就可以算出pen 为(x-x’, y-y’)。
第4步 转换、加载位图、绘制一个字符，计算下一个字符origin，继续绘制下一个字符…依次循环

完整的代码如下：

#include <sys/mman.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <unistd.h>
#include <linux/fb.h>
#include <fcntl.h>
#include <stdio.h>
#include <string.h>
#include <math.h>
#include <wchar.h>
#include <sys/ioctl.h>#include <ft2build.h>
#include FT_FREETYPE_H
#include FT_GLYPH_Hint fd_fb;
struct fb_var_screeninfo var;   /* Current var */
struct fb_fix_screeninfo fix;   /* Current fix */
int screen_size;
unsigned char *fbmem;
unsigned int line_width;
unsigned int pixel_width;/* color : 0x00RRGGBB */
void lcd_put_pixel(int x, int y, unsigned int color)
{unsigned char *pen_8 = fbmem+y*line_width+x*pixel_width;unsigned short *pen_16; unsigned int *pen_32;   unsigned int red, green, blue;  pen_16 = (unsigned short *)pen_8;pen_32 = (unsigned int *)pen_8;switch (var.bits_per_pixel){case 8:{*pen_8 = color;break;}case 16:{/* 565 */red   = (color >> 16) & 0xff;green = (color >> 8) & 0xff;blue  = (color >> 0) & 0xff;color = ((red >> 3) << 11) | ((green >> 2) << 5) | (blue >> 3);*pen_16 = color;break;}case 32:{*pen_32 = color;break;}default:{printf("can't surport %dbpp\n", var.bits_per_pixel);break;}}
}/*********************************************************************** 函数名称： draw_bitmap* 功能描述： 根据bitmap位图，在LCD指定位置显示汉字* 输入参数： x坐标，y坐标，位图指针* 输出参数： 无* 返 回 值： 无* 修改日期        版本号     修改人        修改内容* -----------------------------------------------* 2020/05/12        V1.0     zh(angenao)         创建***********************************************************************/ /* 在LCD上绘制: 使用LCD坐标 */
void
draw_bitmap( FT_Bitmap*  bitmap,FT_Int      x,FT_Int      y)
{FT_Int  i, j, p, q;FT_Int  x_max = x + bitmap->width;FT_Int  y_max = y + bitmap->rows;//printf("x = %d, y = %d\n", x, y);for ( j = y, q = 0; j < y_max; j++, q++ ){for ( i = x, p = 0; i < x_max; i++, p++ ){if ( i < 0      || j < 0       ||i >= var.xres || j >= var.yres )continue;//image[j][i] |= bitmap->buffer[q * bitmap->width + p];lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);}}
}/* 计算一行文字的外框 */
int compute_string_bbox(FT_Face face, wchar_t *wstr, FT_BBox  *abbox)
{/* FT_Face face :   对应一个字体文件 */int i;             //用于for循环计算次数int error;         //用于保存函数返回值FT_BBox bbox;      //初始外框FT_BBox glyph_bbox;//用来保存新加载的外框（从glyph得到外框: bbox）FT_Vector pen;     //定义原点FT_Glyph  glyph;   //用于保存字体文件FT_GlyphSlot slot = face->glyph;/* 插槽: 字体的处理结果保存在这里 *//* 初始化 */bbox.xMin = bbox.yMin = 32000;bbox.xMax = bbox.yMax = -32000;/* 指定原点为(0, 0) */pen.x = 0;pen.y = 0;/* 计算每个字符的bounding box *//* 先translate, 再load char, 就可以得到它的外框了 */for (i = 0; i < wcslen(wstr); i++){/* 转换：transformation */FT_Set_Transform(face, 0, &pen);/* 加载位图: 一个字一个字得去加载位图 会保存在face里面 */error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}/* 在face结构体里面取出新的关键点保存在变量glyph里（从 slot 中获得glyph） */error = FT_Get_Glyph(face->glyph, &glyph);if (error){printf("FT_Get_Glyph error!\n");return -1;}/* 从glyph得到外框: bbox，然后保存在变量glyph_bbox中 */FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &glyph_bbox);/* 更新外框 */if ( glyph_bbox.xMin < bbox.xMin )bbox.xMin = glyph_bbox.xMin;if ( glyph_bbox.yMin < bbox.yMin )bbox.yMin = glyph_bbox.yMin;if ( glyph_bbox.xMax > bbox.xMax )bbox.xMax = glyph_bbox.xMax;if ( glyph_bbox.yMax > bbox.yMax )bbox.yMax = glyph_bbox.yMax;/* 计算下一个字符的原点: increment pen position */pen.x += slot->advance.x;pen.y += slot->advance.y;}/* return string bbox */*abbox = bbox;//保存结果
}/* 调整原点并绘制 */
int display_string(FT_Face     face, wchar_t *wstr, int lcd_x, int lcd_y)
{int i;int error;FT_BBox bbox;FT_Vector pen;FT_Glyph  glyph;FT_GlyphSlot slot = face->glyph;/* 把LCD坐标转换为笛卡尔坐标 */int x = lcd_x;int y = var.yres - lcd_y;/* 计算外框 */compute_string_bbox(face, wstr, &bbox);/* 反推原点 */pen.x = (x - bbox.xMin) * 64; /* 单位: 1/64像素 */pen.y = (y - bbox.yMax) * 64; /* 单位: 1/64像素 *//* 处理每个字符 */for (i = 0; i < wcslen(wstr); i++){/* 转换：transformation */FT_Set_Transform(face, 0, &pen);/* 加载位图: load glyph image into the slot (erase previous one) */error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}/* 在LCD上绘制: 使用LCD坐标 */draw_bitmap( &slot->bitmap,slot->bitmap_left,var.yres - slot->bitmap_top);/* 计算下一个字符的原点: increment pen position */pen.x += slot->advance.x;pen.y += slot->advance.y;}return 0;
}int main(int argc, char **argv)
{wchar_t *wstr = L"百问网www.100ask.net";FT_Library    library;FT_Face       face;int error;FT_BBox bbox;int font_size = 24;int lcd_x, lcd_y;if (argc < 4){printf("Usage : %s <font_file> <lcd_x> <lcd_y> [font_size]\n", argv[0]);return -1;}lcd_x = strtoul(argv[2], NULL, 0);//将输入的X坐标转换成想要的形式      lcd_y = strtoul(argv[3], NULL, 0);//将输入的Y坐标转换成想要的形式      if (argc == 5)font_size = strtoul(argv[4], NULL, 0);//将输入的字体大小转换成想要的形式      fd_fb = open("/dev/fb0", O_RDWR);//打开设备节点if (fd_fb < 0){printf("can't open /dev/fb0\n");return -1;}if (ioctl(fd_fb, FBIOGET_VSCREENINFO, &var)){printf("can't get var\n");return -1;}if (ioctl(fd_fb, FBIOGET_FSCREENINFO, &fix)){printf("can't get fix\n");return -1;}line_width  = var.xres * var.bits_per_pixel / 8;pixel_width = var.bits_per_pixel / 8;screen_size = var.xres * var.yres * var.bits_per_pixel / 8;fbmem = (unsigned char *)mmap(NULL , screen_size, PROT_READ | PROT_WRITE, MAP_SHARED, fd_fb, 0);if (fbmem == (unsigned char *)-1){printf("can't mmap\n");return -1;}/* 清屏: 全部设为黑色 */memset(fbmem, 0, screen_size);error = FT_Init_FreeType( &library );               /* 初始化 freetype 库 */error = FT_New_Face( library, argv[1], 0, &face ); /* 加载字体文件 */FT_Set_Pixel_Sizes(face, font_size, 0);            /* 设置字体大小 */display_string(face, wstr, lcd_x, lcd_y);          /*  */return 0;   
}

draw函数

void draw_bitmap( FT_Bitmap*  bitmap, FT_Int x, FT_Int y)
{FT_Int  i, j, p, q;FT_Int  x_max = x + bitmap->width;FT_Int  y_max = y + bitmap->rows;//printf("x = %d, y = %d\n", x, y);for ( j = y, q = 0; j < y_max; j++, q++ ){for ( i = x, p = 0; i < x_max; i++, p++ ){if ( i < 0      || j < 0       ||i >= var.xres || j >= var.yres )continue;//image[j][i] |= bitmap->buffer[q * bitmap->width + p];lcd_put_pixel(i, j, bitmap->buffer[q * bitmap->width + p]);}}
}

第一步

在这里插入图片描述

第二步：计算外框

/* 计算一行文字的外框 */
int compute_string_bbox(FT_Face face, wchar_t *wstr, FT_BBox  *abbox)
{/* FT_Face face :   对应一个字体文件 */int i;             //用于for循环计算次数int error;         //用于保存函数返回值FT_BBox bbox;      //初始外框FT_BBox glyph_bbox;//用来保存新加载的外框（从glyph得到外框: bbox）FT_Vector pen;     //定义原点FT_Glyph  glyph;   //用于保存字体文件FT_GlyphSlot slot = face->glyph;/* 插槽: 字体的处理结果保存在这里 *//* 初始化 */bbox.xMin = bbox.yMin = 32000;bbox.xMax = bbox.yMax = -32000;/* 指定原点为(0, 0) */pen.x = 0;pen.y = 0;/* 计算每个字符的bounding box *//* 先translate, 再load char, 就可以得到它的外框了 */for (i = 0; i < wcslen(wstr); i++){/* 转换：transformation */FT_Set_Transform(face, 0, &pen);/* 加载位图: 一个字一个字得去加载位图 会保存在face里面 */error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}/* 在face结构体里面取出新的关键点保存在变量glyph里（从 slot 中获得glyph） */error = FT_Get_Glyph(face->glyph, &glyph);if (error){printf("FT_Get_Glyph error!\n");return -1;}/* 从glyph得到外框: bbox，然后保存在变量glyph_bbox中 */FT_Glyph_Get_CBox(glyph, FT_GLYPH_BBOX_TRUNCATE, &glyph_bbox);/* 更新外框 */if ( glyph_bbox.xMin < bbox.xMin )bbox.xMin = glyph_bbox.xMin;if ( glyph_bbox.yMin < bbox.yMin )bbox.yMin = glyph_bbox.yMin;if ( glyph_bbox.xMax > bbox.xMax )bbox.xMax = glyph_bbox.xMax;if ( glyph_bbox.yMax > bbox.yMax )bbox.yMax = glyph_bbox.yMax;/* 计算下一个字符的原点: increment pen position */pen.x += slot->advance.x;pen.y += slot->advance.y;}/* return string bbox */*abbox = bbox;//保存结果
}

第三步：调整坐标

在这里插入图片描述

第四步： 转换、加载位图、绘制

/* 调整原点并绘制 */
int display_string(FT_Face     face, wchar_t *wstr, int lcd_x, int lcd_y)
{int i;int error;FT_BBox bbox;FT_Vector pen;FT_Glyph  glyph;FT_GlyphSlot slot = face->glyph;/* 把LCD坐标转换为笛卡尔坐标 */int x = lcd_x;int y = var.yres - lcd_y;/* 计算外框 */compute_string_bbox(face, wstr, &bbox);/* 反推原点 */pen.x = (x - bbox.xMin) * 64; /* 单位: 1/64像素 */pen.y = (y - bbox.yMax) * 64; /* 单位: 1/64像素 *//* 处理每个字符 */for (i = 0; i < wcslen(wstr); i++){/* 转换：transformation */FT_Set_Transform(face, 0, &pen);/* 加载位图: load glyph image into the slot (erase previous one) */error = FT_Load_Char(face, wstr[i], FT_LOAD_RENDER);if (error){printf("FT_Load_Char error\n");return -1;}/* 在LCD上绘制: 使用LCD坐标 */draw_bitmap( &slot->bitmap,slot->bitmap_left,var.yres - slot->bitmap_top);/* 计算下一个字符的原点: increment pen position */pen.x += slot->advance.x;pen.y += slot->advance.y;}return 0;
}

第五步：上机实验

在这里插入图片描述

http://www.lryc.cn/news/602313.html

相关文章：

  • 【C++进阶】---- 二叉搜索树
  • 基于LangGraph Cli的智能数据分析助手
  • Android中PID与UID的区别和联系(2)
  • Go 语言面试题
  • 数据分析干货| 衡石科技可视化创作之仪表盘控件如何设置
  • GitLab 公共仓库：coding 用到的 git 命令
  • Springboot社区养老保险系统小程序
  • 一文理清 Linux 软件管理核心知识：从程序组成到包管理工具
  • Java面试宝典：MySQL8新特性
  • shell学习从入门到精通（第二部分）
  • 机器学习sklearn：决策树的参数、属性、接口
  • nccl中__syncthreads的作用及例子 （来自deepseek)
  • 135端口与WMI攻防全解析
  • 网络安全基础知识【4】
  • python中类变量 __slots__ 解析
  • 5190 - 提高：DFS序和欧拉序:树上操作（区域修改1）
  • 排序算法 (Sorting Algorithms)-JS示例
  • AI原生应用：从人机关系重构到数字空间革命
  • RF随机森林分类预测+特征贡献SHAP分析，通过特征贡献分析增强模型透明度，Matlab代码实现，引入SHAP方法打破黑箱限制，提供全局及局部双重解释视角
  • 力扣7:整数反转
  • OCR 赋能合同抽取：不良资产管理公司的效率加速器
  • Kafka 顺序消费实现与优化策略
  • 数据结构之顺序表链表栈
  • 【Git】Linux-ubuntu 22.04 初步认识 -＞ 安装 -＞ 基础操作
  • 图片PDF识别工具：扫描PDF文件批量OCR区域图识别改名，识别大量PDF区域内容一次性改名
  • 基于LSTM和GRU的上海空气质量预测研究
  • 图片上传 el+node后端+数据库
  • 如何用VUE实现用户发呆检测？
  • Android通知(Notification)全面解析：从基础到高级应用
  • 【前端】解决Vue3+Pinia中Tab切换与滚动加载数据状态异常问题