LittlevGL---Canvas(畫布)---10

目的

學習canvas的使用。

功能描述

用戶想繪製一個自己的圖片。這個圖片了有大小要求，可以調配畫布中各個顏色，如果單片機操作某個像素或者三色的led燈一樣，控制各個像素的顏色。

ui提供了一個畫布的控件。用戶可以在上面可以設計自己想要的圖形、文字。設計顯示的風格，並對這些設計的圖案可以切換任何角度。

控件使用步驟以及相關函數描述

使用步驟

首先創建一個canvas對象，然後給其綁定一個buffer。此buffer決定其在窗口中，畫布的有效像素大小，操作此buffer，就是操作畫布圖案。

配置畫布顯示的位置，設計畫布中的圖案風格，如文字顏色，圖案的陰影，邊框大小，邊框顏色等。

函數描述

• 模塊創建

lv_obj_t *lv_canvas_create(lv_obj_t *par, constlv_obj_t *copy)

• 綁定buffer

void lv_canvas_set_buffer(lv_obj_t *canvas, void *buf, lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)
x,y:爲寬高；
cf:爲顏色格式

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)//拷貝對應畫布中對應區域的像素數據

• 設置畫布中某個像素點

//配置某個像素的顏色
void lv_canvas_set_px(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_color_t c)
x,y：像素點座標；
c:要配置顏色

lv_color_tlv_canvas_get_px(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y)

• 設置畫布內容風格

void lv_canvas_set_style(lv_obj_t *canvas, lv_canvas_style_ttype, const lv_style_t *style)

• 其他

void lv_canvas_fill_bg(lv_obj_t *canvas, lv_color_t color)//畫布填充一種顏色

void lv_canvas_draw_rect(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_coord_t w, lv_coord_t h, const lv_style_t *style)//指定位置繪製一個指定大小風格方形

void lv_canvas_draw_text(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_coord_t max_w, const lv_style_t *style, const char *txt, lv_label_align_t align)//指定位置繪製指定小風格的文字


void lv_canvas_draw_img(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, const void *src, const lv_style_t *style)//指定位置繪製一個指定風格圖像
src：爲圖像源，詳細可見image控件文檔


void lv_canvas_draw_polygon(lv_obj_t *canvas, const lv_point_t *points, uint32_t point_cnt, const lv_style_t *style)//繪製多邊形
points:爲多邊形的點
cnt:爲點的個數

void lv_canvas_draw_arc(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_coord_t r, int32_t start_angle, int32_t end_angle, const lv_style_t *style)//繪製圓
x,y ：圓心；
r:爲半徑；
start_angle:起始角度；
end_angle:結束角度
style：風格

void lv_canvas_draw_line(lv_obj_t *canvas, const lv_point_t *points, uint32_t point_cnt, const lv_style_t *style)//繪製線

lv_img_dsc_t *lv_canvas_get_img(lv_obj_t *canvas)//獲取畫布的圖形

void lv_canvas_rotate(lv_obj_t *canvas, lv_img_dsc_t *img, int16_t angle, lv_coord_t offset_x, lv_coord_t offset_y, int32_t pivot_x, int32_t pivot_y)//旋轉圖形

需要注意的是，旋轉的是和畫布相關的buffer中的內容，而不是buffer自身。buffer不變，只是內容按照一定的角度重新存在buffer中。

 

案例和代碼

實現一個canvas案例，在上面繪製一幅圖，採用一個按鈕事件的方式，每單擊一次，圖形會旋轉5度。

#include "ljy_canvas.h"
#include "lvgl/lvgl.h"

#define CANVAS_WIDTH    320
#define CANVAS_HEIGHT   200
#define TEST_ROTATE     0

static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];//畫布對應的緩存，按照配置顏色格式描述畫布的顏色
static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];//顯示圖像的原始緩存
static lv_img_dsc_t img;//要顯示圖像
static lv_obj_t * canvas;

static void BttonEventCb(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED) {//點擊事件
    	static short int arc_ang = 0;
		
       	lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);//重新刷一次圖像
		//實際將img中的數據旋轉對應角度後，存放在canvas綁定的buffer中
		lv_canvas_rotate(canvas, &img,arc_ang, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);//從0,0開始放置圍繞中心旋轉的圖像數據
	    arc_ang += 5;
		if(arc_ang == 360)arc_ang = 0;
		printf("current rotate ang is %d\n",arc_ang);		
    }
}	

void DrawCanvas()
{
	//1. 創建畫布
	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);//填充顏色

	//2. 畫布風格
	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_PURPLE;//邊界顏色
	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;

	//3.按照此風格繪製一個方形
  	lv_canvas_draw_rect(canvas, CANVAS_WIDTH >> 1, CANVAS_HEIGHT >> 1, 50, 30, &style);	//在畫布中間繪製一個方形，寬50，高30

	//4. 按照像素的方式繪製一片區域的楊素
	int i = 0;int j = 0;
	for(i = 0; i < 100; i++){
		for(j = 0; j < 10; j++){
			lv_canvas_set_px(canvas,i,j,LV_COLOR_GREEN);
		}
	}
	//5.在當前畫布中實現一個img
	memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));//這裏的cbuf爲參考圖像緩存
	img.data = (void *)cbuf_tmp;
 	img.header.cf = LV_IMG_CF_TRUE_COLOR;//顏色格式rgb
	img.header.w = CANVAS_WIDTH;//圖形寬高
	img.header.h = CANVAS_HEIGHT;

	//6.創建事件按鈕
	lv_obj_t *btn = lv_btn_create(lv_scr_act(), NULL);
	lv_obj_align(btn,canvas,LV_ALIGN_OUT_BOTTOM_MID,0,10);
	lv_obj_set_size(btn,60,40);
	lv_obj_set_event_cb(btn, BttonEventCb);
}

    

總結