【高级应用开发】touchgfx 之《Using the L8 Image Format》

从TouchGFX 4.12.3开始

TouchGFX 4.12现在支持L8标准图像格式格式。
与ARGB8888等相比，L8格式的图像占用较少的闪存，并且绘制速度更快。

L8格式的图像由一个调色板和一个像素阵列组成：调色板最多列出256种不同的颜色，分别以16位格式RGB565、24位格式RGB888或32位格式ARGB8888指定。像素阵列由每个像素一个字节组成。该字节是调色板（颜色列表）的索引，指出像素的颜色。TouchGFX框架通过依次读取像素，查找调色板中的颜色并将其写入帧缓冲区来绘制L8图像。这会自动发生，并由STM32 Chrom ART硬件加速器加速。

8位至今像素表示一张L8图像可以使用256种不同的颜色。另一个L8图像可以使用256种其他颜色，因为两个图像都有各自的调色板。

具有4 x 4像素的L8图像和具有4种颜色的调色板

像素每个为一个字节（8位）。因此，像素的大小是宽度x高度字节。调色板颜色可以是16位，24位或32位颜色。因此，每个颜色定义将占用2、3或4个字节。

如果帧缓冲区是16位（RGB565格式），则纯色图像应存储在L8_RGB565中。如果帧缓冲区是24位（RGB888），则L8图像必须以L8_RGB888格式存储。如果图像是透明的，则必须使用32位格式（ARGB8888）：

格式	帧缓冲格式	支持透明像素
L8_RGB565	16位RGB565	没有
L8_RGB888	24位RGB888	没有
L8_ARGB8888	都	是

在此处阅读有关调色板图像格式的更多信息：https : //en.wikipedia.org/wiki/Indexed_color。

示例L8图像

这是典型的徽标图像。该图像仅使用16种不同的颜色：

具有16种24位颜色的200 x 200像素L8图像。

该图像的闪光尺寸明显低于标准24位格式（RGB888）的原始图像。下表列出了这三种不同调色板格式的具体图像的闪存使用情况：

格式	像素/字节大小	调色板的大小/字节	总大小/字节	减少百分比
RGB888	120,000	0	120,000	--
L8_RGB565	40,000	32	40,032	66.6％
L8_RGB888	40,000	48	40,048	66.6％
L8_ARGB8888	40,000	64	40,064	66.6％

我们看到尺寸减小非常大，并且在中等尺寸的图像上调色板的尺寸微不足道。

在TouchGFX中使用L8图像

在TouchGFX中使用L8图像格式非常容易。唯一要做的是配置图像转换器以将图像从PNG转换为L8格式。在这里，我们将经历整个过程：

在TouchGFX Designer中启动一个新项目。将您的图像复制到新项目中的assets / images文件夹中：

2019_10_07_11_33_38_C_TouchGFXProjectsDocumentation_L8Test_assets_images.png

现在转到TouchGFX Designer，然后单击顶部栏中的“图像”选项卡并选择图像：

在窗口的右侧，选择图像格式L8_RGB888（此示例运行24位颜色）。

现在可以在画布上插入一个图像小部件（在这里我们在背景中插入了一个Box）：

用户界面代码无需更改。由于我们在“图像”选项卡中所做的配置，图像转换器会转换PNG文件并生成L8格式的图像。

透明图像

如上所述，也可以将L8格式用于具有透明性的图像。

170 x 60像素的按钮图像（32位格式）ARGB8888

上图使用108种颜色（许多蓝色阴影）。该图像可以使用L8_ARGB8888格式。大小将大大降低：

格式	像素/字节大小	调色板的大小/字节	总大小/字节	减少百分比
ARGB888	40,800	0	40,800	--
L8_ARGB8888	10,200	432	10,632	73.9％

将图像转换为256色

许多图像使用超过256种颜色。这对于照片般逼真的图像或具有渐变的图像很常见。由于这些图像包含多种颜色，因此无法在TouchGFX Designer中直接将其转换为L8图像格式。

但是，在许多情况下，可以使用图像处理工具减少特定图像中使用的颜色数量，而不会降低大部分图像质量。

Paint.NET

最简单的方法是使用Paint.Net。打开原始图像，然后使用另存为将图像保存到另一个文件中。在“保存配置”对话框中，选择8位作为像素深度：

现在，在您的项目中使用新的PNG。切记在TouchGFX设计器的“图像”选项卡中选择L8_ARGB8888格式。阴影处理不佳，但是在许多情况下带有透明边缘的图标看起来不错。可以调整“透明度阈值”值，并且在某些情况下可以改善结果。

图像魔术

另一个合适的工具（有时会产生更好的L8图像）是Image Magick（可从www.imagemagick.org下载）。该工具可以从命令行转换图像。这使其适合在脚本中使用。要将clock_bg.png转换为最多使用256种颜色的图像，请使用以下命令：

2019-10-07_15_21_00-MINGW32__c_TouchGFXProjectsDocumentation_L8Test_assets_images.png

为了比较，下面显示了三个图像（原始图像，使用Paint.Net的L8，使用Image Magick的L8）：

中间时钟丢失了边框阴影中的细节。在这两种情况下，时钟背景的中心部分看起来都是可用的。

PNG文件中的颜色数

Image Magick还可以告诉您图像中使用了多少种颜色。使用此命令：

2019-10-08_13_07_52-MINGW32__c_TouchGFXProjectsDocumentation_L8Test_assets_images.png

手动配置

也可以不使用TouchGFX Designer来选择图像格式。图像格式在项目根目录下的“ application.config”文件中指定：

{ 
  “ image_configuration”：{ 
    images“：{ 
      ” Blue_Buttons_Round_Edge_small.png“：{ 
        ” format“：” L8_ARGB8888“ 
      } 
    }，
    ” dither_algorithm“：” 2“，
    ” alpha_dither“：”是“，
    ” layout_rotation“：” 0“ ，
    “ opaque_image_format”：“ RGB888”，
    “ nonopaque_image_format”：“ ARGB8888”，
    “ section”：“ ExtFlashSection”，
    “ extra_section”：“ ExtFlashSection” 
  } 
}

“ image_configuration”下的“ images”部分指定单个图像的格式。如果此处未提及图像，则将以默认格式（opaque_image_format或nonopaque_image_format）生成图像。

我们建议尽可能使用TouchGFX Designer进行图像配置。

【来源】

【高级应用开发】touchgfx 之 《Using the L8 Image Format》

使用L8图像格式