LVGL导入自定义字库与图标

首先声明,此文章主要内容来自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官方字体转换网站,在这个网站当中,有以下说明:

  1. 给输出字体命名
  2. 指定字体的大小,单位为像素
  3. 设置像素深度(抗锯齿效果),深度越大,字体看起来越流畅
  4. 选择ttf文件或者woff文件
  5. 使用Unicode编码的形式,列出想要转换的字体的范围,或者列出想要转换的字体的Unicode编码
  6. 直接输入相应的字体。(融合进.c文件这里不太明白)
  7. 点击转换,就可以下载对应的.c文件了

导入自定义图标的步骤如下

  • 下载图标,下载好的图标会保存到一个ttf文件里面。图标的下载在文章开头的文章链接中有详细介绍。

网站:iconfont-阿里巴巴矢量图标库

注册登录,搜索想要的图标,如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__*/


在同一个字体文件内可以同时带有字库和图标,点击下图中的按键,方法与上面介绍的一致


猜你喜欢

转载自blog.csdn.net/weixin_63096487/article/details/134578619