LVGL『Canvas画布控件』介绍 |
您所在的位置：网站首页 › canvas旋转文字 › LVGL『Canvas画布控件』介绍 |
LVGL『Canvas画布控件』介绍
|
一. LVGL GUI画布控件的概念
画布继承自图像，用户可以在其中绘制任何内容。可以使用 lvgl 的绘图引擎在此处绘制矩形，文本，图像，圆弧。除了一些“效果”，还可以应用，例如旋转，缩放和模糊。 二. LVGL GUI画布小部件和样式画布的主要部分称为 LV_CANVAS_PART_MAIN ，只有 image_recolor 属性用于为LV_IMG_CF_ALPHA_1/2/4/8BIT 图像赋予颜色。 三. LVGL GU画布控件的使用 1. 缓冲(Buffer)画布需要一个缓冲区来存储绘制的图像。要将缓冲区分配给画布，请使用。静态缓冲区（不能是局部变量）在哪里， 用于保存画布的图像。例如， 。宏有助于确定具有不同颜色格式的缓冲区的大小。 使用的是这个函数lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...) 2. 调色板(Palette)对于 LV_IMG_CF_INDEXED_... 颜色格式，必须使用初始化调色板 ，使用这个函数lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)，将 index = 3 的像素设置为红色 3. 绘画(Drawing)用这个函数来设置像素点颜色lv_canvas_set_px(canvas, x, y, LV_COLOR_RED) 用这个函数来设置背景以及不透明度lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50) 用这个函数可以把数组复制到画板像素上lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height) 另外，可以在画板中绘制其他控件，如下： lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc) lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT) lv_canvas_draw_img(canvas, x, y, &img_src, &draw_dsc) lv_canvas_draw_line(canvas, point_array, point_cnt, &draw_dsc) lv_canvas_draw_polygon(canvas, points_array, point_cnt, &draw_dsc) lv_canvas_draw_arc(canvas, x, y, radius, start_angle, end_angle, &draw_dsc) 其中draw_dsc需要用这个函数进行初始化lv_draw_rect/label/img/line_dsc_init() 4. 转换(Transformations)lv_canvas_transform() 可用于旋转和/或缩放图像的图像并将结果存储在画布上。该函数需要以下 参数如下： canvas ：指向画布对象以存储转换结果的指针。img pointer ：转换为图像描述符。也可以是其他画布的图像描述符（ lv_canvas_get_img() ）。angle ：旋转角度（0..3600），0.1 度分辨率zoom ：缩放系数，基数是256，代表原比例（256 不缩放，512 倍大，128 缩小一倍）offset_x :偏移量 X 告诉将结果数据放在目标画布上的位置offset_y :偏移量 X 告诉将结果数据放在目标画布上的位置pivot_x :旋转的 X 轴。相对于源画布。设置为绕中心旋转 source width / 2pivot_y :旋转的枢轴 Y。相对于源画布。设置为绕中心旋转 source height / 2antialias true：在转换过程中应用抗锯齿。看起来更好，但速度较慢。请注意，画布无法自身旋转。您需要源和目标画布或图像 5. Blur(模糊)用这个函数可以指定水平模糊lv_canvas_blur_hor(canvas, &area, r) 用这个函数可以指定垂直模糊lv_canvas_blur_ver(canvas, &area, r) 6. 事件(Events)默认画布是不能点击的，所以没有任何时间，但是可以通过这个函数来使能点击lv_obj_set_click(canvas, true) 7. 源码示例我们直接来两个官方的例子自己看看效果吧 示例1 #define CANVAS_WIDTH 200 #define CANVAS_HEIGHT 150 void lvgl_canvas_test1(void) { lv_draw_rect_dsc_t rect_dsc; lv_draw_rect_dsc_init(&rect_dsc); rect_dsc.radius = 10; rect_dsc.bg_opa = LV_OPA_COVER; rect_dsc.bg_grad_dir = LV_GRAD_DIR_HOR; rect_dsc.bg_color = LV_COLOR_RED; rect_dsc.bg_grad_color = LV_COLOR_BLUE; rect_dsc.border_width = 2; rect_dsc.border_opa = LV_OPA_90; rect_dsc.border_color = LV_COLOR_WHITE; rect_dsc.shadow_width = 5; rect_dsc.shadow_ofs_x = 5; rect_dsc.shadow_ofs_y = 5; lv_draw_label_dsc_t label_dsc; lv_draw_label_dsc_init(&label_dsc); label_dsc.color = LV_COLOR_YELLOW; 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(), NULL); lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR); lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0); lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, 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", LV_LABEL_ALIGN_LEFT); /* Test the rotation. It requires an other buffer where the orignal 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_COLOR_SILVER, LV_OPA_COVER); lv_canvas_transform(canvas, &img, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true); }效果
效果：
好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
【本文地址】
今日新闻 |
推荐新闻 |