1. ILI9341与Arduino的完美组合这块2.4寸TFT触控屏简直就是为Arduino量身定制的显示解决方案。我刚开始接触时也犯嘀咕这么小的屏幕能干啥但实际用下来发现它不仅能显示丰富的内容还支持触控操作特别适合做嵌入式设备的交互界面。ILI9341驱动芯片是这套方案的核心它支持240x320的分辨率16位真彩色显示。最让我惊喜的是市面上很多现成的扩展板比如2.4inch TFT Touch Shield已经帮我们做好了硬件适配直接插在Arduino UNO上就能用完全不用操心底层电路。注意购买屏幕时一定要确认是否包含触控功能有些廉价版本可能只有显示功能。2. 环境搭建与基础配置2.1 硬件连接这块屏幕的连接简单到令人发指。我用的是兼容UNO的扩展板直接像叠积木一样插在Arduino上就行。如果是裸屏模块接线会麻烦些需要连接8位数据线D0-D7控制线CS, RS, WR, RD, RST背光控制触控接口如果有触控功能实测UNO的GPIO完全够用不过要注意有些引脚比如D0/D1被串口占用最好避开。2.2 库的选择与安装我试过三种主流驱动库Adafruit_ILI9341最稳定的基础库TFT_eSPI性能更好的选择UTFT老牌但略显臃肿推荐新手用Adafruit全家桶安装简单#include Adafruit_ILI9341.h #include Adafruit_GFX.h记得在库管理器里同时安装Adafruit_GFX这个图形核心库它提供了所有绘图函数的基础实现。3. 图形绘制实战3.1 基本图形绘制先来个最简单的清屏操作tft.fillScreen(ILI9341_BLACK); // 填满黑色画线是界面设计的基础这里有个小技巧水平线和垂直线要分开画速度更快tft.drawFastHLine(10, 20, 100, ILI9341_RED); // 从(10,20)向右画100像素红线 tft.drawFastVLine(50, 30, 80, ILI9341_GREEN); // 从(50,30)向下画80像素绿线画矩形时要注意坐标系统tft.drawRect(50, 50, 100, 60, ILI9341_WHITE); // 空心矩形 tft.fillRect(55, 55, 90, 50, ILI9341_BLUE); // 实心矩形3.2 高级绘图技巧圆形和圆角矩形的抗锯齿是个痛点。我摸索出的解决方案是tft.drawCircle(100, 100, 30, ILI9341_YELLOW); // 标准圆 for(int r28; r32; r){ // 简易抗锯齿 tft.drawCircle(100, 100, r, ILI9341_YELLOW); }绘制三角形时要注意顶点顺序tft.drawTriangle(10,10, 50,50, 10,50, ILI9341_CYAN);4. 触控功能开发4.1 触控校准触控不准是常见问题必须做校准。我的校准代码长这样#include TouchScreen.h #define YP A3 // 必须用模拟引脚 #define XM A2 #define YM 9 #define XP 8 TouchScreen ts TouchScreen(XP, YP, XM, YM, 300); void calibrate(){ tft.fillScreen(ILI9341_BLACK); tft.setCursor(10,10); tft.setTextColor(ILI9341_WHITE); tft.println(点击十字中心); // 显示校准点并记录坐标... }4.2 触控交互设计实现按钮响应时建议建立按钮对象数组struct Button { int x, y, w, h; char* label; }; Button btn1 {50, 100, 80, 40, 确定};检测触控的典型代码结构TSPoint p ts.getPoint(); if (p.z ts.pressureThreshhold) { int16_t screenX map(p.y, TS_MINY, TS_MAXY, 0, tft.width()); int16_t screenY map(p.x, TS_MINX, TS_MAXX, 0, tft.height()); if(checkButton(btn1, screenX, screenY)){ // 按钮响应逻辑 } }5. 界面优化技巧5.1 提升刷新效率直接操作帧缓冲区能大幅提升性能tft.startWrite(); // 开始批量写入 for(int i0; i100; i){ tft.writePixel(random(tft.width()), random(tft.height()), random(0xFFFF)); } tft.endWrite(); // 结束批量写入双缓冲技术在小内存的Arduino上也能实现uint16_t buffer[240]; // 一行像素的缓冲区 for(int y0; y320; y){ // 填充buffer... tft.drawRGBBitmap(0, y, buffer, 240, 1); }5.2 字体与排版使用自定义字体需要先包含头文件#include Fonts/FreeSansBold18pt7b.h tft.setFont(FreeSansBold18pt7b);文字居中显示的实用函数void drawCenteredText(String text, int y) { int16_t x1, y1; uint16_t w, h; tft.getTextBounds(text, 0, 0, x1, y1, w, h); tft.setCursor((tft.width()-w)/2, y); tft.print(text); }6. 实战项目简易示波器界面结合这些技术我做了个简易示波器界面void drawOscilloscope() { // 绘制网格 tft.fillScreen(ILI9341_BLACK); for(int x0; x240; x20){ tft.drawFastVLine(x, 0, 320, ILI9341_DARKGREY); } for(int y0; y320; y20){ tft.drawFastHLine(0, y, 240, ILI9341_DARKGREY); } // 绘制波形 tft.startWrite(); int lastY map(analogRead(A0), 0, 1023, 319, 0); for(int x1; x240; x){ int y map(analogRead(A0), 0, 1023, 319, 0); tft.drawLine(x-1, lastY, x, y, ILI9341_GREEN); lastY y; delay(10); } tft.endWrite(); }这个项目展示了如何将图形绘制、实时数据可视化结合起来。实际使用时可以添加触控按钮来控制采样频率和触发模式。
ILI9341实战指南：Arduino 2.4寸TFT触控屏的图形绘制与界面设计
发布时间：2026/6/13 4:09:39
1. ILI9341与Arduino的完美组合这块2.4寸TFT触控屏简直就是为Arduino量身定制的显示解决方案。我刚开始接触时也犯嘀咕这么小的屏幕能干啥但实际用下来发现它不仅能显示丰富的内容还支持触控操作特别适合做嵌入式设备的交互界面。ILI9341驱动芯片是这套方案的核心它支持240x320的分辨率16位真彩色显示。最让我惊喜的是市面上很多现成的扩展板比如2.4inch TFT Touch Shield已经帮我们做好了硬件适配直接插在Arduino UNO上就能用完全不用操心底层电路。注意购买屏幕时一定要确认是否包含触控功能有些廉价版本可能只有显示功能。2. 环境搭建与基础配置2.1 硬件连接这块屏幕的连接简单到令人发指。我用的是兼容UNO的扩展板直接像叠积木一样插在Arduino上就行。如果是裸屏模块接线会麻烦些需要连接8位数据线D0-D7控制线CS, RS, WR, RD, RST背光控制触控接口如果有触控功能实测UNO的GPIO完全够用不过要注意有些引脚比如D0/D1被串口占用最好避开。2.2 库的选择与安装我试过三种主流驱动库Adafruit_ILI9341最稳定的基础库TFT_eSPI性能更好的选择UTFT老牌但略显臃肿推荐新手用Adafruit全家桶安装简单#include Adafruit_ILI9341.h #include Adafruit_GFX.h记得在库管理器里同时安装Adafruit_GFX这个图形核心库它提供了所有绘图函数的基础实现。3. 图形绘制实战3.1 基本图形绘制先来个最简单的清屏操作tft.fillScreen(ILI9341_BLACK); // 填满黑色画线是界面设计的基础这里有个小技巧水平线和垂直线要分开画速度更快tft.drawFastHLine(10, 20, 100, ILI9341_RED); // 从(10,20)向右画100像素红线 tft.drawFastVLine(50, 30, 80, ILI9341_GREEN); // 从(50,30)向下画80像素绿线画矩形时要注意坐标系统tft.drawRect(50, 50, 100, 60, ILI9341_WHITE); // 空心矩形 tft.fillRect(55, 55, 90, 50, ILI9341_BLUE); // 实心矩形3.2 高级绘图技巧圆形和圆角矩形的抗锯齿是个痛点。我摸索出的解决方案是tft.drawCircle(100, 100, 30, ILI9341_YELLOW); // 标准圆 for(int r28; r32; r){ // 简易抗锯齿 tft.drawCircle(100, 100, r, ILI9341_YELLOW); }绘制三角形时要注意顶点顺序tft.drawTriangle(10,10, 50,50, 10,50, ILI9341_CYAN);4. 触控功能开发4.1 触控校准触控不准是常见问题必须做校准。我的校准代码长这样#include TouchScreen.h #define YP A3 // 必须用模拟引脚 #define XM A2 #define YM 9 #define XP 8 TouchScreen ts TouchScreen(XP, YP, XM, YM, 300); void calibrate(){ tft.fillScreen(ILI9341_BLACK); tft.setCursor(10,10); tft.setTextColor(ILI9341_WHITE); tft.println(点击十字中心); // 显示校准点并记录坐标... }4.2 触控交互设计实现按钮响应时建议建立按钮对象数组struct Button { int x, y, w, h; char* label; }; Button btn1 {50, 100, 80, 40, 确定};检测触控的典型代码结构TSPoint p ts.getPoint(); if (p.z ts.pressureThreshhold) { int16_t screenX map(p.y, TS_MINY, TS_MAXY, 0, tft.width()); int16_t screenY map(p.x, TS_MINX, TS_MAXX, 0, tft.height()); if(checkButton(btn1, screenX, screenY)){ // 按钮响应逻辑 } }5. 界面优化技巧5.1 提升刷新效率直接操作帧缓冲区能大幅提升性能tft.startWrite(); // 开始批量写入 for(int i0; i100; i){ tft.writePixel(random(tft.width()), random(tft.height()), random(0xFFFF)); } tft.endWrite(); // 结束批量写入双缓冲技术在小内存的Arduino上也能实现uint16_t buffer[240]; // 一行像素的缓冲区 for(int y0; y320; y){ // 填充buffer... tft.drawRGBBitmap(0, y, buffer, 240, 1); }5.2 字体与排版使用自定义字体需要先包含头文件#include Fonts/FreeSansBold18pt7b.h tft.setFont(FreeSansBold18pt7b);文字居中显示的实用函数void drawCenteredText(String text, int y) { int16_t x1, y1; uint16_t w, h; tft.getTextBounds(text, 0, 0, x1, y1, w, h); tft.setCursor((tft.width()-w)/2, y); tft.print(text); }6. 实战项目简易示波器界面结合这些技术我做了个简易示波器界面void drawOscilloscope() { // 绘制网格 tft.fillScreen(ILI9341_BLACK); for(int x0; x240; x20){ tft.drawFastVLine(x, 0, 320, ILI9341_DARKGREY); } for(int y0; y320; y20){ tft.drawFastHLine(0, y, 240, ILI9341_DARKGREY); } // 绘制波形 tft.startWrite(); int lastY map(analogRead(A0), 0, 1023, 319, 0); for(int x1; x240; x){ int y map(analogRead(A0), 0, 1023, 319, 0); tft.drawLine(x-1, lastY, x, y, ILI9341_GREEN); lastY y; delay(10); } tft.endWrite(); }这个项目展示了如何将图形绘制、实时数据可视化结合起来。实际使用时可以添加触控按钮来控制采样频率和触发模式。
的演进与通信机制)
