lvgl8.2-canvas

lv_canvas概念

lv_canvas是一个画布控件,可以在它上面绘制任意图形,以及进行旋转操作,但是必须依赖一个buffer缓冲区,缓冲区可以是全局的或者静态的。

在画布上绘制矩形
• lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc)
在画布上绘制文本内容
• lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt)
在画布上绘制图片
• 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)

demo:

void lvgl_canvas_demo(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_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;
	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_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 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_palette_lighten(LV_PALETTE_GREY,3), LV_OPA_COVER);
	lv_canvas_transform(canvas, &img, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
}

效果图:
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值