AI 编程课
完整教案
自学课件
9 课 · 共 9/48

中文信息卡 ——嵌入式设备怎样显示文字

课时
待定
器材
ESP32-S3 触摸屏板 + USB 线
前置知识
配套代码
见项目 demo 目录

自学读本:跟着读、照着做,卡住就问 AI

你好,我是吴老师。这份是给你自己读的——看到让你停下来的地方,就照着做一遍。

前五课,屏幕已经有了颜色、能画点线圆方、能自己动、还能听懂你的手指。可你发现没有?到现在,它一个字都没说过。

一块只会比划手势、一句话都讲不出来的屏幕,像个闷葫芦。今天我们就给它装上"嗓子"。


一、先做个会让你愣住的实验

我想让你写一行字,就五个字:「你好,世界」

你大概会顺手写出这句:

tft.drawString("你好,世界", 10, 100, 2);

烧进去,屏幕亮起来——

然后你盯着它看。

屏上要么是一串方块 □□,要么是问号 ??,要么干脆是看不懂的乱码

反正不是"你好,世界"。

先别急着改,把这个画面记住。

这是今天最值钱的一幕:我们以为"显示中文"天经地义,可板子根本不认识中文。

为什么?我们一层一层拆。


二、字,其实是画出来的

还记得第 5 课吗?屏幕上的每一个点,都要你亲口告诉板子它是什么颜色

文字,没有例外。

屏幕不会写字,它只会画点。所谓"显示汉字",说穿了就是:把一个个小点,按字模的样子点亮

拿"吴"字举例,放大成一个 16×16 的格子(16 行、每行 16 个点):

字是点阵

那些该亮的点连起来,你的眼睛就认出了"吴"字。

所以一个 16×16 的汉字,其实是 16 × 16 = 256 个点。板子要一个一个去点亮它们。

打个比方:字就像用乐高小颗粒拼出来的图案。给你一盒白颗粒、一盒黑颗粒,按图纸把该放黑颗粒的位置放好,远处一看,"字"就出现了。屏幕干的就是这事——只不过它的"颗粒"是像素点,亮一下就没了。


三、为什么中文比英文麻烦这么多

我们看一个汉字"吴"和字母"A",在电脑里是怎么被记住的。

ASCII 与 UTF-8

  • 英文只有 26 个字母 + 数字 + 标点,几十个符号。老早人们约定:每个符号用一个字节编号,这叫 ASCII。一个字母,板子读一个字节就知道了。
  • 中文呢?常用汉字就有 3500 个,加上标点、生僻字,成千上万。一个字节最多 256 种,装不下。所以中文用 UTF-8:一个汉字通常要 3 个字节

这带来第二个麻烦:字库

英文那几十个符号,板子可以"顺便"带着。几千个汉字的字模,每个 32 字节(16×16÷8),加起来好几百 KB——板子不可能全预装

所以你有两个选择:

  1. 自己带一份字库文件font/ChineseFont16.h 就是本板自带的一小份);
  2. 或者,板子就假装不认识中文,于是你看到的就是刚才那一堆方块。

打个比方:ASCII 像家门口便利店的会员卡,店员看一眼就知道你是谁;UTF-8 像一本厚厚的电话黄页,而且这本市里没有,你得自己带一本,店员才查得到"吴"是谁。

比喻要修正:黄页给的是"电话",字库给的是"画法"——查到之后,它把这套点阵交给你,让你去画。


四、本板的规矩:两个名字,两种命

本板显示文字有两个函数,名字很像,命运完全不同:

函数对英文对中文
tft.drawString("Hi", ...)✅ 正常❌ 方块 / 乱码
drawChinese("你好", ...)✅ 正常✅ 正常

差别在哪?

  • tft.drawString() 用的是 TFT_eSPI 自带的英文字模根本没装中文。喂它中文,对不上号,只能画方块。
  • drawChinese() 是板子自带的助手函数:它先按 UTF-8 把每个中文字拆出"编号",再去 font/ChineseFont16.h 这份字库里翻出对应点阵,一个一个点画出来。

本板铁规矩:显示中文,必须走 drawChinese() + font/ChineseFont16.h,不能用 tft.drawString()

这条规矩你记死了,能省掉八成"为什么全是方块"的抓狂。

顺带一句亮度:这节课画文字也别用 255 的纯白纯黄,用 tft.color565(220, 220, 220) 这种温和的亮就行,屏幕不刺眼。


五、字显示出来了,麻烦才刚开始

好不容易把"你好,世界"打出来,新问题来了:字太多,屏幕装不下怎么办?

一首稍长的诗、一封给家人的信,屏幕只有 240×320,一个 16px 的字就有 16 像素宽。

长文字有四种常见的处理方式,看哪种适合你:

方式做法适合
换行一行写满就换下一行短文、说明
分页满一屏就翻到下一页长文、信件
滚动整段文字慢慢往上移歌词、通知
摘要只显示开头一句 + "更多"列表、标题

打个比方:这四种就像看书——换行是正常排版,分页是一页页翻,滚动是把长纸条从下往上拉,摘要是只看目录。同一本书,四种读法。

比喻要修正:书印好不动,屏幕上的"页""滚动"是你写的程序临时算出来的,每次显示都要重新点一遍那些像素。


六、算一笔账:屏幕能装多少字

我们拿尺子量一量这块屏幕(配图见下):

屏幕能装多少字

  • 屏幕宽 240,字宽 16 → 一行最多 240 ÷ 16 = 15 个汉字
  • 屏幕高 320,字高 16(+一点行距)→ 一屏大约 20 行
  • 一屏能放的字 ≈ 15 × 20 = 300 字左右

300 字,一屏就满了。所以才有了上面那四种"溢出了怎么办"的办法。


七、动手做:你的第一块电子铭牌

挑一个你喜欢的做:

作品 A · 电子铭牌 屏幕中央显示「我是 ___」,后面填上你自己的名字,下面再写一句你喜欢的口号。开机就亮着,像一块小门牌。

作品 B · 今日信息卡 显示今天的日期(写死也行)、一句"今日提醒",再加一句你想说的话。像一张摆在桌上的小卡片。

两个作品都只要三步:清屏 → drawChinese() 写文字 → 完毕。难点不在写,在把字放到你想要的位置——这又回到第 5 课的坐标了。

摆放小技巧:本板有个 drawCenteredChinese(),会自动把文字居中。想让它躺在正中间,就喂它屏幕宽度的一半当中心。


八、自检:先猜,再烧

今天最值钱的验证,是亲眼看看"不用 drawChinese 会怎样"。先在脑子里猜结果,再烧进板子看真实情况:

你做的事你的预测板子实测
tft.drawString("你好世界")(猜:能显示?)(烧进去看)
drawChinese("你好世界")(猜:一样?)(烧进去看)
一行放 16 个 16px 汉字(猜:放得下?)(数一下边缘)

重点不是谁对谁错,而是你亲眼确认了那个坑的存在。以后只要看到方块,你脑子里立刻跳出:"哦,又没走 drawChinese。"——这就值了。


九、最后留给你

今天只是"让屏幕说话"的第一步。下面几个方向,挑一个折腾:

方向你可以做什么
滚动歌词让一句歌词在屏幕底部慢慢往左滚,像 KTV
给家人写一句话显示"妈妈辛苦了",做张永远亮着的小卡片
班级点名册用串口输入序号,屏幕显示对应同学的名字
中英混排一句里既有中文又有英文,看它们怎么并排站着

附:给 AI 的提示词(直接复制)

我要用 ESP32-S3 触摸屏板显示中文,板子自带 drawChinese() 和 font/ChineseFont16.h。
请帮我写一段 Arduino 代码:
1. 清屏为深色背景;
2. 在屏幕中央用 drawChinese() 显示"我是小明";
3. 在下方显示一句口号"每天进步一点点";
4. 不要使用 tft.drawString() 来显示中文;
5. 颜色用温和的亮色,不要用纯白纯黄。

本节配套资源 · 在线烧录

查看全部固件 →

下列演示程序已编译为可烧录固件。把你的 ESP32-S3 触摸屏板 用 USB 接上电脑(需 Chrome / Edge 浏览器),点「在线烧录」即可直接写入,无需安装任何软件。

第 9 课 · 先失败再成功
可烧录

故意先用 tft.drawString() 写中文——你会看到方块/乱码;再换 drawChinese() 就正常了。亲眼确认这个"坑"。

09 文字 中文 demo
第 9 课 · 滚动字幕
可烧录

屏幕底部一行中文从右往左滚动,用 millis() 控制速度,不阻塞主循环。

09 文字 中文 demo
第 9 课 · 自动换行
可烧录

一段长中文自动按每行 15 字折行显示,理解"一行能放几个字"的算账。

09 文字 中文 demo
第 9 课 · 作品 · 电子铭牌
可烧录

屏幕正中显示"我是小明"+ 一句口号,drawCenteredChinese() 自动居中。

09 文字 中文 demo