canvas for little vGL

• 定義畫布的大小

  #define CANVAS_WIDTH    200
  #define CANVAS_HEITH    150

• 定義樣式

    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.body.main_color = LV_COLOR_RED;
    style.body.grad_color = LV_COLOR_MAROON;
    style.body.radius = 4;
    style.body.border.width = 2;
    style.body.border.color = LV_COLOR_WHITE;
    style.body.shadow.color = LV_COLOR_WHITE;
    style.body.shadow.width = 4;
    style.line.width = 2;
    style.line.color = LV_COLOR_BLACK;
    style.text.color = LV_COLOR_BLUE;

• 定義畫布緩衝buffer

 lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEITH)];

顏色大小緩衝計算轉換宏定義

#if LV_COLOR_DEPTH == 1
#define LV_COLOR_SIZE 8
#elif LV_COLOR_DEPTH == 8
#define LV_COLOR_SIZE 8
#elif LV_COLOR_DEPTH == 16
#define LV_COLOR_SIZE 16
#elif LV_COLOR_DEPTH == 32
#define LV_COLOR_SIZE 32
#else
#error "Invalid LV_COLOR_DEPTH in lv_conf.h! Set it to 1, 8, 16 or 32!"
#endif

#define LV_IMG_BUF_SIZE_TRUE_COLOR(w, h) ((LV_COLOR_SIZE / 8) * w * h)

#define LV_CANVAS_BUF_SIZE_TRUE_COLOR(w, h) LV_IMG_BUF_SIZE_TRUE_COLOR(w, h)

創建畫布對象

lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);

• 設置畫布緩衝buffer

lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEITH, LV_IMG_CF_TRUE_COLOR)

• 畫布位置對齊在顯示屏的中心

   lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);

• 填充畫布的背景色

lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

• 繪製矩形

lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &style);

• 繪製文本

lv_canvas_draw_text(canvas, 40, 20, 100, &style, "some text on text canvas", LV_LABEL_ALIGN_LEFT);

• 定義另一個buffer，並複製畫布緩衝的內容到buffer

    lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEITH];
    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_HEITH;

• 再次填充背景色，擦除以上繪製的效果

lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

• 利用圖象描述變量繪製

lv_canvas_rotate(canvas, &img, 30, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEITH / 2);

• 完整的畫布繪製實現

#define CANVAS_WIDTH    200
#define CANVAS_HEITH    150
void canvas_demo(void) 
{
    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.body.main_color = LV_COLOR_RED;
    style.body.grad_color = LV_COLOR_MAROON;
    style.body.radius = 4;
    style.body.border.width = 2;
    style.body.border.color = LV_COLOR_WHITE;
    style.body.shadow.color = LV_COLOR_WHITE;
    style.body.shadow.width = 4;
    style.line.width = 2;
    style.line.color = LV_COLOR_BLACK;
    style.text.color = LV_COLOR_BLUE;

     lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEITH)];
    lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEITH, LV_IMG_CF_TRUE_COLOR);
    lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

    lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &style);
    
    lv_canvas_draw_text(canvas, 40, 20, 100, &style, "some text on text canvas", LV_LABEL_ALIGN_LEFT);

    lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEITH];
    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_HEITH;

    lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);
   lv_canvas_rotate(canvas, &img, 30, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEITH / 2);
}

• 調用canvas_demo函數，編譯並運行