LVGL学习
LVGL学习
最基本的实现弧形文字功能,通过AI实现;
大致了解到,lvgl使用bitmap字体时,非常消耗栈空间,需要20K;
lvgl的弧形文字大概绘制过程:
- 获取字体(这一步就是使用bitmap还是outline模式,bitmap费内存,outline目前不支持旋转)
- 创建容器对象
- 设置容器的属性,尺寸大小,透明度,标志(是否可点击,事件是否需要上报给父对象等)等等,这一步需要对lvgl有一定了解(跟AI描述会有一定的引导作用,甚至可以直接实现)
- 获取字符串内容
- 计算弧度,确定字符起始位置(基本上就是用总字符宽度来计算其所占的弧度,具体算法可以让AI编写)
- 为每个字符创建标签,然后设置标签的字体,颜色等等,根据每个字符的宽度,计算其所占弧度,确定每个字符的位置,并移动和旋转其所在标签(具体算法也是可以让ai完成)
- 最后需要给容器和字体注册销毁接口
- 最终要调用重绘接口,给lvgl声明可以重绘该容器
在立方体表盘中加入弧形文字
该任务的难点在于,原先实现的立方体表盘,其背景和立方体,是一起绘制的,直接输出到lvgl的默认输出buf中;
原本的绘制原理:
创建了render_view作为父对象,然后收集立方体和背景的颜色,尺寸等信息,同时收集立方体各个面上要展示的内容,如果有视频,会启动h264的解码线程,然后是使用nema的接口在收到LV_EVENT_DRAW_POST_END事件时绘制,直接输出到lvgl的默认输出buf中(这里我个人理解,会导致背景和立方体是一体的,同时处于lvgl图层的最底层);
修改方案:
- 需要将背景和立方体,分别输出到两个canvas的buffer中,这样它们的层级就会跟着canvas走;然后在中间插入弧形文字容器;这样就可以完成背景-》弧形文字-》立方体的展示层级;
- 这中间产生的问题,需要把背景和立方体的canvas以及弧形文字容器的父对象都设置为render_view。因为原本的实现中,给render_view设置的很多标志,以及事件处理回调,同时也把render_view放置在了dial_view之上,因此不能让dial_view作为父对象;
- 创建好canvas之后,发现,立方体的canvas会完全遮住背景的canvas,无法设置透明度,这个折腾好久,最后问了涛哥才知道,是颜色编解码格式的问题,不能用TSC12格式,不带透明度信息,要用TSC12A格式,才有透明度信息;(这个问题的发现过程是,首先是确认了输出到canvas buffer来控制层级这个思路没错,经过自己验证,以及查看别人写的示例代码,跟涛哥毛哥讨论,确认是没错的;然后就尝试,自己开个头,让AI一点一点写,比如说只写个建立canvas的过程,然后尝试,什么都不画,只确认层级,哪个canvas在上面,哪个canvas能显示,显示的颜色符不符合预期;并且让AI一句一句的解释原来的代码,每一句都是在干嘛搞清楚;然后自己新写的也要让AI解释清楚,理解每一句在干啥;这样的过程之后,发现无法设置透明度,然后才跟涛哥毛哥请教,知道了TSC编解码格式没有透明度;因此立方体绘制不能用这个格式;换成TSC12A之后,就好了)
- 成功把背景和立方体拆开之后,就支持在他俩中间调用创建弧形文字的接口,即可形成预期的层级;LVGL的层级是先画的在下面;