STM32F103驱动2.4寸TFT屏实战：如何用SPI接口实现GUI图形库（画圆、写字、显示图片）

STM32F103驱动2.4寸TFT屏实战：如何用SPI接口实现GUI图形库（画圆、写字、显示图片）

在嵌入式系统开发中，图形用户界面(GUI)的实现往往是一个既具挑战性又充满成就感的部分。当我们将目光投向STM32F103这类资源有限的微控制器时，如何在2.4寸TFT屏幕上构建流畅的图形界面就成为了开发者需要解决的关键问题。本文将深入探讨基于SPI接口的GUI实现方案，从底层驱动到高级图形功能的完整开发路径。

1. 硬件基础与SPI驱动配置

1.1 硬件连接与初始化

STM32F103与2.4寸TFT屏的SPI连接需要精确的引脚配置。典型的连接方式如下：

初始化SPI接口时，需要特别注意时钟极性和相位设置。对于大多数TFT屏控制器（如ILI9341），正确的配置是：

SPI_InitStructure.SPI_CPOL = SPI_CPOL_Low; // 时钟极性：低电平空闲 SPI_InitStructure.SPI_CPHA = SPI_CPHA_1Edge; // 数据采样在第一个边沿

1.2 SPI传输优化技巧

在资源受限的STM32F103上，SPI传输效率直接影响GUI的流畅度。以下是几个关键优化点：

• DMA传输：对于大批量数据（如图片显示），启用DMA可显著提升速度
• 双缓冲机制：在内存允许的情况下，使用双缓冲减少等待时间
• 时钟分频：平衡速度与稳定性，通常SPI2在72MHz系统时钟下可设置为PCLK/2

void SPI_SetSpeed(SPI_TypeDef* SPIx, u8 SpeedSet) { SPIx->CR1 &= 0XFFC7; if(SpeedSet == 1) { // 高速模式 SPIx->CR1 |= SPI_BaudRatePrescaler_2; // Fsck=Fpclk/2 } else { // 低速模式 SPIx->CR1 |= SPI_BaudRatePrescaler_32; // Fsck=Fpclk/32 } SPIx->CR1 |= 1<<6; // SPI设备使能 }

2. 基本图形元素实现

2.1 画点与画线算法

所有高级图形功能都建立在最基本的画点函数之上。一个优化的画点实现应包含：

void LCD_DrawPoint(u16 x, u16 y) { LCD_SetCursor(x, y); // 设置光标位置 Lcd_WriteData_16Bit(POINT_COLOR); // 写入颜色数据 }

基于画点函数，我们可以实现Bresenham画线算法，这是计算机图形学中最经典的算法之一：

void LCD_DrawLine(u16 x1, u16 y1, u16 x2, u16 y2) { int dx = abs(x2 - x1), sx = x1 < x2 ? 1 : -1; int dy = -abs(y2 - y1), sy = y1 < y2 ? 1 : -1; int err = dx + dy, e2; // 误差值 while(1) { LCD_DrawPoint(x1, y1); if (x1 == x2 && y1 == y2) break; e2 = 2 * err; if (e2 >= dy) { err += dy; x1 += sx; } if (e2 <= dx) { err += dx; y1 += sy; } } }

2.2 圆形与矩形绘制

圆形绘制同样采用Bresenham算法，以下是实现代码框架：

void gui_circle(u16 x0, u16 y0, u16 color, u8 r, u8 fill) { int x = 0, y = r; int d = 3 - 2 * r; while(x <= y) { if(fill) { LCD_DrawLine(x0 - x, y0 + y, x0 + x, y0 + y); LCD_DrawLine(x0 - x, y0 - y, x0 + x, y0 - y); LCD_DrawLine(x0 - y, y0 + x, x0 + y, y0 + x); LCD_DrawLine(x0 - y, y0 - x, x0 + y, y0 - x); } else { LCD_DrawPoint(x0 + x, y0 + y); LCD_DrawPoint(x0 - x, y0 + y); // 其他7个对称点... } if(d < 0) { d = d + 4 * x + 6; } else { d = d + 4 * (x - y) + 10; y--; } x++; } }

3. 字体显示与中文支持

3.1 英文字符显示原理

英文字符显示通常采用点阵字模，常见尺寸有6x12、8x16等。字模数据通常以数组形式存储：

// 8x16字体'A'的点阵数据示例 const u8 Font8x16_A[] = { 0x00,0x00,0x80,0xC0,0xE0,0xF0,0xF8,0xFC, 0xFC,0xF8,0xF0,0xE0,0xC0,0x80,0x00,0x00 };

显示函数需要逐位判断点阵数据，在相应位置绘制像素：

void Show_Char(u16 x, u16 y, u16 fc, u16 bc, u8 num, u8 size, u8 mode) { u8 temp, t1, t; u16 colortemp; u16 x0 = x; num = num - ' '; // 获取偏移地址 for(t=0; t<size; t++) { if(size==12) temp = asc2_1206[num][t]; else if(size==16) temp = asc2_1608[num][t]; for(t1=0; t1<8; t1++) { if(temp&0x80) colortemp = fc; else colortemp = bc; LCD_DrawPoint(x, y, colortemp); temp <<= 1; x++; if(x>=lcddev.width) return; // 超出屏幕范围 if((x-x0)==size) { x = x0; y++; break; } } } }

3.2 中文字库的实现

中文字符显示原理与英文类似，但需要更大的点阵（通常16x16或24x24）。考虑到STM32F103有限的Flash空间，可以采用以下策略：

1. 部分字库：仅包含项目所需的汉字
2. 外置存储：将完整字库存放在外部SPI Flash或SD卡中
3. 压缩算法：使用简单的RLE压缩减少存储空间

// 16x16汉字"中"的点阵数据示例 const u8 Hzk16_zhong[] = { 0x00,0x40,0x00,0x80,0x01,0x00,0x06,0x00, 0x1F,0xFC,0x60,0x00,0x80,0x00,0x00,0x00, 0x00,0x00,0x80,0x00,0x60,0x00,0x1F,0xFC, 0x06,0x00,0x01,0x00,0x00,0x80,0x00,0x40 };

4. 图片显示与内存优化

4.1 位图转换与存储

在嵌入式系统中显示图片，需要先将图片转换为C数组格式。常用工具包括：

• Image2Lcd：Windows下的图形转换工具
• Python脚本：使用Pillow库自定义转换流程
• 在线转换工具：如LCD Image Converter

转换后的图片数据格式如下：

const unsigned char gImage_qq[1536] = { /* 0X00,0X10,0X30,0X00,0X30,0X00,0X01,0X1B, */ 0XFF,0XFF,0XFF,0XFF,0XFF,0XFF,0XFF,0XFF, 0XFF,0XFF,0XFF,0XFF,0XFF,0XFF,0XFF,0XFF, // ...更多数据... };

4.2 显存管理与局部刷新

在无显存的系统中，直接操作屏幕会导致频繁的SPI通信。优化策略包括：

1. 局部刷新：只更新发生变化的部分区域
2. 缓冲机制：在RAM中建立部分显存缓冲
3. 脏矩形算法：跟踪需要更新的区域

以下是局部刷新的实现示例：

void LCD_UpdateArea(u16 x1, u16 y1, u16 x2, u16 y2) { LCD_SetWindows(x1, y1, x2, y2); LCD_CS_CLR; LCD_RS_SET; for(u16 y = y1; y <= y2; y++) { for(u16 x = x1; x <= x2; x++) { u16 color = GetPixelFromBuffer(x, y); Lcd_WriteData_16Bit(color); } } LCD_CS_SET; }

5. 高级GUI功能实现

5.1 按钮与触摸交互

在无触摸屏的TFT上，可以通过外部按键实现简单交互。按钮的实现需要考虑：

• 视觉状态（正常、按下、禁用）
• 事件处理（按下、释放、长按）
• 回调机制

typedef struct { u16 x, y, width, height; u16 normalColor, pressedColor; char* text; void (*onClick)(void); } Button; void DrawButton(Button* btn, u8 pressed) { u16 color = pressed ? btn->pressedColor : btn->normalColor; LCD_Fill(btn->x, btn->y, btn->x+btn->width, btn->y+btn->height, color); Show_Str(btn->x+5, btn->y+5, BLACK, color, btn->text, 16, 1); } u8 CheckButtonPress(Button* btn, u16 touchX, u16 touchY) { if(touchX >= btn->x && touchX <= btn->x+btn->width && touchY >= btn->y && touchY <= btn->y+btn->height) { if(btn->onClick) btn->onClick(); return 1; } return 0; }

5.2 动画与过渡效果

在资源受限的系统上实现流畅动画需要特殊技巧：

1. 帧率控制：保持稳定的刷新率（通常15-30fps）
2. 双缓冲：减少闪烁
3. 硬件加速：利用定时器同步刷新

void SimpleAnimation(u16 x, u16 y) { for(u8 r = 5; r < 30; r += 2) { LCD_Fill(x-r-2, y-r-2, x+r+2, y+r+2, WHITE); // 清除上一帧 gui_circle(x, y, RED, r, 0); // 绘制当前帧 delay_ms(50); // 控制帧率 } }

6. 性能优化与调试

6.1 SPI传输速率测试

通过测量特定操作的执行时间，可以评估SPI配置的合理性：

void Test_SPI_Speed(void) { u32 start, end; start = SysTick->VAL; LCD_Fill(0, 0, 100, 100, RED); end = SysTick->VAL; u32 cycles = start > end ? start - end : (0xFFFFFF - end) + start; u32 us = cycles / (SystemCoreClock / 1000000); printf("Fill 100x100 area takes %d us\r\n", us); }

6.2 内存使用分析

在STM32F103这类资源受限的设备上，内存管理至关重要。关键指标包括：

• 栈空间使用
• 堆 fragmentation
• 全局变量占用

可以使用以下方法进行分析：

extern int _estack; // 定义在链接脚本中 extern int _Min_Stack_Size; void Check_Memory_Usage(void) { register uint32_t* stack_ptr asm("sp"); uint32_t stack_used = (uint32_t)&_estack - (uint32_t)stack_ptr; uint32_t stack_free = (uint32_t)stack_ptr - (uint32_t)&_Min_Stack_Size; printf("Stack used: %d bytes, free: %d bytes\r\n", stack_used, stack_free); }

7. 实际项目中的应用建议

在工业控制、智能家居等实际项目中应用TFT GUI时，建议采用以下架构：

1. 分层设计：

   • 硬件抽象层（SPI驱动）
   • 基本图形库（画点、线、圆等）
   • 高级GUI组件（按钮、滑块等）
   • 应用逻辑层

2. 资源管理：

   • 使用const修饰符将常量数据放入Flash
   • 动态内存分配谨慎使用
   • 重复利用缓冲区

3. 可维护性：

   • 统一的编码风格
   • 模块化设计
   • 完善的文档注释

/** * @brief 初始化GUI系统 * @param None * @retval None * @note 该函数应在系统初始化后调用 */ void GUI_Init(void) { LCD_Init(); GUI_SetFont(&Font8x16); GUI_SetTextColor(BLACK, WHITE); }

在开发过程中，使用版本控制系统（如Git）管理代码变更，特别是当项目涉及多种显示效果和界面布局时。同时，建立一套完整的测试用例，覆盖所有图形基本功能和交互逻辑，可以显著提高开发效率和系统稳定性。