自学读本:跟着读、照着做,卡住就问 AI
你好,我是吴老师。这份是给你自己读的——看到让你停下来的地方,就照着做一遍。
前五课,屏幕已经有了颜色、能画点线圆方、能自己动、还能听懂你的手指。可你发现没有?到现在,它一个字都没说过。
一块只会比划手势、一句话都讲不出来的屏幕,像个闷葫芦。今天我们就给它装上"嗓子"。
一、先做个会让你愣住的实验
我想让你写一行字,就五个字:「你好,世界」。
你大概会顺手写出这句:
tft.drawString("你好,世界", 10, 100, 2);
烧进去,屏幕亮起来——
然后你盯着它看。
屏上要么是一串方块 □□,要么是问号 ??,要么干脆是看不懂的乱码。
反正不是"你好,世界"。
先别急着改,把这个画面记住。
这是今天最值钱的一幕:我们以为"显示中文"天经地义,可板子根本不认识中文。
为什么?我们一层一层拆。
二、字,其实是画出来的
还记得第 5 课吗?屏幕上的每一个点,都要你亲口告诉板子它是什么颜色。
文字,没有例外。
屏幕不会写字,它只会画点。所谓"显示汉字",说穿了就是:把一个个小点,按字模的样子点亮。
拿"吴"字举例,放大成一个 16×16 的格子(16 行、每行 16 个点):
那些该亮的点连起来,你的眼睛就认出了"吴"字。
所以一个 16×16 的汉字,其实是 16 × 16 = 256 个点。板子要一个一个去点亮它们。
打个比方:字就像用乐高小颗粒拼出来的图案。给你一盒白颗粒、一盒黑颗粒,按图纸把该放黑颗粒的位置放好,远处一看,"字"就出现了。屏幕干的就是这事——只不过它的"颗粒"是像素点,亮一下就没了。
三、为什么中文比英文麻烦这么多
我们看一个汉字"吴"和字母"A",在电脑里是怎么被记住的。
- 英文只有 26 个字母 + 数字 + 标点,几十个符号。老早人们约定:每个符号用一个字节编号,这叫 ASCII。一个字母,板子读一个字节就知道了。
- 中文呢?常用汉字就有 3500 个,加上标点、生僻字,成千上万。一个字节最多 256 种,装不下。所以中文用 UTF-8:一个汉字通常要 3 个字节。
这带来第二个麻烦:字库。
英文那几十个符号,板子可以"顺便"带着。几千个汉字的字模,每个 32 字节(16×16÷8),加起来好几百 KB——板子不可能全预装。
所以你有两个选择:
- 自己带一份字库文件(
font/ChineseFont16.h就是本板自带的一小份); - 或者,板子就假装不认识中文,于是你看到的就是刚才那一堆方块。
打个比方: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. 颜色用温和的亮色,不要用纯白纯黄。