LittleVGL 学习笔记1-标签，风格，字体
2024-07-02 13:18:11
LittleVGL 学习笔记（一）
设置父类
- 建立显示屏scr为父类，显示屏一般父类为显示屏
lv_obj_t* scr = lv_scr_act();
建立标签子类
- 声明标签子类
举例：lv_obj_t* label1；
- 在父类中创建标签子类
/****************************************************************************************************
*@par : 该子类存在的父类，比如显示屏scr
*@copy : 传入的参数，一般为NULL
*******************************************************************************************************/
lv_obj_t * lv_label_create(lv_obj_t * par, const lv_obj_t * copy)
举例：label1 = lv_label_create(scr, NULL);
- 设置标签模式
enum {//标签宽度随文本大小改变LV_LABEL_LONG_EXPAND, /**< Expand the object size to the text size*///标签高度随文本大小改变，自动换行LV_LABEL_LONG_BREAK, /**< Keep the object width, break the too long lines and expand the objectheight*///文本长度超过标签长度部分显示。。。 LV_LABEL_LONG_DOT, /**< Keep the size and write dots at the end if the text is too long*///文本长度超过标签长度前后滚动 LV_LABEL_LONG_SROLL, /**< Keep the size and roll the text back and forth*///文本长度超过标签长度循环滚动 LV_LABEL_LONG_SROLL_CIRC, /**< Keep the size and roll the text circularly,text lenth must more than the label lenth*/文本长度超过标签长度本分不显示LV_LABEL_LONG_CROP, /**< Keep the size and crop the text out of it*/
};
/****************************************************************************************************
*@label: 标签名称
*@lv_label_long_mode_t : 标签模式
*******************************************************************************************************/
void lv_label_set_long_mode（lv_obj_t * label, lv_label_long_mode_t long_mode);
举例：lv_label_set_long_mode（label1, LV_LABEL_LONG_EXPAND);
- 设置标签宽度/高度/尺寸
/****************************************************************************************************
*@obj： 标签名称
*@w： 标签宽度
*******************************************************************************************************/
void lv_label_set_width(lv_obj_t * obj, lv_coord_t w)
举例：lv_label_set_width(label1,100);
/****************************************************************************************************
*@obj： 标签名称
*@h： 标签高度
*******************************************************************************************************/
void lv_obj_set_height(lv_obj_t * obj, lv_coord_t h)
举例：lv_obj_set_height(label1,100);
/****************************************************************************************************
*@obj： 标签名称
*@w: 标签长度
*@h： 标签高度
*******************************************************************************************************/
void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)
举例：lv_obj_set_height(label1,100,100);
- 设置标签风格
/****************************************************************************************************
*@label： 标签名称
*@type： 标签类型
*@style： 标签风格
*******************************************************************************************************/
static inline void lv_label_set_style(lv_obj_t * label, lv_label_style_t type, const lv_style_t * style)
举例：lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&lv_style_plain_color);
设定自定义风格：
风格结构体定义
typedef struct
{uint8_t glass : 1; /**< 1: Do not inherit this style*//** Object background. */struct{//上半部分颜色lv_color_t main_color; /**< Object's main background color. *///下半部分颜色lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. *///4角的圆角弧度lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. *///透明度lv_opa_t opa; /**< Object's opacity (0-255). *///边框设置struct{//边框颜色lv_color_t color; /**< Border color *///边框宽度lv_coord_t width; /**< Border width *///边框位置-上/下/左/右lv_border_part_t part; /**< Which borders to draw *///边框阴影lv_opa_t opa; /**< Border opacity. */} border;//阴影设置struct{//阴影颜色lv_color_t color; //阴影宽度lv_coord_t width;//阴影类型lv_shadow_type_t type; /**< Which parts of the shadow to draw */} shadow;//边距设置struct{lv_coord_t top;lv_coord_t bottom;lv_coord_t left;lv_coord_t right;lv_coord_t inner;} padding;} body;/** Style for text drawn by this object. *///文字设置struct{//文本颜色lv_color_t color; /**< Text color *///文本选中颜色lv_color_t sel_color; /**< Text selection background color. *///文本字体const lv_font_t * font;//文本间距lv_coord_t letter_space; /**< Space between letters *///文本行距lv_coord_t line_space; /**< Space between lines (vertical) *///文本透明度lv_opa_t opa; /**< Text opacity */} text;/**< Style of images. *///图片设置struct{lv_color_t color; /**< Color to recolor the image with */lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */lv_opa_t opa; /**< Opacity of whole image */} image;/**< Style of lines (not borders). */struct{lv_color_t color;lv_coord_t width;lv_opa_t opa;uint8_t rounded : 1; /**< 1: rounded line endings*/} line;
} lv_style_t;
//一定要定义static或者全局变量，否则会无法显示
static lv_style_t my_style;
//将lv_style_plain_color复制到my_style中，这样可以只配置自己需要的参数
lv_style_copy(&my_style,&lv_style_plain_color)
//上下部分颜色不一样将出现渐变色效果
my_style.body.main_color = LV_COLOR_BLUE;
my_style.body.grad_color = LV_COLOR_YELLOW;
//4角变成5mm圆角
my_style.body.radius = 5;
//边框透明度设置0~255，255为不透明
my_style.body.opa = LV_OPA_COVER;
//边距设置
my_style.body.padding.top = 10;
//阴影设置
my_style.body.shadow.type = LV_SHADOW_FULL;
my_style.body.shadow.width = 10;
my_style.body.shadow.color = LV_COLOR_RED;
//边框设置
my_style.body.border.color = LV_COLOR_BLACK;
my_style.body.border.width = 1;
my_style.body.border.part = LV_BORDER_FULL;
my_style.body.border.opa = LV_OPA_100;
//文字设置
my_style.text.color = LV_COLOR_RED;
my_style.text.font = &lv_font_roboto_28; //字体选择
my_style.text.line_space = 10; //文字间水平距离
my_style.text.letter_space = 10; //文字间垂直距离
- 使能背景绘制
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*******************************************************************************************************/
void lv_label_set_body_draw(lv_obj_t * label, bool en)
举例：lv_label_set_body_draw(label1,true);
- 使能标签点击功能(非必要)
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*******************************************************************************************************/
void lv_label_set_click(lv_obj_t * label, bool en)
举例：
lv_label_set_click(label1,true);
lv_obj_set_event_cb(label1,event_handler);//设置事件回调函数
- 设置标签文本
/****************************************************************************************************
*@label 标签名称
*@en 是否使能
*@text 显示的文本
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
void lv_label_set_text(lv_obj_t * label, const char * text)
举例：
lv_label_set_recolor(label2,true);//使能文本重绘色功能,不需要可以不用
lv_label_set_text(label2,"Please #00ff00 click #me!");//设置文本
9.位置对齐：如标签的位置对齐
/** Object alignment. */
enum {LV_ALIGN_CENTER = 0,LV_ALIGN_IN_TOP_LEFT,LV_ALIGN_IN_TOP_MID,LV_ALIGN_IN_TOP_RIGHT,LV_ALIGN_IN_BOTTOM_LEFT,LV_ALIGN_IN_BOTTOM_MID,LV_ALIGN_IN_BOTTOM_RIGHT,LV_ALIGN_IN_LEFT_MID,LV_ALIGN_IN_RIGHT_MID,LV_ALIGN_OUT_TOP_LEFT,LV_ALIGN_OUT_TOP_MID,LV_ALIGN_OUT_TOP_RIGHT,LV_ALIGN_OUT_BOTTOM_LEFT,LV_ALIGN_OUT_BOTTOM_MID,LV_ALIGN_OUT_BOTTOM_RIGHT,LV_ALIGN_OUT_LEFT_TOP,LV_ALIGN_OUT_LEFT_MID,LV_ALIGN_OUT_LEFT_BOTTOM,LV_ALIGN_OUT_RIGHT_TOP,LV_ALIGN_OUT_RIGHT_MID,LV_ALIGN_OUT_RIGHT_BOTTOM,
};
/****************************************************************************************************
*@obj： 名称
*@base： 对齐基准，如果是NULL则选择父类
*@align： 对齐位置
*@x_mod： x偏移位置
*@y_mod： y偏移位置
*******************************************************************************************************/
void lv_obj_align(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_mod, lv_coord_t y_mod)
举例：lv_obj_align(label2,NULL,LV_ALIGN_CENTER,0,0);
- 标签文本对齐
enum {LV_LABEL_ALIGN_LEFT, /**< Align text to left */LV_LABEL_ALIGN_CENTER, /**< Align text to center */LV_LABEL_ALIGN_RIGHT, /**< Align text to right */
};
/****************************************************************************************************
*@label： 标签名称
*@align： 对齐位置
*******************************************************************************************************/
void lv_label_set_align(lv_obj_t * label, lv_label_align_t align)
举例：lv_label_set_align(label1,LV_LABEL_ALIGN_CENTER);
- 标签内文本颜色重绘（非必要）
/****************************************************************************************************
*@label： 标签名称
*@en： 使能
*******************************************************************************************************/
void lv_label_set_recolor(lv_obj_t * label, bool en)
举例：
lv_label_set_recolor(label1,true);
lv_label_set_text(label1,"Please #00ff00 click #me!");//#颜色 #设置文本颜色
- 标签内文本插入与剪切
插入
/****************************************************************************************************
*@label： 标签名称
*@pos: 插入位置
*@txt： 插入文本内容
*******************************************************************************************************/
void lv_label_ins_text(lv_obj_t * label, uint32_t pos, const char * txt)
举例：lv_label_ins_text(label1,0,"OK");//在0位置插入ok
剪切
/****************************************************************************************************
*@label： 标签名称
*@pos: 插入位置
*@cnt： 剪切的字符数
*******************************************************************************************************/
void lv_label_cut_text(lv_obj_t * label, uint32_t pos, uint32_t cnt)
举例：lv_label_cut_text(label1,0,2);//从0位置剪切2个字符
- 标签内文本动画速度：专门针对LV_LABEL_LONG_SROLL与LV_LABEL_LONG_SROLL_CIRC
/****************************************************************************************************
*@label： 标签名称
*@anim_speed: 动画速度
*******************************************************************************************************/
void lv_label_set_anim_speed(lv_obj_t * label, uint16_t anim_speed)
举例：lv_label_set_anim_speed(label1,20);
LittleVGL 学习笔记1-标签，风格，字体相关推荐
- Git学习笔记：标签管理以及GItHub
前言 在补习python的时候主要参考的是廖雪峰的教程Python教程,在学习完后准备完成期末作业时,遇到了一个技术难题,需要初步掌握git,因此开始了git的学习. 本教程参考廖雪峰的Git教程 G ...
- 【Unity学习笔记】标签（Tag）和层（Layer）
声明:此篇文章是个人学习笔记,并非教程,所以内容可能不够严谨.可作参考,但不保证绝对正确.如果你发现我的文章有什么错误,非常欢迎指正,谢谢哦. 此篇文章是根据官网手册总结:https://docs.u ...
- Bootstrap学习笔记--常用标签和类模板
h标签:bootstrap中的h标签被改写了 比原标签字体要细 <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3&g ...
- FreeTpye库学习笔记：将矢量字体解析为位图
目录 一.前言 二.FreeType解析矢量(.ttf)字体 2.1 包含头文件 2.2 初始化 FreeType 库 2.3 加载 FT_Face 2.4 设置字体编码方式 2.5 设置字体大小 2 ...
- Struts2学习笔记——StrutsTags(标签)
Struts2的标签使用起来很方便.一个网页来进行测试: <?xml version="1.0" encoding="GB18030" ?> < ...
- 第七节 Html字体样式,HTML学习笔记 CSS文本及字体及连接及列表 第七节 （原创）(示例代码)...
文本及字体及连接及列表 hello tzy 静夜思 床前明月光 疑是地上霜 床前明月光 疑是地上霜 this is web page This is wEb pAge tHis is wEb page ...
- littleVGL学习笔记5——lv_obj 基础对象
1.介绍 littleVGL 是以对象为概念的,而其最核心的基础对象是 lv_obj 控件,其他的所有专用控件(比如按钮,标签,列表等)都是在此 lv_obj 对象的基础上衍生出来的,所有的控件对 ...
- 汇编语言学习笔记-按指定的字体输出文本
代码 .386 .model flat,stdcall;内存平坦,参数传递约定 option casemap:none;大小写敏感 ;;;;;;引用一些必要的数据 include D:\masm32\ ...
- HTML学习笔记：设置文本字体
目录 一.设置字体名 1.演示效果 2.编写源码 二.设置字号 1.使用单位设置字号 (1)常用单位 (2)案例演示 (3)编写代码 2.使用关键字设置字号 (1)绝对关键字 (2)相对关键字 一.设 ...
最新文章
- python退出程序-【转】python 退出程序的方式
- 如何用eclispe远程调试tomcat--转载
- autocad.net中判断当前被激活的空间
- Tensorflow中文文档
- 实例化Spring Bean：Bean实例化的姿势有多少种？
- php sslbug,PHP错误抑制符(@)导致引用传参失败Bug的分析
- Kewail-邮件短信接口的基础教程
- 出差费用管理模块的几个问题
- Spring : Spring profile 实现多环境支持
- 无线路由器天线上绑几个电池，真的会增强发射信号吗？
- cast函数 oracle 日期_从 Oracle 到 PostgreSQL ，某保险公司迁移实践
- 计算机的时代背景,学生计算机论文,关于新时代背景下的中专计算机教学相关参考文献资料-免费论文范文...
- 电脑散热风扇轴承分类
- uml点餐系统活动图_UML 活动图
- 生活随记 - NBA总决赛第6场 球迷有感
- 数据总线技术框架说明
- 多元线性回归--案例分析及python实践
- vivo手机计算机怎么开语音,vivo怎么打开语音助手
- H5APP WEB 支付开发 （银联 微信 支付宝）流程
- 噩梦射手（SurvivalShooter）教程（五）