LVGL部件7

一.图片部件

1.知识概览

LVGL部件7_第1张图片

LVGL部件7_第2张图片

LVGL部件7_第3张图片

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 是指向要设置旋转中心点的图像对象的指针。
  • xy 是旋转中心点的坐标。

以下是一个示例代码,展示如何使用 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.知识概览

LVGL部件7_第4张图片

LVGL部件7_第5张图片

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);   //固定色环模式
}---

你可能感兴趣的:(LVGL,单片机,gui)