1. 课程导入
各位工程师朋友，欢迎来到《TouchGFX 图片资源实战部署》的第一章。今天咱们聊聊 TouchGFX 到底是什么，以及它和 STM32 之间那种「天生一对」的关系。
我最早接触 TouchGFX 是在一个工业手持设备的项目里。当时甲方要求 3 天出原型，用传统方式写 LCD 驱动 + 自己画控件，光菜单切换就折腾了两天。后来换成 TouchGFX，半天就把界面搭起来了。嗯，从那以后我就再也没手写过 GUI 了。
什么是 TouchGFX
TouchGFX 是一个嵌入式 GUI 框架，专门为资源受限的 MCU 设计。说白了，它让你能在小屏幕、低内存的芯片上跑出接近智能手机的交互效果。
它的核心特点可以归纳为以下几点：
- 硬件加速：利用 STM32 的 LTDC、DMA2D、Chrom-ART 等外设，把渲染压力从 CPU 卸到硬件上
- 低内存占用：通过帧缓冲压缩、局部刷新等技术，让 64KB RAM 的芯片也能跑 480×272 的界面
- 所见即所得：TouchGFX Designer 里拖拽控件，实时预览，生成的代码直接烧进芯片就能跑
- 丰富的控件库：按钮、滑块、图表、键盘、容器……基本覆盖了 90% 的嵌入式 HMI 需求
核心认知：TouchGFX 不是操作系统，也不是图形库。它是一个完整的 GUI 解决方案——从设计工具到运行时引擎，再到硬件抽象层，全部打包好给你。
TouchGFX 生态系统
很多人以为 TouchGFX 就是个画界面的工具。其实它的生态比你想的要大得多。我把它拆成四个层次：
| 层次 | 组件 | 作用 |
|---|---|---|
| 设计层 | TouchGFX Designer | 拖拽式 UI 设计，自动生成 C++ 代码 |
| 运行时层 | TouchGFX Engine | 事件处理、渲染管线、内存管理 |
| 硬件抽象层 | TouchGFX HAL | 对接 LCD、触摸、DMA、帧缓冲等底层 |
| 工具链层 | Image Converter、Font Converter、Text Converter | 图片/字体/文本的预处理与优化 |
你想想看，这四个层次加在一起，覆盖了从设计到部署的全流程。我在做项目时最常用的流程是：先在 Designer 里拖出界面，然后用 Image Converter 把美工给的 PNG 转成 TouchGFX 的位图格式，最后通过 HAL 层适配到具体的 STM32 开发板上。
个人经验：我建议初学者先别急着碰 HAL 层。直接用 ST 官方的开发板（比如 STM32F769I-DISCO），HAL 层已经适配好了。你只需要关注 Designer 里的 UI 逻辑和图片资源管理就行。
TouchGFX Designer 介绍
Designer 是 TouchGFX 的门面。它运行在 Windows/macOS/Linux 上，界面风格跟 Figma 有点像，但底层生成的代码是纯 C++，可以直接编译进 MCU。
它的核心功能包括：
- 画布编辑：拖拽控件、调整位置、设置属性，实时预览
- 屏幕管理：多 Screen 切换，支持滑动、淡入淡出等过渡动画
- 资源导入：图片、字体、文本、视频（没错，TouchGFX 4.18+ 支持视频播放）
- 代码生成：一键生成 UI 代码，与你的业务逻辑代码无缝集成
我记得第一次用 Designer 时，最让我惊讶的是它的「模拟器」功能。你可以在 PC 上直接运行 UI，触摸、滑动、点击全部模拟，完全不需要硬件。这意味着你可以在等 PCB 打样的那几天就把界面调好。
避坑提醒：我曾经在 Designer 里用了一张 24 位色的 PNG 图片，模拟器跑得飞快。结果烧到芯片上，帧率直接掉到 15fps。后来才发现，那张图片在芯片上没经过 DMA2D 加速，全靠 CPU 软解。所以记住：模拟器流畅 ≠ 硬件流畅，图片格式和色彩深度一定要提前规划好。
TouchGFX 与 STM32 的关系
这个问题我经常被问到。简单回答：TouchGFX 是 ST 官方主推的 GUI 方案，深度绑定 STM32 的硬件特性。
具体来说，这种关系体现在三个层面：
- 硬件加速依赖：TouchGFX 的渲染管线大量使用 STM32 的 DMA2D（图形加速器）和 LTDC（LCD 控制器）。没有这些外设，TouchGFX 的性能会大打折扣。
- MCU 选型绑定：虽然 TouchGFX 理论上可以移植到其他 MCU，但 ST 官方只提供 STM32 的 HAL 层适配。我见过有人尝试移植到 GD32，折腾了两周还是放弃了。
- 工具链整合：STM32CubeMX 可以直接生成 TouchGFX 工程，自动配置时钟、GPIO、FMC、LTDC 等外设。你不需要手动写一行初始化代码。
为什么会这样？因为 ST 收购 TouchGFX 之后，就把它的底层跟 STM32 的硬件抽象层深度耦合了。说白了，TouchGFX 就是为 STM32 量身定做的 GUI 引擎。
一句话总结：如果你用 STM32 做带屏幕的产品，TouchGFX 是最省心的选择。如果你用其他 MCU，建议看看 LVGL 或 emWin。
知识体系总览
下面这张图是我自己整理的 TouchGFX 知识体系。你可以把它当作整个课程的地图：
这张图把 TouchGFX 拆成了四个支柱：GUI 框架、硬件加速、工具链和生态系统。而咱们这门课，主要聚焦在最下面那一排——图片资源的实战部署。说白了，就是怎么把美工给的图片，在 TouchGFX 里用最省内存、最高性能的方式跑起来。