用户工具

站点工具


icore4tlvgl_22
银杏科技有限公司旗下技术文档发布平台
技术支持电话0379-69926675-801
版本 日期 作者 修改内容
V1.0 2020-12-18 yang 初次建立

实验二十二:Fonts字体(Overview)

一、字体

在 LVGL 中,字体是位图的集合以及渲染字母图像所需的其他信息。字体存储在 lv_font_t 变量中,可以在样式的 text_font 字段中设置。例如:

/* 设置样式的字体为28号 */
lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28); 

字体具有 bpp(bits per pixel每像素比特数)属性。它代表用了多少位来描述字体中的像素。这样,如果 bpp 较高,则字母的边缘更平滑,没有毛刺,界面更加美观。 bpp 的值可以是 1、2、4 和 8(值越高表示质量越好)。不过 bpp 值也影响字体所需的存储空间。例如,bpp = 4 所需空间比 bpp = 1 大近 4 倍。 除了存储消耗变大之外,bpp 值越大 , 在界面上进行字体渲染时 , 绘制速度也会越慢。

二、编码支持

LVGL 支持 ASCII 编码与UTF-8 编码的 Unicode 字符。 UTF-8 编码可以支持全球所有字符的显示,例如中文、图标字体等。编码的选择要在 lv_conf.h 头文件中的 LV_TXT_ENC 宏配置,默认为UTF-8编码。为了开发方便,最好把集成开发工具的编码也改成 UTF-8以将代码/文本保存为 UTF-8 格式。

/* 使用UTF-8编码 */
#define LV_TXT_ENC LV_TXT_ENC_UTF8
/* 或者使用ASCII编码 */
#define LV_TXT_ENC LV_TXT_ENC_ASCII

三、内置字体

有几种不同大小的内置字体,可以通过 LV_FONT_… 定义在 lv_conf.h 中启用。

LV_FONT_MONTSERRAT_12 12像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_14 14像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_16 16像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_18 18像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_20 20像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_22 22像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_24 24像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_26 26像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_28 28像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_30 30像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_32 32像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_34 34像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_36 36像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_38 38像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_40 40像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_42 42像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_44 44像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_46 46像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_48 48像素ASCII字符 + 内置符号
LV_FONT_MONTSERRAT_12_SUBPX 具有亚像素渲染的 12 像素字体
LV_FONT_MONTSERRAT_28_COMPRESSED 28像素压缩字体和 3 bpp
LV_FONT_DEJAVU_16_PERSIAN_HEBREW 16像素希伯来语,阿拉伯语,波斯字母及其所有形式
LV_FONT_SIMSUN_16_CJK 16像素 1000 个最常见的中日韩文字
LV_FONT_UNSCII_8 8 像素像素完美字体

内置字体是全局变量,其名称类似于 lv_font_montserrat_16 代表字体有16 像素高。要在某种样式中使用它们,只需使用文章开头的命令 lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_16) ,添加一个指向字体变量的指针。 内置字体的 bpp = 4,包含 ASCII 字符并使用 Montserrat 字体。 除了 ASCII 范围,以下符号也从 FontAwesome 字体添加到内置字体中。

符号可以单独使用,例如下面的代码,将显示一个✓字符。

void lv_gui_run(void){
    lvgl2rtt_init("lcd");                                      /* 初始化lvgl2rtt */
    lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label1, LV_SYMBOL_OK);
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
}

或与字符串一起使用:

void lv_gui_run(void){
    lvgl2rtt_init("lcd");                                      /* 初始化lvgl2rtt */
    lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label1, LV_SYMBOL_OK"Apply");
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
}

或更多符号一起使用:

void lv_gui_run(void){
    lvgl2rtt_init("lcd");                                 /* 初始化lvgl2rtt */
    lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label1, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
}

四、特殊功能

4.1、双向支持

大多数语言使用从左到右(简称 LTR)的书写方向,但是某些语言(例如希伯来语,波斯语或阿拉伯语)使用从右到左(简称 RTL)的书写方向。LVGL 不但支持 RTL 文本,而且还支持混合文本渲染(BiDi)。例如:

用户可以配置 lv_conf.h 中 LV_USE_BIDI 启用 BiDi 支持。 所有文本都有一个基本方向(LTR 或 RTL),该方向确定一些渲染规则和文本的默认对齐方式(左或右)。但是,在 LVGL 中基本方向不仅适用于标签,这是可以为每个对象设置的常规属性。如果未设置,则它将从父级继承。因此,设置屏幕的基本方向就足够了,每个对象都会继承它。

屏幕的默认基本方向可以通过 lv_conf.h 中的 LV_BIDI_BASE_DIR_DEF 来设置,其他对象将从其父对象继承基本方向。要设置对象的基本方向,使用 lv_obj_set_base_dir(obj, base_dir) 。可能的基本方向参数是:

  • LV_BIDI_DIR_LTR 从左到右基本方向
  • LV_BIDI_DIR_RTL 从右到左基本方向
  • LV_BIDI_DIR_AUTO 自动检测基准方向
  • LV_BIDI_DIR_INHERIT 从父级继承基本方向(非屏幕对象的默认方向)

下面的列表总结了 RTL 基本方向对对象的影响效果:

  • 默认情况下在右侧创建对象
  • lv_tabview :从右到左排列选项卡
  • lv_checkbox :选择框在右侧显示
  • lv_btnmatrix :从右到左显示按钮
  • lv_list :在右侧显示图标
  • lv_dropdown :将选项向右对齐
  • 文本在 lv_table、 lv_btnmatrix、 lv_keyboard、 lv_tabview、 lv_dropdown、 lv_roller、中被BiDi处理以正确显示。

4.2、阿拉伯语和波斯语支持

显示阿拉伯和波斯字符有一些特殊规则:字符的形式取决于它们在文本中的位置。如果隔离,开始,中间或结束位置,则需要使用同一字母的不同形式。除了这些连接规则外,还应考虑其他规则。 若要使LVGL 支持这些规则,需要启用 LV_USE_ARABIC_PERSIAN_CHARS 。不过该方法存在如下限制:

  • 仅支持显示文本(例如在标签上),文本输入(例如文本区域)不支持此功能。
  • 静态文本(即 const)不会被处理。例如,由 lv_label_set_text() 设置的文本将被 处理,但 lv_lable_set_text_static() 不会。
  • 文本获取函数(例如 lv_label_get_text() )将返回处理后的文本。

4.3、亚像素渲染

亚像素渲染意味着通过在红色,绿色和蓝色通道而不是像素级别上渲染将水平分辨率提高三倍。它利用了每个像素的物理颜色通道的位置,这样可以产生更高质量的字体抗锯齿。 亚像素渲染需要生成具有特殊设置的字体: 在LVGL官网在线字体生成时,勾选 Subpixel 选项框。

  • 在命令行工具中使用 –lcd 标志。请注意,生成的字体大约需要 3 倍的内存。
  • 仅当像素的颜色通道具有水平布局时,亚像素渲染才有效。也就是说,R,G,B 通道彼此相邻而不位于彼此之上。颜色通道的顺序也需要与库设置匹配。默认情况下,LVGL 采用 RGB 顺序,但是可以通过在 lv_conf.h 中设置 LV_SUBPX_BGR 为 1 来交换顺序。

4.4、压缩字体

字体的位图可以通过以下方式压缩

  • 在LVGL官网在线字体生成时,勾选在线转换器中的 Compressed 复选框。
  • 在命令行工具中不将 –no-compress 标志传递给脱机转换器(默认情况下应用压缩)。

较大的字体和较高的 bpp 压缩更有效。但是,渲染压缩字体的速度要慢 30%。因此,建议仅压缩用户界面的最大字体,因为

  • 他们需要最多的内存。
  • 他们可以更好地压缩。
  • 并且它们的使用频率可能不如中等大小的字体。(因此性能成本较小)。

五、添加新字体、符号

在LVGL中有几种方法可以向项目中添加新字体:

  1. 最简单的方法是使用官网在线字体转换器。只需设置参数,单击“转换”按钮,将字体复制到项目中并使用它。网址为:https://littlevgl.com/ttf-font-to-c-array 请务必仔细阅读该站点上提供的步骤,否则转换时会出错。
  1. 使用脱机字体转换器。(需要安装 Node.js)。
  1. 如果要创建类似内置字体(Roboto 字体和符号)但大小和/或范围不同的内容,则可以使用文件夹 lvgl/scripts/built_in_font 中的 built_in_font_gen.py 脚本。(需要 Python 环境并安装lv_font_conv )网址:https://github.com/lvgl/lv_font_conv

添加的新字体在使用前需要声明,否则就会报找不到字体的错误,要在文件中声明字体,可以使用 LV_FONT_DECLARE(my_font_name)

为了避免在每个地方都要去申明一次字体, 我们可以直接利用 lv_conf.h 文件中的 LV_FONT_CUSTOM_DECLARE 配置宏来进行全局申明:

#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(my_font_1) \
                               LV_FONT_DECLARE(my_font_2)

符号字体就是图标,在LVGL中既可以作为字体来显示,也可以作为图片来显示。LVGL中有一些从 FontAwesome 字体创建的内置符号,用户也可以添加新的符号字体,添加新字符与添加新字体我们在下一章节进行详细介绍,在此只简要介绍。

六、动态加载字体

函数 lv_font_load 可用于从文件加载字体,要加载的字体需要具有特殊的二进制格式。(不是 TTF 或 WOFF)。使用 lv_font_conv 工具与选项 –format bin 生成 LVGL 兼容的字体文件。lv_font_conv 工具网址:https://github.com/lvgl/lv_font_conv

请注意,要动态加载字体,需要启用 LVGL 的文件系统,并需要添加驱动程序。例如:

#lv_font_t * my_font;                              /* 创建新字体 */
my_font = lv_font_load(X/path/to/my_font.bin);     /* 加载字库文件 */
lv_font_free(my_font);                             /* 如果不再需要,则释放字体 */

七、添加新的字体引擎

LVGL 的字体界面设计得非常灵活。用户不使用 LVGL 的内部字体引擎也可以添加自己的字体。例如,使用 FreeType 从 TTF 字体实时渲染字形,或者使用外部闪存存储字体的位图,并在库需要它们时读取它们。

若要添加一个新的字体引擎需要创建一个自定义变量 lv_font_t ,详情请参考LVGL官方文档Fonts章节。

icore4tlvgl_22.txt · 最后更改: 2022/04/01 11:17 由 sean