首先声明,此文章主要内容来自lvgl8.2 自定义符号_lvgl symbol-CSDN博客,这里更多的是作为个人的学习笔记。
目录
LVGL自带的图标可以在【官方文档---Overview---Fonts---Special feature】找到
如果LVGL自带的图标不足以满足要求,可以使用自定义的图标
导入自定义字库的步骤如下
- 下载字库,下载好的字库会保存到一个ttf文件里面,如果不知道ttf文件是什么,请自行谷歌。windows系统自带的字体保存在这个目录下面c:\windows\fonts,如果需要其他的,自行上网下载,网上资源丰富。(除了使用ttf文件外,还可以使用woff文件,这里不做介绍)
- 将ttf文件里面的文字转换成.c文件。
使用LVGL官方字体转换网站:https://lvgl.io/tools/fontconverter
- 为了方便管理,创建一个同名的.h文件(MyFonts32.h)
- 在.c文件对应的.h文件内,声明字体。LV_FONT_DECLARE(MyFonts32);
#ifndef __MYFONTS32_H__
#define __MYFONTS32_H__
#ifdef __cplusplus
extern "C" {
#endif
#include "lvgl.h"
//声明字体
LV_FONT_DECLARE(MyFonts32);
#ifdef __cplusplus
}
#endif
#endif /* __MYFONTS32_H__*/
对于LVGL官方字体转换网站,在这个网站当中,有以下说明:
- 给输出字体命名
- 指定字体的大小,单位为像素
- 设置像素深度(抗锯齿效果),深度越大,字体看起来越流畅
- 选择ttf文件或者woff文件
- 使用Unicode编码的形式,列出想要转换的字体的范围,或者列出想要转换的字体的Unicode编码
- 直接输入相应的字体。(融合进.c文件这里不太明白)
- 点击转换,就可以下载对应的.c文件了
导入自定义图标的步骤如下
- 下载图标,下载好的图标会保存到一个ttf文件里面。图标的下载在文章开头的文章链接中有详细介绍。
注册登录,搜索想要的图标,如wifi。把光标移动到对应的图标上,点击“购物车”,将对应的图标添加到购物车。
选完图标后。点击网页右上角的“购物车”
点击下载代码
会下载一个压缩包,解压,打开
通过demo_index.html打开一个网站
而iconfont.ttf文件里面就包含了我们下载下来的图标
- 将ttf文件里面的图标转换成.c文件
- 通过图标的Unicode编码得到其UTF-8编码,在进行宏定义时,需要用到其UTF-8编码。
相关网站:https://www.qqxiuzi.cn/bianma/Unicode-UTF.php。
为什么通过图标的Unicode编码得到其UTF-8编码呢?因为在LVGL程序中,是不能通过Unicode编码来使用相应的图标的,但是可以通过UTF-8编码来使用。相关的配置,在lv_conf.h中可以看到。
- 为了方便管理,创建一个同名的.h文件(MySymbol32.h)
- 在.c文件对应的.h文件内,对图标(UTF-8)进行宏定义。如果不进行宏定义,那么在使用时,就需要使用其UTF-8编码,比较麻烦,而且可读性很差。
- 在.c文件对应的.h文件内,声明字体
#ifndef __MYSYMBOL32_H__
#define __MYSYMBOL32_H__
#ifdef __cplusplus
extern "C" {
#endif
#include "lvgl.h"
//声明字体
LV_FONT_DECLARE(MySymbol32);
//宏定义
//被替换的内容,如"\xEE\x9C\x8F"是通过图标的Unicode编码得到其UTF-8编码
//至于格式为什么是这个样子,不清楚
#define USER_SYMBOL_SETTING "\xEE\x9C\x8F" //Unicode:0xe70f
#define USER_SYMBOL_WIFI "\xEE\x9D\xAC" //Unicode:0xe76c
#ifdef __cplusplus
}
#endif
#endif /* __MYSYMBOL32_H__*/
在同一个字体文件内可以同时带有字库和图标,点击下图中的按键,方法与上面介绍的一致