本文主要介绍【屏显MCU】的基本概念，用于开发过程中的理解
以下是图层叠加示例

【屏显MCU】多媒体接口总结

• 0. 个人简介 && 授权须知
• 1. 三大引擎
• • 1.1 【显示引擎】Display Engine
  • • 1.1.1 【UI】 图层的概念
    • 1.1.2 【Video】 图层的概念
    • 1.1.3 图层的 Blending 的概念
    • 1.1.4 图层的 Blending 的示例
  • 1.2 【图像引擎】Graphics Engine-
  • • 1.2.1 图像旋转
    • 1.2.2 图像缩放
    • 1.2.3 矩形填充
    • 1.2.4 位块搬移
  • 1.3 【视频引擎】Video Engine
• 2. UI 层的透明度 alpha
• 3. 图像 stride 和 plane 的概念
• • 3.1 YUV 模型图像存储
  • 3.2 NV12 格式

0. 个人简介 && 授权须知

📋 个人简介

• 💖 作者简介：大家好，我是喜欢记录零碎知识点的菜鸟打工人。😎
• 📝 个人主页：欢迎访问我的博客主页🔥
• 🎉 支持我：点赞👍+收藏⭐️+留言📝
• 📣 系列专栏：嵌入式开发专栏 🍁 🍁
• 💬格言：写文档啊不是写文章，重要的还是直白！🔥

转载文章，禁止声明原创；不允许直接二次转载，转载请根据原文链接联系作者

若无需改版，在文首清楚标注作者及来源/原文链接，并删除【原创声明】，即可直接转载。
但对于未注明转载来源/原文链接的文章，我将保留追述的权利。

作者：积跬步、至千里

1. 三大引擎

1.1 【显示引擎】Display Engine

功能：用于提供 【显示图层叠加】 的功能。支持一个 video 图层 + UI 图层 叠加，通过显示接口输出

常见的 UI图层图像格式：
ARGB8888/XRGB8888/RGB888/ARGB4444/ARGB1555/RGB565

常见的video 图层的图像格式：
ARGB8888/XRGB8888/RGB888/ARGB4444/ARGB1555/RGB565

NV12/NV21/NV16/NV61/YUYV/YVYU/UYVY/VYUY/YUV400

1.1.1 【UI】 图层的概念

UI 图层即用户界面（User Interface）图层，用于显示图形用户界面元素，如按钮、图标、文本、菜单等。在lvgl中创建的控件都属于UI层。

1.1.2 【Video】 图层的概念

通俗的理解为，视频播放时的一帧一帧的图像画面。

1.1.3 图层的 Blending 的概念

• 在图形处理中，UI 图层（User Interface Layer，用户界面图层）和 video 图层（视频图层）的 Blending（混合、融合）指的是将这两个图层的图像按照一定的规则和比例进行 合成 的过程。
• 通过 Blending，可以实现不同图层之间的 透明度、颜色、亮度 等方面的融合效果，从而创造出各种视觉效果。

1.1.4 图层的 Blending 的示例

在视频播放器的界面中，可以将【video图层】和 【UI 图层】（如播放控制按钮、进度条等） blending 混合显示，以便在 不遮挡视频 的情况下显示控制元素，同时使整个界面看起来更加协调和美观。

1.2 【图像引擎】Graphics Engine-

GE(Graphics Engine)模块是一个用来进行 2D 图形加速 的 硬件模块 。
主要包括格式转换、旋转、镜像、 缩放、Alpha混合、Color Key、位块搬移、Dither等功能。

1.2.1 图像旋转

一帧图像本质上是一个大的【二维矩阵】，图像旋转本质上是对矩阵的运算，点屏 MCU 硬件上支持矩阵的复杂运算。

1.2.2 图像缩放

1.2.3 矩形填充

1.2.4 位块搬移

1.3 【视频引擎】Video Engine

视频/图片编 解码加速 引擎，该模块支持 JPEG 编解码以及 PNG 图片解码。

该部分原理，不做深究，会使用接口即可

2. UI 层的透明度 alpha

alpha 是一个数值，用于表示图层的不透明程度。取值范围 0-255
0表示完全透明，即该图层不可见
255表示完全不透明，该图层或遮挡住后边的内容

如下图所示，透明度 alpha 值大概在140左右，设置完透明度和 Video 层叠加显示的效果如下。

3. 图像 stride 和 plane 的概念

Stride：指的是在内存中每行像素所占的空间，

Plane：（平面）一般是以“luma plane”（亮度平面）、“chroma plane”（色度平面）的形式出现。

例如在 YUV 图像中，YUV 分量可以分别存储在不同的 plane 中。Y在一个平面，UV在一个平面，使用2个plane

3.1 YUV 模型图像存储

可参考资料：【摄像头YUV图像常见数据格式介绍】

对于4:2:2采样的图，如果图片的宽为width，高为heigth，在内存中占的空间为width * height * 2

其中width * height的空间存放Y分量， width * height/ 2的空间存放U分量，width * height / 2的空间存放V分量

3.2 NV12 格式

NV12存储顺序是先存Y值，再UV交替存储：YYYYUVUVUV

以 4 X 4 图片为例子，占用内存为 4 X 4 X 3 / 2 = 24 个字节，如下图所示：