从点亮到炫酷UI手把手教你用ST7789 TFT屏在STM32上显示中文和图片含取模教程当ST7789 TFT屏幕成功点亮的那一刻许多嵌入式开发者会面临一个更实际的问题如何让这块240x240像素的屏幕真正活起来无论是智能家居终端的温湿度仪表盘还是迷你游戏机的复古界面亦或是工业设备的操作面板图形化内容显示才是项目的灵魂所在。本文将彻底解决两个核心痛点如何为任意汉字和图片生成可用的数据数组以及如何高效组织这些资源实现动态界面效果。1. 图形资源生成从像素到数组1.1 汉字取模实战传统嵌入式显示汉字通常有三种方案使用完整字库芯片、外挂TF卡读取字库文件或是直接使用取模数组。对于ST7789这类SPI接口屏幕取模数组方案在资源占用和响应速度上最具优势。推荐使用PCtoLCD2002这款经典取模软件其操作流程如下设置取模参数点阵格式选择阴码数据1表示点亮取模方式为逐列式输出数制选十六进制自定义大小常用12x12、16x16、24x24生成字模数据/* 16x16 汉字温 */ const unsigned char wen_16x16[] { 0x00,0x40,0x00,0x40,0xFE,0x48,0x22,0x48,0x22,0x48,0xFE,0x7F,0x22,0x48,0x22,0x48, 0xFE,0x48,0x00,0x40,0x7C,0x40,0x44,0x40,0x44,0x40,0x7C,0x40,0x44,0x40,0x00,0x40 };提示对于常用汉字建议建立分层字库。例如将100个高频汉字直接编译进程序其余字库存放在外部Flash中按需加载。1.2 图片优化处理技巧240x240的16位色图片原始数据需要112.5KB存储空间这对STM32F103的64KB RAM显然是灾难性的。实际应用中需要以下优化手段优化方式实现方法压缩率适用场景色彩降阶使用8位索引色50%色彩简单的图标RLE编码连续相同值压缩30-70%大面积纯色背景分区存储切片为多个小图按需加载大尺寸背景图抖动算法误差扩散处理保持视觉质量照片类图像以天气图标为例使用Image2Lcd软件转换时选择抖动16色模式可将一个50x50的图标压缩到300字节左右/* 晴天图标 50x50 16色 */ const unsigned char sunny_icon[] { 0x01,0x01,0x01,0x01,0x02,0x02,0x02,0x02,0x03,0x03,0x03,0x03,0x04,0x04,0x04,0x04, ... 0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F,0x0F };2. 资源管理系统设计2.1 字库的模块化组织在lcdfont.h中采用分层结构管理不同尺寸字体typedef struct { uint8_t width; uint8_t height; const uint8_t *bitmap; } FontChar; typedef struct { uint8_t size; FontChar *chars; } FontType; /* 12x12字体声明 */ extern FontType Font12; /* 16x16字体声明 */ extern FontType Font16;对应的实现文件lcdfont.c中const FontChar font12_chars[] { {12,12,wen_12x12}, // 温 {12,12,shi_12x12}, // 湿 ... }; FontType Font12 { .size 12, .chars font12_chars };这种结构允许运行时动态切换字库特别适合多语言界面场景。2.2 图片资源池技术建立图片资源索引表解决内存碎片问题typedef struct { uint16_t id; uint16_t width; uint16_t height; const uint8_t *data; } ImageEntry; const ImageEntry image_table[] { {1, 50, 50, sunny_icon}, {2, 50, 50, cloudy_icon}, ... }; const uint8_t* GetImageById(uint16_t id) { for(int i0; isizeof(image_table)/sizeof(ImageEntry); i) { if(image_table[i].id id) { return image_table[i].data; } } return NULL; }3. 高效渲染引擎实现3.1 双缓冲机制在STM32F4/F7等带外部RAM的型号上实现双缓冲可彻底消除闪烁在外部RAM开辟两个240x240x2字节的缓冲区绘制操作只在后台缓冲区进行完成一帧后交换缓冲区指针// 在SDRAM中分配缓冲区 uint16_t *frame_buf[2]; frame_buf[0] (uint16_t*)SDRAM_BANK_ADDR; frame_buf[1] (uint16_t*)SDRAM_BANK_ADDR 240*240; void SwapBuffer() { static uint8_t active_buf 0; active_buf ^ 0x01; ST7789_SetWindow(0, 0, 239, 239); ST7789_WriteData((uint8_t*)frame_buf[active_buf], 240*240*2); }3.2 局部刷新优化对于数据更新区域采用差异刷新策略void UpdateArea(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2) { ST7789_SetWindow(x1, y1, x2, y2); for(int yy1; yy2; y) { uint16_t *line frame_buf[active_buf][y*240 x1]; ST7789_WriteData((uint8_t*)line, (x2-x11)*2); } }4. 实战天气站UI开发4.1 界面元素分解典型天气界面包含以下图层背景层静态图片数据层温度/湿度数值图标层天气动画装饰层边框、分割线void DrawWeatherUI(float temp, float humidity, uint8_t weather) { // 绘制背景 LCD_ShowPicture(0, 0, 240, 240, bg_image); // 显示温度带抗锯齿字体 DrawAAString(80, 60, tempStr, Font24, COLOR_WHITE); // 显示天气图标 LCD_ShowPicture(100, 100, 50, 50, GetWeatherIcon(weather)); // 刷新指定区域 UpdateArea(60, 50, 180, 160); }4.2 动画效果实现利用STM32的定时器实现帧动画typedef struct { uint8_t frame_count; uint8_t current_frame; const uint8_t **frames; uint16_t interval; uint32_t last_update; } Animation; void UpdateAnimation(Animation *anim) { if(HAL_GetTick() - anim-last_update anim-interval) { anim-current_frame (anim-current_frame 1) % anim-frame_count; anim-last_update HAL_GetTick(); // 重绘动画区域 LCD_ShowPicture(anim-x, anim-y, anim-width, anim-height, anim-frames[anim-current_frame]); } }在CubeMX中配置一个基本定时器如TIM6产生10ms时基然后在主循环中调用各动画对象的更新函数即可实现流畅动画效果。
