LAT1495

Local Application Tips

LAT1495 – Rev 1.0 – Jan. 2025

一个 TouchGFX 图片压缩导致显示丢失的问题

关键字：TouchGFX,图片压缩

1. 引言

在使用 TouchGFX 生成代码时，像图片、文本和字体这样的资源会被转换成 C++文件，然后与

TouchGFX 应用程序代码、用户代码和 TouchGFX 库一起编译后存储在 Flash 中。这意味着具有许

多资源的大型或复杂项目会需要使用更多的 Flash 存储空间。

由于大多数应用中的存储器资源都是有限的，因此有几种方法可以减少应用对 Flash 存储器容量

的需求。TouchGFX 提供四项内置功能，可以帮助显著减少应用程序的 Flash 存储器需求。这四项功

能分别是 L8 图片格式、图片压缩、可缩放矢量图形（SVG）和矢量字体。

本文只涉及图片压缩并会先介绍 TouchGFX 支持的图片压缩功能，然后结合客户使用 TouchGFX

图形压缩功能出现图片显示丢失的问题进行分析。

2. TouchGFX 的图片压缩功能

2.1. TouchGFX 图片压缩功能简介

TouchGFX 从 4.22 版开始支持图片压缩。4.22 to 4.23 只支持 L8 格式的图片压缩。从

4.24 版本开始，支持 RGB565, RGB888, 以及 ARGB8888 压缩。

图片压缩通常有两种风格：无损或有损。有损图片压缩通过去除图片的微小细节来实

现。这样通常会得到最大的缩减图片，但原始图片无法准确再现。无损压缩总是无任何差

异地再现原始图片，无损压缩的尺寸缩减通常较小。对于图形，通常要求 UI 元素完全按照

其设计来绘制。因此，TouchGFX 只支持无损压缩。

图片压缩的优点是存储空间需求减少，但也有缺点，因为图片在绘制到帧缓存时必须解

压缩。与绘制未压缩的图片相比，这种解压缩在许多情况下需要 CPU 做更多的工作。结果

可能是性能下降。这意味着必须将 Flash 减少带来的优势与 CPU 使用率增加带来的劣势进

行权衡。STM32 中的图形加速器 DMA2D 和 GPU2D（ChromART and NeoChrom

GPU）不能直接绘制压缩图片。压缩图片使用软件和硬件渲染的混合方式进行绘制，即压缩

数据由软件分块解压缩，然后在适用的情况下将这些分块委托给 DMA2D 处理。许多应用

中，不建议压缩所有图片，而是只压缩那些性能不受影响且与减少 Flash 相关的图片。

LAT1495

LAT1495 - Rev 1.0 page 2/10

2.2. TouchGFX 支持的压缩方式

2.2.1 L8 压缩

L8 位图格式仅适用于高达 256 色的图片。每个像素只是一个 8 位数字，表示与图片一

起存储的颜色表中的一种颜色。L8 的压缩只是像素编号的压缩。颜色表保持不变。压缩的

L8 图片像普通的未压缩位图一样使用。关于 L8 像素格式可以参考：使用 L8 图片格式减少

存储空间消耗 | TouchGFX Documentation

如果我们使用 L8 压缩 28,121 字节的一个图片，像素数据将减少到 5,735 字节。压缩图

片数据（包括颜色表）的总大小小于原始图片的 20%。因此，压缩允许我们在同一个 Flash

空间中拥有 5 个不同的背景或者将 Flash 需求减少 28,121 字节。压缩的 L8 图片可以像普

通的未压缩位图一样使用。例如，您可以使用图片控件显示图片，而无需在 TouchGFX

Designer 或代码中对项目进行任何修改。

L8 图片转换器支持三种压缩算法（L4、RLE、LZW9）。

• L4，对每个像素进行 4 比特编码。仅适用于最多 16 种颜色的图片。

• RLE，像素的游程编码。仅适用于最多 64 种颜色的图片。

• LZW9，基于词典的编码。适用于所有 L8 图片。

RLE 算法的解压缩速度比 LZW9 快得多，因此如果 LZW9 仅压缩图片，转换器将选择

RLE 稍微好一点。

在 TouchGFX Designer 中，可以将压缩值设置为“Auto(自动)”，使图片转换器为你

的图片选择合适的算法或者也可以强制使用特定的算法。比如在下图 1 是 TouchGFX

designer 4.24 中 STM32U5A9DK 的 Demo6 中将其中一幅

background_texture_reverse.png 图片转换为 L8_RGB888 格式，然后压缩方式选择

Auto。在 TouchGFX designer 上点击 Generate code 按钮后，可以在下图 2 的工程代码

看到压缩情况，压缩率高达 81.5%。

图1. background_texture_reverse.png 图片转换为 L8_RGB888 格式