lvgl库本身支持软件界面上显示汉字,但可能存在汉字字库不全导致某些汉字无法显示的问题,因此lvgl还支持自定义汉字显示,即通过将汉字按照指定字体转换成.c文件后加载到工程中使用指定的汉字格式。
首先lvgl官网提供一个转换工具,但是试过直接报错,无法完成转换(反正我是没有成功过,感兴趣的朋友可以取试试运气),链接地址:https://lvgl.io/tools/fontconverter
在此感谢里飞网的“阿里兄”,其无偿提供的免费工具LvglFontTool可以成功进行汉字字库转换为.c文件。操作也很简单,按照以下步骤一步步操作即可实现使用lvgl库可显示汉字:
1、下载ttf格式的汉字字体,自行百度下载。
2、下载字体转换工具LvglFontTool,请移步’阿里兄“的论坛帖子下载,不需要注册,可以直接下载,下载链接:LvglFontTool字体工具更新V0.4版本 - LittlevGL - 里飞网 - Powered by Discuz! (lfly.xyz)http://www.lfly.xyz/forum.php?mod=viewthread&tid=24&extra=&page=1
3、 安装好转换工具后打开,我下载的是目前最新的0.4版本,界面如下图:
其中比较重要的是字体名字,这个名字是后面在代码中要使用的,请根据自己习惯来取,按照lvgl/src/font目录下字体文件的规则,以lv_font_开头,后面自行取名。输入包含这里,根据自己的lvgl.h所在的路径,通过相对路径来写,或者编译脚本定义了LV_LVGL_H_INCLUDE_SIMPLE预编译宏,则这里可以不用改。
4、选择需要转换的汉字字体,即左下角第一个”选择字体“按钮,弹出界面如下图:
系统默认字体存放路径是C:\Windows\Fonts ,我试了下打开目录,没有ttf文件在这个目录下,因此自行下载ttf字体格式文件。
选择好字体后,可以通过软件左下角的其他按钮加入需要的汉字或图标字符等,也可以直接在左边输入文字。
最简单的类型是选择第二种”XBF字体,内部大数组“,这种方式生成的代码,基本不需要做改动,可以直接使用,如果选择“XBF字体,外部bin文件”的话,还需要加载bin文件,操纵上会比较麻烦,这里我选择最简单的第二种。然后直接点击“开始转换”按钮来生成对应的.c文件。
5、源文件生成后,将文件拷贝到项目中的lvgl/src/font目录下,其他文件不需要做任何修改,只需要在想要使用的地方使用LV_FONT_DECLARE宏来声明该字体的变量,位置最好是在include下面,函数外面声明,当然在函数里面声明也行,但是如果多个地方使用该字体的话,建议在函数外面当作全局变量来声明。如下图:
6、有个坑需要注意,我在这个坑上废了点时间,希望帮其他人节约这个时间。在源文件放到lvgl/src/font目录下之后,请确认编译脚本是否有这个文件,如果是手写的Makefile,则需要自行加上这个文件,如果是通过cmake管理代码的,可能需要重新生成编译脚本,否则直接使用字体的话,会报找不到引用的错误,类似如下错误:
7、代码中使用比较简单,两种方式,第一种通过style设置字体,如:
第二种直接设置lvgl对象文本的字体,如下图:
设置显示的汉字文本直接在代码中写上即可。
附上使用的例子
#include "lv_ui.h"
#include "lv_ui_events.h"
LV_FONT_DECLARE(lv_font_cn_common1)
void lv_ui_init(void)
{
// 创建字体样式
static lv_style_t style_font;
lv_style_init(&style_font);
lv_style_set_text_font(&style_font, &lv_font_cn_common1); //样式使用自定义字体
lv_style_set_text_color(&style_font, lv_palette_main(LV_PALETTE_LIGHT_GREEN)); //设置字体颜色
lv_obj_t * panel1 = lv_obj_create(lv_scr_act());
lv_obj_set_height(panel1, LV_SIZE_CONTENT);
lv_obj_set_size(panel1, 1000,400);
lv_obj_set_align(panel1,LV_ALIGN_TOP_MID);
lv_obj_t * obj1 = lv_label_create(panel1);
lv_obj_set_size(obj1, 200,100);
lv_label_set_text(obj1,"北边来了个鳎鰢");
lv_obj_add_style(obj1, &style_font,LV_STATE_DEFAULT);
lv_obj_set_style_text_color(obj1, lv_color_make(0xff, 0x00, 0x00), 0);
lv_obj_t * obj2 = lv_label_create(panel1);
lv_label_set_text(obj2,"Vehcile Type");
lv_obj_t * btn1 = lv_btn_create(panel1);
//lv_obj_set_height(btn1, LV_SIZE_CONTENT);
lv_obj_set_width(btn1, LV_SIZE_CONTENT);
lv_obj_t * btn_label = lv_label_create(btn1);
lv_label_set_text(btn_label, "按键1ABCfg");
lv_obj_add_style(btn_label, &style_font,LV_STATE_DEFAULT);
lv_obj_add_event_cb(btn1,btn_clicked_event_cb,LV_EVENT_CLICKED,NULL);
/* set grid layout of the panel1 */
static lv_coord_t grid_1_col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static lv_coord_t grid_1_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, 10, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
lv_obj_set_grid_cell(panel1, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_dsc_array(panel1, grid_1_col_dsc, grid_1_row_dsc);
lv_obj_set_grid_cell(obj1, LV_GRID_ALIGN_START, 2, 2, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(obj2, LV_GRID_ALIGN_STRETCH, 2, 4, LV_GRID_ALIGN_START, 1, 1);
lv_obj_set_grid_cell(btn1, LV_GRID_ALIGN_START, 2, 2, LV_GRID_ALIGN_CENTER, 3, 1);
lv_obj_t * panel2 = lv_obj_create(lv_scr_act());
lv_obj_set_align(panel2,LV_ALIGN_BOTTOM_MID);
lv_obj_set_size(panel2,1000,300);
lv_obj_t * label = lv_label_create(panel2);
lv_label_set_text(label, "南边来了个喇嘛");
lv_obj_set_size(label,400,100);
lv_obj_set_style_text_font(label, &lv_font_cn_common1, 0);
lv_obj_center(label);
}
至此,软件界面可显示中文,运行效果如图: