29. 画布部件

一、画布部件

  在 LVGL 的画布部件中，用户可以绘制任何内容，并为其添加特殊效果，该部件会使用 LVGL 的绘图引擎来绘制这些内容。画布部件只有一个组成部分：主体（LV_PART_MAIN）。

  LVGL 官方提供了一些与画布部件相关 API。

lv_obj_t * lv_canvas_create(lv_obj_t * parent);                             // 创建画布

void lv_canvas_set_buffer(lv_obj_t * obj, void * buf, int32_t w, int32_t h, lv_color_format_t cf);                              // 为画布设置缓冲区
void lv_canvas_copy_buf(lv_obj_t * obj, const lv_area_t * canvas_area, lv_draw_buf_t * dest_buf, const lv_area_t * dest_area);  // 将缓冲区复制到画布

void lv_canvas_set_px(lv_obj_t * obj, int32_t x, int32_t y, lv_color_t color, lv_opa_t opa);    // 设置像素的颜色和不透明度
lv_color32_t lv_canvas_get_px(lv_obj_t * obj, int32_t x, int32_t y);                            // 获取像素的颜色

void lv_canvas_fill_bg(lv_obj_t * obj, lv_color_t color, lv_opa_t opa);         // 用颜色填充画布
lv_image_dsc_t * lv_canvas_get_image(lv_obj_t * obj);                           // 获取画布的图像
void lv_canvas_set_palette(lv_obj_t * obj, uint8_t index, lv_color32_t color);  // 设置画布的调色板颜色

  画布的创建流程很简单，一共有三个步骤：

1. 为画布申请缓冲区内存。
2. 创建画布部件。
3. 为画布设置缓冲区。

二、实验例程

#include "lvgl.h"
#include "lv_port_disp_template.h"
#include "lv_port_indev_template.h"

#define CANVAS_WIDTH  100
#define CANVAS_HEIGHT 100

int main(void)
{
    HAL_Init();
    System_Clock_Init(8, 336, 2, 7);
    Delay_Init(168);

    SPI_Simulate_Init();
    // SRAM_Init();
    TIM_Base_Init(&g_tim6_handle, TIM6, 83, 999);
    __HAL_TIM_CLEAR_IT(&g_tim6_handle, TIM_IT_UPDATE);                          // 清除更新中断标志位
    HAL_TIM_Base_Start_IT(&g_tim6_handle);                                      // 使能更新中断，并启动计数器

    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    // 测试代码
    LV_DRAW_BUF_DEFINE(buffer, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);    // 定义画布缓冲区

    lv_obj_t *canvas = lv_canvas_create(lv_scr_act());                          // 创建画布部件
    lv_obj_center(canvas);                                                      // 画布部件居中对齐

    lv_canvas_set_draw_buf(canvas, &buffer);                                    // 设置画布的缓冲区
    lv_canvas_fill_bg(canvas, lv_color_hex3(0xCCC), LV_OPA_COVER);              // 填充颜色
  
    lv_draw_label_dsc_t label_dsc;                                              // 定义绘制标签
    lv_draw_label_dsc_init(&label_dsc);                                         // 初始化绘制标签
    label_dsc.color = lv_color_hex3(0xBFA);                                     // 设置标签颜色
    label_dsc.text = "Sakura";                                                  // 设置标签文本
  
    lv_layer_t layer;
    lv_canvas_init_layer(canvas, &layer);                                       // 初始化图层

    lv_area_t coords_text = {10, 10, 100, 30};                                  // 文本绘制区域坐标
    lv_draw_label(&layer, &label_dsc, &coords_text);                            // 绘制文本

    lv_canvas_finish_layer(canvas, &layer);                                     // 完成图层绘制

    while (1)
    {
        lv_timer_handler();
        Delay_ms(5);
    }
  
    return 0;
}