LVGL Colorwheel控件和Canvas控件详解

一、Colorwheel控件详解

1. 概述

• Colorwheel 是 LVGL 中的一种控件，用于让用户通过旋转色轮来选择颜色。
• 色轮通常显示为一个圆形，用户可以通过触摸或鼠标操作来选择颜色。

2. 基本属性

• 当前颜色：可以通过 lv_colorwheel_get_selected_color 和 lv_colorwheel_set_selected_color 获取和设置。
• 颜色模式：可以选择 RGB 或 HSV 模式。
• 显示模式：可以选择圆形或矩形。

3. 创建 Colorwheel 控件

lv_obj_t * colorwheel = lv_colorwheel_create(parent);

4. 设置颜色模式

lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_RGB); // 或 LV_COLORWHEEL_MODE_HSV

5. 设置显示模式

lv_colorwheel_set_type(colorwheel, LV_COLORWHEEL_TYPE_CIRCLE); // 或 LV_COLORWHEEL_TYPE_RECTANGLE

6. 获取和设置选中颜色

lv_color_t color = lv_colorwheel_get_selected_color(colorwheel);
lv_colorwheel_set_selected_color(colorwheel, lv_color_hex(0xFF0000)); // 设置为红色

7. 自定义样式

• 可以通过 lv_obj_add_style 添加自定义样式。
• 样式属性包括背景颜色、边框、指示器颜色等。

8. 事件处理

• 可以为 Colorwheel 控件添加事件回调函数。

lv_obj_add_event_cb(colorwheel, colorwheel_event_cb, LV_EVENT_ALL, NULL);

• 常用事件类型：
  • LV_EVENT_VALUE_CHANGED：当颜色改变时触发。

9. 示例代码

static void colorwheel_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * colorwheel = lv_event_get_target(e);

    if (code == LV_EVENT_VALUE_CHANGED) {
        lv_color_t color = lv_colorwheel_get_selected_color(colorwheel);
        LV_LOG_USER("Selected color: #%.6X", color.full);
    }
}

void create_colorwheel(lv_obj_t * parent) {
    lv_obj_t * colorwheel = lv_colorwheel_create(parent);
    lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_RGB);
    lv_colorwheel_set_type(colorwheel, LV_COLORWHEEL_TYPE_CIRCLE);
    lv_colorwheel_set_selected_color(colorwheel, lv_color_hex(0x00FF00)); // 设置为绿色
    lv_obj_add_event_cb(colorwheel, colorwheel_event_cb, LV_EVENT_ALL, NULL);
}

二、Canvas控件详解

1. 概述

• Canvas 是 LVGL 中的一个对象，用于在屏幕上绘制自定义图形。
• 它提供了一个缓冲区，可以在其中进行像素级别的操作。

2. 创建 Canvas

• 使用 lv_canvas_create 函数创建一个 Canvas 对象。

  lv_obj_t * canvas = lv_canvas_create(parent);
  

3. 设置 Canvas 大小

• 使用 lv_obj_set_size 函数设置 Canvas 的大小。

  lv_obj_set_size(canvas, width, height);
  

4. 获取绘图缓冲区

• 使用 lv_canvas_get_buffer 函数获取 Canvas 的绘图缓冲区。

  lv_color_t * buf = lv_canvas_get_buffer(canvas);
  

5. 绘制基本图形

• 绘制点

  lv_canvas_draw_point(buf, x, y, size, color);
  

• 绘制线

  lv_canvas_draw_line(buf, points, point_count, width, color);
  

• 绘制矩形

  lv_canvas_draw_rect(buf, x, y, width, height, draw_des);
  

• 绘制圆形

  lv_canvas_draw_circle(buf, x, y, radius, color);
  

6. 绘制图像

• 使用 lv_canvas_draw_image 函数绘制图像。

  lv_canvas_draw_image(buf, x, y, img_src, draw_des);
  

7. 绘制文本

• 使用 lv_canvas_draw_text 函数绘制文本。

  lv_canvas_draw_text(buf, x, y, max_width, draw_des, text, LV_LABEL_ALIGN_LEFT);
  

8. 刷新 Canvas

• 使用 lv_canvas_refr 函数刷新 Canvas，使其显示最新的绘制内容。

  lv_canvas_refr(canvas);
  

9. 示例代码

以下是一个简单的示例，展示如何创建和使用 Canvas：

void create_canvas_example(lv_obj_t * parent) {
    // 创建 Canvas
    lv_obj_t * canvas = lv_canvas_create(parent);
    lv_obj_set_size(canvas, 200, 200);

    // 获取绘图缓冲区
    lv_color_t * buf = lv_canvas_get_buffer(canvas);

    // 绘制一个红色的圆
    lv_canvas_draw_circle(buf, 100, 100, 50, lv_color_make(255, 0, 0));

    // 刷新 Canvas
    lv_canvas_refr(canvas);
}

三、效果展示

四、源码分享

ui.h

typedef struct
{
  
	lv_obj_t *screen;
	bool screen_del;
	lv_obj_t *screen_cpicker;
	lv_obj_t *screen_canvas;
}lv_ui;

ui.c

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "lvgl.h"
#include 
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"



void setup_scr_screen(lv_ui *ui)
{
	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_size(ui->screen, 800, 480);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x21d0e3), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_cpicker
	ui->screen_cpicker = lv_colorwheel_create(ui->screen, true);
	lv_obj_set_pos(ui->screen_cpicker, 121, 94);
	lv_obj_set_size(ui->screen_cpicker, 268, 268);

	//Write style for screen_cpicker, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_arc_width(ui->screen_cpicker, 10, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_canvas
	ui->screen_canvas = lv_canvas_create(ui->screen);
	static lv_color_t buf_screen_canvas[300*200*4];
	lv_canvas_set_buffer(ui->screen_canvas, buf_screen_canvas, 300, 200, LV_IMG_CF_TRUE_COLOR_ALPHA);
	lv_canvas_fill_bg(ui->screen_canvas, lv_color_hex(0x991b1b), 255);
	//Canvas draw rectangle
	lv_draw_rect_dsc_t screen_canvas_rect_dsc_0;
	lv_draw_rect_dsc_init(&screen_canvas_rect_dsc_0);
	screen_canvas_rect_dsc_0.radius = 0;
	screen_canvas_rect_dsc_0.bg_opa = 255;
	screen_canvas_rect_dsc_0.bg_color = lv_color_hex(0x0775B7);
	screen_canvas_rect_dsc_0.bg_grad.dir = LV_GRAD_DIR_NONE;
	screen_canvas_rect_dsc_0.border_width = 0;
	screen_canvas_rect_dsc_0.border_opa = 255;
	screen_canvas_rect_dsc_0.border_color = lv_color_hex(0x000000);
	lv_canvas_draw_rect(ui->screen_canvas, 100, 80, 100, 50, &screen_canvas_rect_dsc_0);

	lv_obj_set_pos(ui->screen_canvas, 446, 146);
	lv_obj_set_size(ui->screen_canvas, 300, 200);
	lv_obj_set_scrollbar_mode(ui->screen_canvas, LV_SCROLLBAR_MODE_OFF);

	//The custom code of screen.
	

	//Update current screen layout.
	lv_obj_update_layout(ui->screen);

	//Init events for screen.
	events_init_screen(ui);
}

event.c

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "events_init.h"
#include 
#include "lvgl.h"

#if LV_USE_FREEMASTER
#include "freemaster_client.h"
#endif


static void screen_cpicker_event_handler (lv_event_t *e)
{
	lv_event_code_t code = lv_event_get_code(e);

	switch (code) {
	case LV_EVENT_VALUE_CHANGED:
	{
		lv_color_t color = lv_colorwheel_get_rgb(guider_ui.screen_cpicker);
	lv_canvas_fill_bg(guider_ui.screen_canvas, color, 255);
		break;
	}
	default:
		break;
	}
}
void events_init_screen(lv_ui *ui)
{
	lv_obj_add_event_cb(ui->screen_cpicker, screen_cpicker_event_handler, LV_EVENT_ALL, ui);
}

void events_init(lv_ui *ui)
{

}

觉得整理的好的话点个赞呗！