在流媒体项目中字幕显示是不可或缺的一环，一般会有字幕流在视频播放过程中进行显示；不过还有很多情况是从头到尾只在视频的某个区域显示某些文字，例如某个电视台的log；这种也称为字幕，如果想要将这些字符串显示到视频，需要将这些字符串做成位图进行显示，无法直接显示，freetype开源库就是将字符转化为位图的工具。

        做了几个freetype的项目之后总结的几个难点：

1.utf8或者gb2312等中文如何生成位图

        画布和freetype是无法处理中文编码的，像GB2312或UTF8等中文编码需要转换成unicode编码才能够被处理，显示；字符串的编码转换可以使用iconv库进行编码转换，想要了解更多iconv库的详细情况，关注我后期持续更新。

2.生成的位图如何显示到画布上；（核心点，最难点）

        首先明确一点：freetype只是将字符做成位图的工具，不涉及位图在画布显示相关的配置；具体如何将位图显示到LCD(嵌入式称为画布)？

        利用c/c++的话术来说就是将保存位图的缓存内容拷贝到画布的缓存上即可。但是不仅仅是简单的字符拷贝，在拷贝的过程中还要考虑到LCD的像素格式（RGB888，RGB555等），不同的像素格式，单个像素所占的内存大小是不一样的，就导致拷贝时的内存偏移是不同的；下面代码进行跟明确的解释：

//这里LCD的像素格式为ARGB8888,即一个像素占四个字节，A：透明度(8bit)，R：红色(8bit)，G：绿色(8bit)，B:蓝色(8bit)
void Manage::lcd_put_pixel(int x, int y, unsigned int pixel, unsigned int color)
{/**Get_Canvas_Addr()：画布的地址；*(32 / 8):一个像素占多少字节；*Get_Stride()：垂直步长，和像素格式有关，假如画布的分辨率为：1920*1080；像素格式为ARGB8888，则垂直步长为1920*4*              很好理解：画布水平有1920个像素点，每个像素点占四个字节；*/unsigned char *pen_8 = (Get_Canvas_Addr() + x * (32 / 8) + y * Get_Stride());//画布显示位置在画布缓存中的地址偏移unsigned int *pen_16;unsigned int red = 0, green = 0xff, blue = 0;pen_16 = (unsigned int *)pen_8;//pixel:代表像素点的值if (pixel != 0){ //一个像素由RGB组成，而像素格式占四个字节，所以将unsigned char类型的缓存转换成unsigned int类型进行赋值，代表整个像素点pixel = color;}else{//没有像素点说明是空白区域，以白色填充*pen_16 = 0x0000;}//将像素值拷贝到画布*pen_16 = pixel;
}

        如果对于画布的坐标偏移很难理解，参考下下图：

        其中坐标点就是位图想要在画布上显示的坐标点，颜色相同的四个方块代表一个像素点，一个方块代表一个字节，则坐标点在画布的缓存中的地址位置为：y*(1920*4)+x*4; 这样就很清楚明了了吧！

        这个模块就是将生成好的位图数据显示到LCD画布的过程，在实际的项目开发中画布的坐标，画布的分辨率，画布的像素格式，位图的坐标，位图的各种参数都是非常重要的考虑项；想要了解更多关注我后续持续更新；

3.LCD坐标和笛卡尔坐标在实际项目中如何应用

        lcd坐标：就是LCD在做图像显示时的坐标，以左上角为原点，y轴与笛卡尔坐标相反向下为正，x轴与笛卡尔坐标一样；

        笛卡尔坐标：就是我们上学时学到坐标轴；

        为什么要说这两个坐标的？因为如果坐标与freetype接口相关的话就会涉及到笛卡尔坐标，因为freetype内部使用的时笛卡尔坐标，需要与LCD坐标进行转换。

        具体分析图如下：

        在进行位图渲染时，freetype是按照红点为原点进行坐标设置的，而LCD(画布)是按照绿色原点进行设置的，因此如果坐标使用freetype进行设置，那么y坐标要使用LCD的高减去想要的y值才是我们想要的坐标；

        如上图，想要让位图显示在LCD(100,100)的坐标处，但是使用freetype时y坐标就不能设置为100，而要设置为h-100；x都是一样的，不用考虑x的转换。

        有如下代码：

//该代码是从实际项目中摘录，删去了无用代码，导致可能无法编译，仅表示位图生成过程
int Manage::FreeType_Generate_Bitmap(uint32_t h, uint32_t w, std::string color)
{FT_Library library;FT_Face face;FT_GlyphSlot slot;FT_Error error;unsigned int co = 0;// 初始化 FreeType 库error = FT_Init_FreeType(&library);if (error){printf("Failed to initialize FreeType library\n");return 1;}// 加载字体文件error = FT_New_Face(library, "/mmc_data/msyh.ttf", 0, &face);if (error == FT_Err_Unknown_File_Format){printf("Unsupported font file format\n");return 1;}else if (error){printf("Failed to load font file\n");return 1;}slot = face->glyph;FT_Select_Charmap(face, FT_ENCODING_UNICODE);// // 设置字体大小,后面两个参数是长宽，如果其中一个为0，则默认与另一个参数相同FT_Set_Pixel_Sizes(face, 0, 48);// 只使用灰度位图FT_Render_Mode render_mode = FT_RENDER_MODE_NORMAL;// 设置字符串const char *text = "hello";// 计算字符串在画布的中间位置int string_width = 0;int string_height = 0;//计算将整个字符串转换为位图后，位图的总长度和总高度for (int i = 0; i < strlen(text); i++){FT_Load_Char(face, text[i], FT_LOAD_RENDER);// string_width += face->glyph->bitmap.width;//计算总长度时要使用水平步长(face->glyph->advance.x),不要使用字符位图宽度(face->glyph->bitmap.width),因为位图是按照//水平步长或者垂直步长进行偏移的，两者的区别请参考我的文章：string_width += (face->glyph->advance.x >> 6);if (face->glyph->bitmap.rows > string_height){string_height = face->glyph->bitmap.rows;}}// 逐字符渲染并绘制到位图//pen_x,pen_y就是我们想要设置的LCD坐标int pen_x = (w - string_width) / 2;int pen_y = string_height - slot->bitmap_top;FT_Vector pen;//使用freetype时要乘以64，因为freetype内部是1/64像素pen.x = pen_x * 64;pen.y = pen_y * 64;printf("pen_x : %d, pen_y : %d, top : %d\n", pen_x, pen_y, slot->bitmap_top);co = Get_Int_Color(color);for (int i = 0; i < strlen(text); i++){//使用FT_Set_Transform接口将pen_x,pen_y转化为freetype坐标FT_Set_Transform(face, 0, &pen);error = FT_Load_Char(face, text[i], FT_LOAD_RENDER);if (error){printf("Failed to load glyph\n");continue;}//FT_Set_Transform转化之后x坐标为slot->bitmap_left；y坐标为slot->bitmap_topint x = slot->bitmap_left;    // 字形位图的左边界偏移int y = h - slot->bitmap_top; // 字形位图的上边界偏移,这就是上面说到的坐标转换，再将freetype笛卡尔坐标转换为LCD坐标FT_Int x_max = x + slot->bitmap.width;FT_Int y_max = y + slot->bitmap.rows;//下面就是将位图渲染到LCD的过程，参考上面第二小节for (int i = x, p = 0; i < x_max; i++, p++){for (int j = y, q = 0; j < y_max; j++, q++){if (i < 0 || j < 0 || i >= w || j >= h)continue;lcd_put_pixel(i, j, slot->bitmap.buffer[q * slot->bitmap.width + p], co);}}pen.x += slot->advance.x;// pen.y += slot->advance.y;}// 释放资源FT_Done_Face(face);FT_Done_FreeType(library);return 0;
}

        当然，如果你觉得坐标的相互转换很迷惑，我这有一种方可可以只考虑LCD坐标，不考虑笛卡尔坐标，也就是坐标不经过freetype；具体方法关注我，后期会出一篇详解freetype及使用技巧的文章；