freetype将字符串制作成位图并显示过程详解

        在流媒体项目中字幕显示是不可或缺的一环，一般会有字幕流在视频播放过程中进行显示；不过还有很多情况是从头到尾只在视频的某个区域显示某些文字，例如某个电视台的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;
}

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

        其中坐标点就是位图想要在画布上显示的坐标点，颜色相同的四个方块代表一个像素点，一个方块代表一个字节，则坐标点在画布的缓存中的地址位置为：一行为1920个像素点，每个像素点占四个字节，再乘以y已经偏移的像素点(1920*4*y)；然后加上偏移的x像素点(x*4)；所以总偏移量为：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_top
        int 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及使用技巧的文章；