LVGL 8.2 re-coloring

133 篇文章 112 订阅

定义变量

static lv_obj_t* red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t* img1;

事件处理回调函数


static void slider_event_cb(lv_event_t* e)
{
    LV_UNUSED(e);
    /*Recolor the image based on the sliders' values*/
    lv_color_t color = lv_color_make(lv_slider_get_value(red_slider), lv_slider_get_value(green_slider),
        lv_slider_get_value(blue_slider)); //获取三个slider的值组成RGB颜色
    lv_opa_t intense = lv_slider_get_value(intense_slider);  //获取slider的值组成透明度
    lv_obj_set_style_img_recolor_opa(img1, intense, 0); // 重新着色颜色
    lv_obj_set_style_img_recolor(img1, color, 0);  // 重新着色透明度
}

创建slider

static lv_obj_t* create_slider(lv_color_t color)
{
    lv_obj_t* slider = lv_slider_create(lv_scr_act()); //创建slider对象
    lv_slider_set_range(slider, 0, 255); //设置范围0~255
    lv_obj_set_size(slider, 10, 200); //设置slider大小
    lv_obj_set_style_bg_color(slider, color, LV_PART_KNOB); //设置knob背景颜色
    lv_obj_set_style_bg_color(slider, lv_color_darken(color, LV_OPA_40),  LV_PART_INDICATOR); //设置indicator背晃颜色
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); //添加注册LV_EVENT_VALUE_CHANGED事件
    return slider; // 返回slider对象

}
/**
* Demonstrate runtime image re-coloring
*/
static void lv_example_img_2(void)
{
    /*Create 4 sliders to adjust RGB color and re-color intensity*/
    red_slider = create_slider(lv_palette_main(LV_PALETTE_RED)); //创建红色slider
    green_slider = create_slider(lv_palette_main(LV_PALETTE_GREEN));//创建绿色slider
    blue_slider = create_slider(lv_palette_main(LV_PALETTE_BLUE));//创建蓝色slider
    intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY));//创建灰色slider
    lv_slider_set_value(red_slider, LV_OPA_20, LV_ANIM_OFF); //设置初始值并关闭slider控件动画效果
    lv_slider_set_value(green_slider, LV_OPA_90, LV_ANIM_OFF);//设置初始值并关闭slider控件动画效
    lv_slider_set_value(blue_slider, LV_OPA_60, LV_ANIM_OFF);//设置初始值并关闭slider控件动画效
    lv_slider_set_value(intense_slider, LV_OPA_50, LV_ANIM_OFF);//设置初始值并关闭slider控件动画效
    lv_obj_align(red_slider, LV_ALIGN_LEFT_MID, 25, 0);//LV_ALIGN_LEFT_MID方式对齐
    lv_obj_align_to(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//green_slider对齐到red_slider外框右边中间25,0处
    lv_obj_align_to(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//blue_slider对齐到green_slider外框右边中间25,0处
    lv_obj_align_to(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//intense_slider对齐到blue_slider外框右边中间25,0处
    /*Now create the actual image*/
    LV_IMG_DECLARE(img_cogwheel_argb)   // 声明图片资源
        img1 = lv_img_create(lv_scr_act());  // 创建image对象
    lv_img_set_src(img1, &img_cogwheel_argb); //设置图片
    lv_obj_align_to(img1, intense_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//img1对齐到blue_slider外框右边中间25,0处
    lv_event_send(intensintense_slidere_slider, LV_EVENT_VALUE_CHANGED, NULL); //向intense_slider控制发送LV_EVENT_VALUE_CHANGED事件
}

运行效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风雨依依

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值