LVGL-画布
LV_CANVAS_BUF_SIZE_TRUE_COLOR
可以计算画布的大小
LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)
//CANVAS_WIDTH:画布的宽
//CANVAS_HEIGHT:画布的高
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];//存储画布大小的缓冲区，不能是局部变量
lv_canvas_create函数
函数用于创建一个画布（Canvas）对象
lv_obj_t *lv_canvas_create(lv_obj_t *parent);
//parent:画布的父对象
//ret:指向新创建的画布对象的指针
lv_canvas_set_buffer函数
用于为画布（Canvas）设置缓冲区
void lv_canvas_set_buffer(lv_obj_t * obj, void * buf, int32_t w, int32_t h, lv_color_format_t cf);
//obj：指向画布对象的指针
//w：画布的宽度
//h：画布的高度
//cf：颜色格式:LV_IMG_CF_INDEXED_1BIT LV_IMG_CF_TRUE_COLOR LV_IMG_CF_INDEXED_2BIT
lv_canvas_set_palette函数
用于设置画布（Canvas）调色板颜色
void lv_canvas_set_palette(lv_obj_t * obj, uint8_t id, lv_color_t c);
//obj：指向画布对象的指针
//id：调色板中颜色的索引位置。索引范围取决于颜色格式：
//c：要设置的颜色值
lv_palette_main函数
用于获取预定义颜色调色板中的主颜色
lv_color_t lv_palette_main(lv_palette_t palette);
//palette：指定的颜色调色板，例如 LV_PALETTE_RED、LV_PALETTE_GREEN 等。
//ret:返回指定调色板的主颜色
lv_canvas_fill_bg函数
用于填充画布背景的函数
void lv_canvas_fill_bg(lv_obj_t * canvas, lv_color_t color, lv_opa_t opa);
//canvas：指向画布对象的指针
//color：要填充的颜色值
//opa：颜色的透明度，取值范围为 LV_OPA_TRANSP（完全透明）0x00到 LV_OPA_COVER（完全不透明）0xff。LV_OPA_50
lv_canvas_set_px_color函数
用于设置画布上单个像素颜色的函数。
void lv_canvas_set_px_color(lv_obj_t * canvas, uint32_t x, uint32_t y, lv_color_t color);
//canvas：指向画布对象的指针
//x：像素的水平坐标（从左到右）
//y：像素的垂直坐标（从上到下）
//color：要设置的颜色值。
lv_canvas_copy_buf函数
用于将像素数组复制到画布的函数
void lv_canvas_copy_buf(lv_obj_t * canvas, const void * to_copy, lv_coord_t x, lv_coord_t y, lv_coord_t w, lv_coord_t h);
//canvas：指向画布对象的指针
//to_copy：要复制的像素数组
//x：目标位置的左边界
//y：目标位置的上边界
//w：要复制的宽度
//h：要复制的高度
lv_canvas_draw_rect函数
用于在画布上绘制矩形的函数
void lv_canvas_draw_rect(lv_obj_t * canvas, int32_t x, int32_t y, int32_t w, int32_t h, const lv_draw_rect_dsc_t * draw_dsc);
//canvas：指向画布对象的指针
//x：矩形左上角的 x 坐标
//y：矩形左上角的y 坐标
//w：矩形的宽度
//h：矩形的高度
//draw_dsc：指向 lv_draw_rect_dsc_t 结构体的指针，该结构体包含绘制矩形所需的样式和参数。
lv_draw_rect_dsc_init函数
用于初始化矩形绘制描述符的函数
void lv_draw_rect_dsc_init(lv_draw_rect_dsc_t * dsc);
//dsc：指向 lv_draw_rect_dsc_t 结构体的指针，该结构体用于描述矩形的绘制样式
/*结构体成员变量
bg_color 背景色，用于填充矩形区域的颜色
bg_opa 背景透明度，取值范围为 LV_OPA_TRANSP（完全透明）到 LV_OPA_COVER（完全不透明）
border_color 边框颜色，用于绘制矩形的边框
border_width 边框宽度，指定矩形边框的粗细
radius 圆角半径，指定矩形四个角的圆角半径
bg_grad_dir 背景渐变方向，例如 LV_GRAD_DIR_VER 表示垂直方向的渐变
bg_grad_stops 渐变颜色停止点数组，用于定义渐变效果
shadow_color 阴影颜色，用于绘制矩形的阴影
shadow_width 阴影宽度，指定阴影的大小
shadow_ofs_x 阴影在 x 方向的偏移量
shadow_ofs_y 阴影在 y 方向的偏移量
*/
lv_canvas_draw_text函数
用于在画布上绘制文本的函数
void lv_canvas_draw_text(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, lv_coord_t max_w, lv_draw_label_dsc_t * draw_dsc, const char * txt);
//canvas：指向画布对象的指针
//x：文本的左上角 x 坐标
//y：文本的左上角 y 坐标
//max_w：文本的最大宽度。如果文本超出此宽度，将会自动换行
//draw_dsc：指向 lv_draw_label_dsc_t 结构体的指针，该结构体用于描述文本的绘制样式
//txt：要绘制的文本字符串
/*
color 文本颜色，指定文本的前景颜色
font 字体，指定文本使用的字体
text 文本内容，指向要绘制的文本字符串
align 文本对齐方式，如 LV_TEXT_ALIGN_LEFT、LV_TEXT_ALIGN_CENTER 等。
letter_space 字间距，指定字符之间的额外间距
line_space 行间距，指定行与行之间的额外间距
sel_start 选择区域的起始位置，用于高亮显示文本的一部分
sel_end 选择区域的结束位置
sel_color 选择区域的颜色，用于高亮显示文本的一部分
sel_bg_color 选择区域的背景颜色
sel_bg_opa 选择区域背景的透明度
angle 文本旋转角度，用于绘制旋转文本
*/
lv_canvas_draw_img函数
用于在画布上绘制图像的函数
void lv_canvas_draw_img(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, const lv_img_dsc_t * img);
//canvas：指向画布对象的指针
//x：图像左上角的 x 坐标
//y：图像左上角的 y 坐标
//img：指向 lv_img_dsc_t 结构体的指针，该结构体包含图像的数据和属性
/*
lv_img_dsc_t 是 LVGL 中用于描述图像的结构体，包含以下成员：
header：图像的元数据，包括宽度、高度、颜色格式等。
data：图像的像素数据。
*/
lv_canvas_draw_line函数
用于在画布上绘制直线的函数
void lv_canvas_draw_line(lv_obj_t * canvas, lv_point_t * points, uint32_t point_num, const lv_draw_line_dsc_t * draw_dsc);
//canvas：指向画布对象的指针
//points：指向 lv_point_t 数组的指针，该数组包含直线的起点和终点坐标
//point_num：点的数量，通常为 2（表示起点和终点）
//draw_dsc：指向 lv_draw_line_dsc_t 结构体的指针，该结构体用于描述直线的绘制样式
/*
lv_draw_line_dsc_t 结构体
lv_draw_line_dsc_t 是 LVGL 中用于描述直线绘制样式的结构体，包含以下成员：
color：直线的颜色。
width：直线的宽度。
opa：直线的透明度。
rounded：是否绘制圆角直线。
*/
lv_canvas_draw_polygon函数
用于在画布上绘制多边形的函数
void lv_canvas_draw_polygon(lv_obj_t * canvas, const lv_point_t * points, uint32_t point_cnt, const lv_draw_line_dsc_t * draw_dsc);
//canvas：指向画布对象的指针
//points：指向 lv_point_t 数组的指针，该数组包含多边形的顶点坐标
//point_cnt：顶点的数量
//draw_dsc：指向 lv_draw_line_dsc_t 结构体的指针，该结构体用于描述多边形的绘制样式
/*
lv_draw_line_dsc_t 是 LVGL 中用于描述线条绘制样式的结构体，包含以下成员：
color：线条的颜色。
width：线条的宽度。
opa：线条的透明度。
rounded：是否绘制圆角线条。
*/
lv_canvas_draw_arc函数
用于在画布上绘制圆弧或圆形的函数
void lv_canvas_draw_arc(lv_obj_t * canvas, lv_point_t center, uint32_t radius, int32_t start_angle, int32_t end_angle, const lv_draw_line_dsc_t * draw_dsc);
//canvas：指向画布对象的指针
//center：圆弧的中心点坐标，类型为 lv_point_t
//radius：圆弧的半径
//start_angle：圆弧的起始角度，单位为度
//end_angle：圆弧的结束角度，单位为度
//draw_dsc：指向 lv_draw_line_dsc_t 结构体的指针，该结构体用于描述圆弧的绘制样式
/*
lv_draw_line_dsc_t 是 LVGL 中用于描述线条绘制样式的结构体，包含以下成员：
color：线条的颜色。
width：线条的宽度。
opa：线条的透明度。
rounded：是否绘制圆角线条
*/
lv_canvas_transform函数
用于对图像进行旋转和/或缩放的函数并将结果存储在画布上
void lv_canvas_transform(lv_obj_t * canvas, lv_img_dsc_t * img, int16_t angle, uint16_t zoom, lv_coord_t offset_x, lv_coord_t offset_y, int32_t pivot_x, int32_t pivot_y, bool antialias);
//canvas：指向画布对象的指针，用于存储变换结果
//img：指向要变换的图像描述符的指针，也可以是另一个画布的图像描述符
//angle：旋转角度（0..3600），分辨率为0.1度
//zoom：缩放因子（256表示无缩放，512表示双倍大小，128表示半大小）
//offset_x：X方向的偏移量，用于确定结果数据在目标画布上的位置
//offset_y：Y方向的偏移量，用于确定结果数据在目标画布上的位置
//pivot_x：旋转的X轴，相对于源画布。设置为 源宽度 / 2 可以围绕中心旋转
//pivot_y：旋转的Y轴，相对于源画布。设置为 源高度 / 2 可以围绕中心旋转
//antialias：是否应用抗锯齿。应用抗锯齿可以使变换效果更好，但速度较慢
lv_canvas_blur_hor函数
用于对画布的指定区域应用水平模糊效果的函数
typedef struct {
int32_t x1; /* 左上角的 X 坐标 */
int32_t y1; /* 左上角的 Y 坐标 */
int32_t x2; /* 右下角的 X 坐标 */
int32_t y2; /* 右下角的 Y 坐标 */
} lv_area_t;
void lv_canvas_blur_hor(lv_obj_t * canvas, const lv_area_t * area, uint16_t r);
//canvas：指向画布对象的指针
//area：指向 lv_area_t 结构体的指针，该结构体定义了要模糊的区域。如果为 NULL，则对整个画布应用模糊效果
//r：模糊的半径，值越大表示模糊效果越强
lv_canvas_blur_ver函数
用于对画布的指定区域应用垂直模糊效果的函数
typedef struct {
int32_t x1; /* 左上角的 X 坐标 */
int32_t y1; /* 左上角的 Y 坐标 */
int32_t x2; /* 右下角的 X 坐标 */
int32_t y2; /* 右下角的 Y 坐标 */
} lv_area_t;
void lv_canvas_blur_ver(lv_obj_t * canvas, const lv_area_t * area, uint16_t r);
//canvas：指向画布对象的指针
//area：指向 lv_area_t 结构体的指针，该结构体定义了要模糊的区域。如果为 NULL，则对整个画布应用模糊效果
//r：模糊的半径，值越大表示模糊效果越强
画布使用流程
简单使用流程
- 先定义静态缓冲区
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];
- 创建一个画布对象
lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
- 为画布设置缓冲区
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
- 设置画布调色板的颜色
lv_canvas_set_palette(canvas, 1, lv_palette_main(LV_PALETTE_RED));
- 为调色板设置颜色索引
lv_color_t c0;
lv_color_t c1;
c0.full = 0;
c1.full = 1;
//example
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Create a transparent canvas with Chroma keying and indexed color format (palette).
*/
void lv_example_canvas_2(void)
{
/*Create a button to better see the transparency*/
lv_btn_create(lv_scr_act());
/*Create a buffer for the canvas*/
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
lv_canvas_set_palette(canvas, 0, LV_COLOR_CHROMA_KEY);
lv_canvas_set_palette(canvas, 1, lv_palette_main(LV_PALETTE_RED));
/*Create colors with the indices of the palette*/
lv_color_t c0;
lv_color_t c1;
c0.full = 0;
c1.full = 1;
/*Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)*/
lv_canvas_fill_bg(canvas, c1, LV_OPA_COVER);
/*Create hole on the canvas*/
uint32_t x;
uint32_t y;
for(y = 10; y < 30; y++) {
for(x = 5; x < 20; x++) {
lv_canvas_set_px_color(canvas, x, y, c0);
}
}
}
第二个例子
void lv_example_canvas_1(void)
{
lv_draw_rect_dsc_t rect_dsc;//定义一个绘制矩形的结构体
lv_draw_rect_dsc_init(&rect_dsc);//对结构体进行初始化
rect_dsc.radius = 10;//圆角半径为10
rect_dsc.bg_opa = LV_OPA_COVER;//不透明
rect_dsc.bg_grad.dir = LV_GRAD_DIR_HOR;//背景渐变方向为水平渐变
rect_dsc.bg_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);//设置渐变起点为红色
rect_dsc.bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);//设置渐变终点为蓝色
rect_dsc.border_width = 2;//边框宽度为2
rect_dsc.border_opa = LV_OPA_90;//设置透明度为90
rect_dsc.border_color = lv_color_white();//设置边框颜色为白色
rect_dsc.shadow_width = 5;//设置阴影宽度为5
rect_dsc.shadow_ofs_x = 5;//阴影在x轴方向的偏移
rect_dsc.shadow_ofs_y = 5;//阴影在y轴方向的偏移
lv_draw_label_dsc_t label_dsc;//定义标签结构体
lv_draw_label_dsc_init(&label_dsc);//对标签结构体进行初始化
label_dsc.color = lv_palette_main(LV_PALETTE_ORANGE);//设置文本颜色为橙色
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];//定义画布存储空间
lv_obj_t * canvas = lv_canvas_create(lv_scr_act());//创建一个画布
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);//设置画布缓冲区大小
lv_obj_center(canvas);//设置画布缓冲区位于其父对象的中心位置
lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER);//填充画布背景
lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &rect_dsc);//在画布上绘制矩形
lv_canvas_draw_text(canvas, 40, 20, 100, &label_dsc, "Some text on text canvas");//在画布上填充文本信息
/*Test the rotation. It requires another buffer where the original image is stored.
*So copy the current image to buffer and rotate it to the canvas*/
static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];//定义颜色缓冲区
memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));//内存拷贝
lv_img_dsc_t img; //定义存储图像的结构体
img.data = (void *)cbuf_tmp;//图像数据
img.header.cf = LV_IMG_CF_TRUE_COLOR;//图像颜色格式
img.header.w = CANVAS_WIDTH;//图像的宽
img.header.h = CANVAS_HEIGHT;//图像的高
lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER); //填充画布背景颜色
lv_canvas_transform(canvas, &img, 120, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);//对图像进行缩放
}
浙公网安备 33010602011771号