目录
一、使用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;
}
第五步：上机实验
)
