查看: 2278|回复: 1

[K10项目分享] 行空板K10：变脸相机

本帖最后由 TRIM 于 2024-9-24 16:22 编辑

灵感来源

在造物记发现一个帖子：现代科技与中国传统文化京剧变脸相结合
这个项目通过行空板K10的加速度传感器，实现每翻转一次行空板，屏幕上切换不同的脸谱图片

行空板上有人脸检测功能，那为何不做一个变脸相机呢？打开摄像头，检测到人脸，就朝着人脸那覆盖一个脸谱图片。每当“变脸”（人脸消失又出现）时，更换显示的图片。

制作过程

这看上去是一个非常简单的程序，我先做了一个简单的测试程序来试试：

行空板K10：变脸相机图1

马上，我便发现了两大问题：
1. 绘制上去的图片不支持透明通道，脸谱旁会有难看的黑框，如图所示：
行空板K10：变脸相机图2

2. 由于开启了屏幕后，对屏幕的任何操作都会自动刷新，所以，从清屏到重新绘制图片的这个间隔里，并不会显示图片，总体看上去一闪一闪的，达不到预期效果：
（图片先欠着）

发现原有的行空板库无法实现，我便查找了行空板库中使用的图形库：LVGL：一个轻量级嵌入式图形库

首先解决图片的透明通道显示问题！
LVGL是支持透明图片的，但是要在构建图片结构体时将header.cf设为LV_IMG_CF_TRUE_COLOR_ALPHA（带透明通道）
于是我改了改原来的函数

void canvasDrawAlphaImage(int16_t x,int16_t y,int16_t w,int16_t h,const uint8_t* imageData) {
    lv_img_dsc_t image; 
    image.header.always_zero = 0;
    image.header.w = w;
    image.header.h = h;
    image.data_size = w * h * 2;
    image.header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA; // 改了这里！
    image.data = imageData,
    k10.canvas->canvasDrawImage(x,y,&image);
}
复制代码

但是，使用此函数，不能直接使用原有的图像数据，需要到LVGL的图片转换工具中，将图片转换成带透明通道的数组：
行空板K10：变脸相机图3

选择与代码中相同的格式，转换，得到了一个c文件！
里面的数组是这样的：

const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_Y uint8_t y_map[] = {
  #if LV_COLOR_DEPTH == 1 || LV_COLOR_DEPTH == 8
    /*Pixel format: Alpha 8 bit, Red: 3 bit, Green: 3 bit, Blue: 2 bit*/
    //这里是一组图像数据，但行空板用不着
  #endif
  #if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP == 0
    /*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit*/
    //这里是一组图像数据，但行空板也用不着
    #endif
  #if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP != 0
    /*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit  BUT the 2  color bytes are swapped*/
    //这里是一组图像数据，行空板用的是这组，将这组拿出，放到自己代码中即可
  #endif
  #if LV_COLOR_DEPTH == 32
    //这里还有一组图像数据，照样用不着
  #endif
};
复制代码

取出数组，放到代码中，使用新的函数canvasDrawAlphaImage(x,y,w,h,imageData)绘制图片即可！
（把数组传入imageData中）
效果如图：
（图片先欠着）

接着，该解决图片闪烁的问题了！

我发现原来的库里，“清除屏幕”中，会将全屏清除，并且还会刷新一次屏幕。如果绘制图片后，仅擦除对应的区域，并且不刷新，图片的闪烁问题就会得到改善。
另外，原来的库使用xSemaphoreTake()和xSemaphoreGive()防止冲突，如果将图片的擦除和绘制同时在这两个语句之间执行，就不会有其他地方的强制刷新干扰了。

于是，我在原来的canvasDrawAlphaImage函数中加入了清除上一次绘制的图片代码

void canvasDrawAlphaImage(lv_obj_t *_canvas, int16_t x, int16_t y, int16_t XToClean, int16_t YToClean, int16_t w, int16_t h, const uint8_t *imageData)
{
        lv_draw_img_dsc_t img_dsc;

        xSemaphoreTake(xLvglMutex, portMAX_DELAY);

        // 分配缓冲区，里面存放100*138的透明图片数据用于擦除
        lv_color_t *_canvasNullBuf = (lv_color_t *)heap_caps_malloc(100 * 138 * sizeof(lv_color_t) * 8, MALLOC_CAP_SPIRAM); // MALLOC_CAP_SPIRAM;
        assert(_canvasNullBuf);
        memset(_canvasNullBuf, 0, 100 * 138 * sizeof(lv_color_t) * 8);
        // 将指定的区域擦除
        lv_canvas_copy_buf(_canvas, _canvasNullBuf, XToClean, YToClean, 100, 138);
        lv_canvas_set_px_opa(_canvas, XToClean, YToClean, LV_OPA_TRANSP);

        // 创建图像结构体
        lv_img_dsc_t image;
        image.header.always_zero = 0;
        image.header.w = w;
        image.header.h = h;
        image.data_size = w * h * 2;
        image.header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA; // 设置颜色格式：带透明通道
        image.data = imageData,
        // 绘制到指定区域
                lv_draw_img_dsc_init(&img_dsc);
        lv_canvas_draw_img(_canvas, x, y, &image, &img_dsc);
        // 这里再一并刷新
        lv_task_handler();

        xSemaphoreGive(xLvglMutex);

        // 释放内存
        heap_caps_free(_canvasNullBuf);
}
复制代码