一，前言

关于GUI我当前最关注的就是在它的设计中它是如何还原图层的。GUI库lvgl应用及分析--Apple的学习笔记昨天我已经抛出了这个问题，那么今天我看下源码找到线索。

二，制作图层还原的应用

button被下拉窗体覆盖后，等下拉窗口退出后，button会还原。

GIF.gif

三，源码分析

通过调试发现

image.png
关于还原图层的重点lv_obj_del->lv_obj_invalidate->void lv_obj_invalidate_area

void lv_obj_invalidate_area(const lv_obj_t * obj, const lv_area_t * area)
{
    LV_ASSERT_OBJ(obj, MY_CLASS);

    lv_area_t area_tmp;
    lv_area_copy(&area_tmp, area);
    bool visible = lv_obj_area_is_visible(obj, &area_tmp);

    if(visible) _lv_inv_area(lv_obj_get_disp(obj), &area_tmp);
}

lv_obj_area_is_visible获取父类是否要绘制。因为top层的子类删除了。要还原底层图层的话，就要绘制的。

    /*Truncate recursively to the parents*/
    lv_obj_t * par = lv_obj_get_parent(obj);
    while(par != NULL) {
        is_common = _lv_area_intersect(area, area, &par->coords);
        if(is_common == false) return false;       /*If no common parts with parent break;*/
        if(lv_obj_has_flag(par, LV_OBJ_FLAG_HIDDEN)) return false; /*If the parent is hidden then the child is hidden and won't be drawn*/

        par = lv_obj_get_parent(par);
    }

_lv_inv_area函数中，通过注释可以看出，它会进行保存Save the area。有了area也就可以按父类对象的属性信息重绘，说明它不是保存在某个缓存中，而是把对象属性和对象区域进行保存，然后按这些信息重绘区域中的对象。guilite它是将内容保存到内存中，这个设计有点区别。但是我觉得这样才是面向对象的设计，这个以对象对单位的设计更好。_lv_inv_area函数中，通过注释可以看出，它会进行保存Save the area。

    /*If there were at least 1 invalid area in true double buffered mode, redraw the whole screen*/
    if(lv_disp_is_true_double_buf(disp)) {
        disp->inv_areas[0] = scr_area;
        disp->inv_p = 1;
        lv_timer_pause(disp->refr_timer, false);
        return;
    }

    if(disp->driver->rounder_cb) disp->driver->rounder_cb(disp->driver, &com_area);

    /*Save only if this area is not in one of the saved areas*/
    uint16_t i;
    for(i = 0; i < disp->inv_p; i++) {
        if(_lv_area_is_in(&com_area, &disp->inv_areas[i], 0) != false) return;
    }

    /*Save the area*/
    if(disp->inv_p < LV_INV_BUF_SIZE) {
        lv_area_copy(&disp->inv_areas[disp->inv_p], &com_area);
    }
    else {   /*If no place for the area add the screen*/
        disp->inv_p = 0;
        lv_area_copy(&disp->inv_areas[disp->inv_p], &scr_area);
    }
    disp->inv_p++;

关于绘图图层的重要内容

typedef struct {
    void * buf1; /**< First display buffer.*/
    void * buf2; /**< Second display buffer.*/

    /*Internal, used by the library*/
    void * buf_act;
    uint32_t size; /*In pixel count*/
    lv_area_t area;
    /*1: flushing is in progress. (It can't be a bit field because when it's cleared from IRQ Read-Modify-Write issue might occur)*/
    volatile int flushing;
    /*1: It was the last chunk to flush. (It can't be a bit field because when it's cleared from IRQ Read-Modify-Write issue might occur)*/
    volatile int flushing_last;
    volatile uint32_t last_area         : 1; /*1: the last area is being rendered*/
    volatile uint32_t last_part         : 1; /*1: the last part of the current area is being rendered*/
} lv_disp_draw_buf_t;

先了解下结构体成员
一个是绘制的area，一个是绘制area中最后一个部分。
area绘制对应函数lv_refr_areas，part绘制对应函数lv_refr_area。
lv_refr_obj_and_children函数就体现了一个个obj绘制，从底层开始绘制，一直绘制到顶层。
v_refr_obj_and_children函数就体现了一个个obj绘制，从底层开始绘制，一直绘制到顶层。因为顶层为NULL。

par = lv_obj_get_parent(top_p);
    while(par != NULL) {
        bool go = false;
        uint32_t i;
        for(i = 0; i < lv_obj_get_child_cnt(par); i++) {
            lv_obj_t * child = lv_obj_get_child(par, i);
            if(!go) {
                if(child == border_p) go = true;
            } else {
                /*Refresh the objects*/
                lv_refr_obj(child, mask_p);
            }
        }

        /*Call the post draw draw function of the parents of the to object*/
        lv_event_send(par, LV_EVENT_DRAW_POST_BEGIN, (void*)mask_p);
        lv_event_send(par, LV_EVENT_DRAW_POST, (void*)mask_p);
        lv_event_send(par, LV_EVENT_DRAW_POST_END, (void*)mask_p);

        /*The new border will be the last parents,
         *so the 'younger' brothers of parent will be refreshed*/
        border_p = par;
        /*Go a level deeper*/
        par = lv_obj_get_parent(par);
    }

而绘制内容的地方在回调函数 base->event_cb(obj, e)即lv_obj_draw

    else if(e == LV_EVENT_DRAW_MAIN) {
        const lv_area_t * clip_area = lv_event_get_param();
        lv_draw_rect_dsc_t draw_dsc;
        lv_draw_rect_dsc_init(&draw_dsc);
        /*If the border is drawn later disable loading its properties*/
        if(lv_obj_get_style_border_post(obj, LV_PART_MAIN)) {
            draw_dsc.border_post = 1;
        }

        lv_obj_init_draw_rect_dsc(obj, LV_PART_MAIN, &draw_dsc);

        lv_coord_t w = lv_obj_get_style_transform_width(obj, LV_PART_MAIN);
        lv_coord_t h = lv_obj_get_style_transform_height(obj, LV_PART_MAIN);
        lv_area_t coords;
        lv_area_copy(&coords, &obj->coords);
        coords.x1 -= w;
        coords.x2 += w;
        coords.y1 -= h;
        coords.y2 += h;

        lv_draw_rect(&coords, clip_area, &draw_dsc);

draw_dsc通过lv_obj_init_draw_rect_dsc初始化，把obj的参数属性都传递给了draw_dsc。

四，小结

littlevgl就这样进行简单的入门，并且通过阅读源码探秘了一些lvgl的设计原理。将来玩单片机要用GUI的时候，可以尝试使用它咯~本轮已经了解了其基本的设计方式，目标达成，暂时先closefile了。