LVGL部件7

一.图片部件

1.知识概览

2.函数接口

1.lv_img_set_pivot

在LVGL（LittlevGL）中，要设置图像对象的旋转中心点，可以使用 lv_img_set_pivot 函数。该函数的原型如下：

void lv_img_set_pivot(lv_obj_t * img, lv_coord_t x, lv_coord_t y);

• img 是指向要设置旋转中心点的图像对象的指针。
• x 和 y 是旋转中心点的坐标。

以下是一个示例代码，展示如何使用 lv_img_set_pivot 函数来设置图像对象的旋转中心点：

// 创建一个图像对象
lv_obj_t *img = lv_img_create(lv_scr_act(), NULL);

// 设置图像对象的旋转中心点
lv_img_set_pivot(img, img->coords.x1 + img->coords.w / 2, img->coords.y1 + img->coords.h / 2);

在这个示例中，我们创建了一个图像对象 img，然后使用 lv_img_set_pivot 函数将该图像对象的旋转中心点设置为图像的中心点。

2.lv_img_set_angle

在LVGL（LittlevGL）中，可以使用 lv_img_set_angle 函数来设置图像对象的旋转角度。该函数的原型如下：

void lv_img_set_angle(lv_obj_t * img, int16_t angle);

• img 是指向要设置旋转角度的图像对象的指针。
• angle 是一个有符号 16 位整数，表示旋转角度。正值表示顺时针旋转，负值表示逆时针旋转。单位为度（°）。

以下是一个示例代码，展示如何使用 lv_img_set_angle 函数来设置图像对象的旋转角度：

// 创建一个图像对象
lv_obj_t *img = lv_img_create(lv_scr_act(), NULL);

// 设置图像对象的旋转角度为 90 度（顺时针旋转）
lv_img_set_angle(img, 90);

在这个示例中，我们创建了一个图像对象 img，然后使用 lv_img_set_angle 函数将该图像对象的旋转角度设置为 90 度，表示将图像按顺时针方向旋转 90 度。

3.lv_obj_set_style_img_recolor

在LVGL（LittlevGL）中，可以使用 lv_obj_set_style_img_recolor 函数来为对象的图像样式设置重新上色。这个函数用于改变对象上的图像样式的颜色。

函数原型如下：

void lv_obj_set_style_img_recolor(lv_obj_t * obj, lv_obj_part_t part, lv_color_filter_t * filter);

• obj 是指向要设置图像重新上色的对象的指针。
• part 是描述对象的哪个部分要设置图像重新上色的选项。
• filter 是指向 lv_color_filter_t 类型的颜色过滤器结构的指针，用于指定图像重新上色的方式。

以下是一个示例代码，展示如何使用 lv_obj_set_style_img_recolor 函数为对象的图像样式设置重新上色：

// 创建一个对象
lv_obj_t *obj = lv_obj_create(lv_scr_act(), NULL);

// 创建一个颜色过滤器
lv_color_filter_t recolor_filter;
lv_color_filter_init(&recolor_filter);
lv_color_filter_set_peculiar(&recolor_filter, LV_COLOR_MAKE(255, 0, 0), LV_COLOR_MAKE(0, 255, 0));

// 将颜色过滤器应用于对象的图像样式
lv_obj_set_style_img_recolor(obj, LV_OBJ_PART_MAIN, &recolor_filter);

在这个示例中，我们创建了一个对象 obj，然后创建了一个颜色过滤器 recolor_filter，并使用 lv_color_filter_set_peculiar 函数设置颜色过滤器的颜色映射。最后，使用 lv_obj_set_style_img_recolor 函数将颜色过滤器应用于对象的主要图像样式。

图像重新上色功能适用于支持图像颜色重新上色的对象和主题。确保对象的图像样式为可重新上色，并且当前的主题支持颜色重新上色。

3.代码实例

void my_lvgl(void)
{
    lv_obj_t *img=lv_img_create(lv_scr_act());  //创建图片部件
    lv_img_set_src(img,&img_test);  //设置图片源
    lv_obj_center(img);
    //lv_img_set_offset_x(img,100);   //设置x轴偏移
    //lv_img_set_offset_y(img,20);   //设置y轴偏移

    //lv_obj_set_style_img_recolor(img,lv_color_hex(0xffe1d2),LV_PART_MAIN);   //设置重新着色
    //lv_obj_set_style_img_recolor_opa(img,150,LV_PART_MAIN);   //设置透明度
    lv_obj_update_layout(img);  //更新图片布局
    lv_img_set_pivot(img,0,0);  //社会中心点
    lv_img_set_zoom(img,128);  //设置缩放，扩大
    lv_img_set_angle(img,900);  //旋转90度

}

二.色环部件

1.知识概览

2.函数接口

1.lv_colorwheel_set_mode

在LVGL（LittlevGL）中，可以使用 lv_colorwheel_set_mode 函数来设置颜色选择器（colorwheel）的模式。

函数原型如下：

void lv_colorwheel_set_mode(lv_obj_t * colorwheel, lv_colorwheel_mode_t mode);

• colorwheel 是指向要设置模式的颜色选择器对象的指针。
• mode 是一个枚举类型 lv_colorwheel_mode_t，用于指定颜色选择器的模式。可以在 LVGL 的头文件中找到 lv_colorwheel_mode_t 的定义。

以下是 lv_colorwheel_mode_t 中可能的模式值：

• LV_COLORWHEEL_MODE_HUE: 仅显示色相（Hue）。
• LV_COLORWHEEL_MODE_HUE_SAT: 显示色相（Hue）和饱和度（Saturation）。
• LV_COLORWHEEL_MODE_HUE_SAT_VAL: 显示色相（Hue）、饱和度（Saturation）和亮度（Value）。

以下是一个示例代码，展示如何使用 lv_colorwheel_set_mode 函数来设置颜色选择器的模式：

// 创建一个颜色选择器对象
lv_obj_t *colorwheel = lv_colorwheel_create(lv_scr_act(), NULL);

// 设置颜色选择器的模式为 "Hue" 和 "Saturation"
lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_HUE_SAT);

在这个示例中，我们创建了一个颜色选择器对象 colorwheel，然后使用 lv_colorwheel_set_mode 函数将颜色选择器的模式设置为 “Hue” 和 “Saturation”，即同时显示色相和饱和度。

2.lv_colorwheel_set_mode_fixed

lv_colorwheel_create() 函数是 LVGL（LittlevGL）提供的用于创建颜色选择器（Color Wheel）对象的函数。通过该函数可以创建一个可交互的色环，用户可以通过触摸或鼠标操作来选择颜色。

下面是一个示例代码，展示了如何使用 lv_colorwheel_create() 函数创建一个颜色选择器：

// 创建一个颜色选择器对象
lv_obj_t *colorwheel = lv_colorwheel_create(lv_scr_act(), NULL);

// 设置颜色选择器的大小和位置
lv_obj_set_size(colorwheel, 200, 200);
lv_obj_set_pos(colorwheel, 50, 50);

在这个示例中，我们调用 lv_colorwheel_create() 函数来创建一个颜色选择器对象，并将其添加到屏幕的父对象（在这里是 lv_scr_act()，表示整个屏幕）中。然后，我们通过 lv_obj_set_size() 和 lv_obj_set_pos() 函数来设置颜色选择器的大小和位置。

通过这样的方式，您可以在您的应用程序中方便地使用 LVGL 提供的颜色选择器来实现交互式的颜色选择。

3.代码实例

static lv_obj_t* obj;
static void event_cb(lv_event_t *e)
{
    lv_obj_t* target=lv_event_get_target(e);
    //lv_colorwheel_get_rgb获取颜色
    lv_obj_set_style_bg_color(obj,lv_colorwheel_get_rgb(target),LV_PART_MAIN);
}

void my_lvgl(void)
{
    lv_obj_t* cw=lv_colorwheel_create(lv_scr_act(),true);   //创建色环模块
    lv_obj_set_style_arc_width(cw,30,LV_PART_MAIN);   //设置宽度
    lv_obj_center(cw);   //居中

    lv_colorwheel_set_rgb(cw,lv_color_hex(0xff0000));  //设置当前选中颜色
    lv_obj_add_event_cb(cw,event_cb,LV_EVENT_VALUE_CHANGED,NULL);//添加事件，值改变触发

    obj=lv_obj_create(lv_scr_act());   //创建基础对象
    lv_obj_center(obj);   //居中
     lv_obj_set_style_radius(obj,LV_RADIUS_CIRCLE,LV_PART_MAIN);  //圆角

    lv_colorwheel_set_mode(cw,LV_COLORWHEEL_MODE_HUE);  //设置为色相模式
    lv_colorwheel_set_mode_fixed(cw,true);   //固定色环模式
}---