欢迎光临
我们一直在努力

Gui Guider导入自定义lvgl图标

一,在Gui Guider里只有少量的lvgl图标这显然不能满足使用要求

有两种方法显示图标:

1.一种是导入图片的形式但是这样比较占内存对于小内存的单片机来说是不可取的。

2.还有一种方法是使用lvgl图标这是一个轻量化的图标显示,所占内存和字符差不多这个教程来教会你怎么在Gui Guider导入vlgl图标。

二,在iconfont-阿里巴巴矢量图标库这个网站下载所需的图标

我选择的是单色图标在红框可以搜索想要的图标

三,

鼠标光标停留在想要下载图标会显示加入购物车

四,

1.点击购物车

2.点击下载代码

五,

下载的文件里有一个ttf格式的文件这是我们下载的字符库。

六,图标的字库有了,怎么查看里面的图标呢?这里提供一个在线查看的网站:

https://www.bejson.com/ui/font/

1.选择字体

2.选择下载的ttf文件

七,

这时可以看到刚才下载的图标

八,

点击所需图标出现一个Unicode格式的16进制:E503复制这个数字

九,

前面的使用到的图标是Unicode = 0xE503,但是LVGL不知道Unicode 是个什么东西,LVGL显示的字符是UTF(UTF-8)编码格式的

所以需要将Unicode转换成UTF-8

这里有一个在线转换工具

Unicode编码转换,UTF编码转换(UTF-8、UTF-16、UTF-32)

1.选择Unicode格式

2.输入0000E503前面补4个0

3.点击查询

4.复制对应字符:

 十,

打开gui guider在工具选择导入字体

ttf文件命名只能有字母和_有其他字符不能导入。

十一,

添加一个标签在文本处粘贴之前复制的字符这时可以看到显示的是个方框

 十二,

重点:在字符这里选择刚才导入的字体iconfont这时就可以显示图标了

 十三,

之所以导入到gui guider是因为方便我们更改图标颜色,字体,和位置让一切都可视化方便操作。

 十四,

下载到单片机里可以正常显示了。

赞(0)
未经允许不得转载:171主机测评 » Gui Guider导入自定义lvgl图标
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址