ESP32-S3 + LVGL9 + FreeType 动态显示中文汉字指南ILI9488屏幕多字号支持

weixin_42146638

已于 2025-04-14 18:06:08 修改

阅读量773

点赞数 11

文章标签：数据库单片机嵌入式实时数据库语音识别人工智能自然语言处理 github

于 2025-04-14 17:59:32 首次发布

本文链接：https://blog.csdn.net/weixin_42146638/article/details/147226338

版权

一、环境背景介绍

1、Linux虚机开发环境

root@bogon:/export/esp32/esp-idf-5.3/esp-idf/esp_idf_to_arduino# uname -a
Linux bogon 4.15.0-109-generic #110-Ubuntu SMP Tue Jun 23 02:39:32 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

2、esp32 IDF框架下适配了IDE，IDF版本是arduino-esp32-idf-release-v5.3

3、LVGL-9.2.2

4、freetype-2.13.3

二、GitHub上下载源码

三、freetype编译环境搭建

默认已经搭建好LVGL的编译环境

1、下载的源码拷贝到components下

把freetype的安装包拷贝到工程的components路径下解压(所有新增的库基本都在这里)，比如我的路径如下，esp_idf_to_arduino是我自己的工程文件夹：

root@bogon:/export/esp32/esp-idf-5.3/esp-idf/esp_idf_to_arduino/components# ls
Adafruit_NeoPixel  ArduinoJson        AsyncTCP  ESP32-audioI2S-master  ESPAsyncWebServer  freetype-2.13.3  lvgl-9.2.2  U8g2_for_TFT_eSPI-master
arduino            ArduinoWebsockets  custom    ESPAsyncTCP            EspSoftwareSerial  lv_conf.h        TFT_eSPI    UrlEncode
root@bogon:/export/esp32/esp-idf-5.3/esp-idf/esp_idf_to_arduino/components# pwd
/export/esp32/esp-idf-5.3/esp-idf/esp_idf_to_arduino/components

2、更新CMakeLists.txt文件，更新后如下：

file(GLOB_RECURSE SOURCES ./src/base/*.c ./src/sfnt/*.c ./src/smooth/*.c ./src/base/ftmac.c ./src/truetype/*.c ./src/gzip/*.c ./src/autofit/*.c )

file(GLOB_RECURSE MY_INCLUDE_DIRS ./src/base ./src/autofit ./src/bdf ./src/smooth ./src/raster ./src/bzip2
        ./src/cache ./src/cff ./src/cid ./src/dlg ./src/gxvalid ./src/gzip ./src/lzw
        ./src/otvalid ./src/pcf ./src/pfr ./src/psaux ./src/pshinter ./src/psnames ./src/sdf
        ./src/sfnt ./src/svg ./src/tools ./src/truetype ./src/type1 ./src/type42 ./src/winfonts)

idf_component_register(SRCS ${SOURCES}
                    INCLUDE_DIRS "./include" "./include/dlg" "./include/freetype" "./include/freetype/config" "./include/freetype/internal" "./include/freet
ype/internal/services" ${MY_INCLUDE_DIRS}
                    REQUIRES freetype-2.13.3)

3、需要改动的文件

freetype-2.13.3/src路径下不需要全部编译，本人只编译了./src/base/*.c ./src/sfnt/*.c ./src/smooth/*.c ./src/base/ftmac.c ./src/truetype/*.c ./src/gzip/*.c ./src/autofit/*.c这些文件夹下的文件。

这些文件需要改动的地方如下：

改动点1：./src/autofit/autofit.h

注释掉所有代码

/****************************************************************************
 *
 * autofit.c
 *
 *   Auto-fitter module (body).
 *
 * Copyright (C) 2003-2024 by
 * David Turner, Robert Wilhelm, and Werner Lemberg.
 *
 * This file is part of the FreeType project, and may only be used,
 * modified, and distributed under the terms of the FreeType project
 * license, LICENSE.TXT.  By continuing to use, modify, or distribute
 * this file you indicate that you have read the license and
 * understand and accept it fully.
 *
 */


#define FT_MAKE_OPTION_SINGLE_OBJECT

#if 0
#include "ft-hb.c"
#include "afblue.c"
#include "afcjk.c"
#include "afdummy.c"
#include "afglobal.c"
#include "afhints.c"
#include "afindic.c"
#include "aflatin.c"
#include "afloader.c"
#include "afmodule.c"
#include "afranges.c"
#include "afshaper.c"
#endif

/* END */

改动点2：./src/base/fterrors.c

改动点3：./src/gzip/inftrees.c

改动点4：./src/gzip/zutil.h

改动点5：./src/sfnt/ttsvg.c

改动点5：./src/smooth/ftgrays.c

改动点6：./src/smooth/smooth.c

改动点7：./src/truetype/ttgload.c

改动点8：./include/freetype/config/ftmodule.h

/*
 * This file registers the FreeType modules compiled into the library.
 *
 * If you use GNU make, this file IS NOT USED!  Instead, it is created in
 * the objects directory (normally `<topdir>/objs/`) based on information
 * from `<topdir>/modules.cfg`.
 *
 * Please read `docs/INSTALL.ANY` and `docs/CUSTOMIZE` how to compile
 * FreeType without GNU make.
 *
 */


/*FT_USE_MODULE( FT_Module_Class, autofit_module_class )
FT_USE_MODULE( FT_Driver_ClassRec, tt_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, t1_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, cff_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, t1cid_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, pfr_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, t42_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, winfnt_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, pcf_driver_class )
FT_USE_MODULE( FT_Driver_ClassRec, bdf_driver_class )
FT_USE_MODULE( FT_Module_Class, psaux_module_class )
FT_USE_MODULE( FT_Module_Class, psnames_module_class )
FT_USE_MODULE( FT_Module_Class, pshinter_module_class )
FT_USE_MODULE( FT_Module_Class, sfnt_module_class )
FT_USE_MODULE( FT_Renderer_Class, ft_smooth_renderer_class )
FT_USE_MODULE( FT_Renderer_Class, ft_raster1_renderer_class )
FT_USE_MODULE( FT_Renderer_Class, ft_sdf_renderer_class )
FT_USE_MODULE( FT_Renderer_Class, ft_bitmap_sdf_renderer_class )
FT_USE_MODULE( FT_Renderer_Class, ft_svg_renderer_class )
*/

FT_USE_MODULE( FT_Renderer_Class, ft_smooth_renderer_class )
FT_USE_MODULE( FT_Module_Class, sfnt_module_class )
FT_USE_MODULE( FT_Module_Class, autofit_module_class )
FT_USE_MODULE( FT_Driver_ClassRec, tt_driver_class )
/* EOF */

改动点9：./include/freetype/internal/ftdebug.h

改动点10：./include/freetype/fttypes.h

四、LVGL9组件库需要改一下lv_conf.h

LV_USE_FREETYPE 改为1

/*FreeType library*/
#define LV_USE_FREETYPE 1
#if LV_USE_FREETYPE
    /*Let FreeType to use LVGL memory and file porting*/
    #define LV_FREETYPE_USE_LVGL_PORT 0

    /*Cache count of the glyphs in FreeType. It means the number of glyphs that can be cached.
     *The higher the value, the more memory will be used.*/
    #define LV_FREETYPE_CACHE_FT_GLYPH_CNT 4096
#endif

五、配置ESP-IDF环境

使用idf.py menuconfig

component config-->LVGL configuration-->3rd Party Libraries-->freetype libriary

六、代码逻辑实现

#include "freetype/lv_freetype.h"
void freetype_font_test()
{
    lv_init();

    /*Create a font (创建字体)*/
    lv_font_t *font = lv_freetype_font_create(
        "/spiffs/STLITI123.ttf",
        LV_FREETYPE_FONT_RENDER_MODE_BITMAP,
        24,
        LV_FREETYPE_FONT_STYLE_ITALIC
    );
    if (!font)
    {
        Serial.println( "freetype font create failed." );
        return;
    }

    Serial.println( "freetype_font_test start" );
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_text_font(&style, font_small);
    lv_style_set_bg_color(&style, lv_color_hex(0x00ff00));
    lv_style_set_text_align(&style, LV_TEXT_ALIGN_CENTER);

    /*Create a label with the new style*/
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_obj_set_style_text_font(label, font_small, LV_PART_MAIN|LV_STATE_DEFAULT);
     lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP);
     lv_obj_set_width(label, 480);
     lv_label_set_text(label, "Hello world 123456\n你好世界进范德萨放假啦电话费等哈飞机卡手打飞机很大洒基发动机啊话费卡交电话费科技！");
     lv_obj_align( label, LV_ALIGN_TOP_LEFT, 0, 0 );

     lv_obj_t * g_label = lv_label_create(lv_scr_act());
     lv_obj_set_style_text_font(g_label, font_small, LV_PART_MAIN|LV_STATE_DEFAULT);
     //lv_obj_add_style(label, &style, 0);
     lv_obj_set_width(g_label, 480);
     lv_label_set_text(g_label, "Hello world 123456\n你好世界进范德萨放假啦电话费等哈飞机卡手打飞机很大洒基发动机啊话费卡交电话费科技！");
     lv_obj_align( g_label, LV_ALIGN_LEFT_MID, 0, 0 );

     Serial.println( "freetype_font_test done" );
 }
void setup() {
  freetype_font_test();
}

void loop() {
    lv_timer_handler(); /* let the GUI do its work */
    delay(5); /* let this time pass */
}

七、效果展示
整体流程已经基本调通，效果展示后面拍好视频后补上来。

本次测试环境是Linux下进行的，选择的原因是Linux下编译效率比较快，节省时间。

从无到有实现目前的效果，有参考其他大佬的帖子，也有自己摸索实现的部分，知识劳动成果，实属不易。

如果需要技术支持，欢迎骚扰(+v:Sw-striving)！