手指变成指令 触摸坐标、点击和滑动

你好，我是吴老师。

第 2 课我们认识了一个输入设备：BOOT 按键。它能告诉板子一件事——按下了，还是没按下。就两种可能。

今天认识第二个输入设备：你的手指。

先问你一个问题：手指按在屏幕上，和按在按键上，告诉板子的信息一样多吗？

不一样，而且差得很远。 按键只能说"是"或"否"；手指能说出"在哪儿"。

读完之后，你应该能：说出手指比按键多给了多少信息；知道触摸芯片走哪条总线、靠什么区分设备；用坐标判断做出自己的"按钮"；说清触摸能识别哪些动作、这些动作是怎么用"时间 + 位移"算出来的、以及哪些事情这块板做不了；独立完成挡板球和电子画板两个作品。

用时：90 分钟以上（两个作品，可分两次做）。准备：板子、数据线、已接入板卡 Skill 的 WorkBuddy。

一、手指比按键多说了什么

注意这个数字 76,800——第 3 课我们数过屏幕上有 76,800 个像素点。现在你的手指，可以单独指出其中任何一个。

所以按键给你的是"1 个开关"，手指给你的是"七万六千八百个开关"。

打个比方：按键像门铃，只有"响"和"不响"；触摸屏像地图，你指哪儿它就知道哪儿。

这个比喻有个地方要修正：手指其实是被"测量"出来的，不是被"看见"的——屏幕底下有一层感应层在测电容变化。

二、手指的位置是怎么被知道的

屏幕下面藏着一块触摸芯片，叫 FT6336，专门测量手指位置，再把结果告诉主控。

它们说话走的是 I2C（读作 I 平方 C）：

只有两根线，却要同时管好几个设备（触摸芯片、音频芯片都挂上面）。它们怎么不打架？靠地址。

打个比方：I2C 像一条走廊，两边好几间办公室。主控想找谁，就先喊一声房间号（地址），只有那间应答，其他装作没听见。

修正：走廊上同时只能有一个人说话，不像办公室里大家能同时聊。所以 I2C 是轮流说。

先去查一查：

我是小学生，正在学习这块 ESP32-S3 触摸屏板。
请先读取 esp32s3-touchboard-hardware-dev Skill，确认：
1. 触摸芯片的型号，以及它在 I2C 上的地址；
2. I2C 用的是哪两个 GPIO；
3. 项目里已经验证过的触摸示例在哪个文件；
4. 触摸坐标的范围是多少，和屏幕的 240×320 一致吗。
只检查和解释，不改代码、不烧录。

三、先读出坐标来看看

别急着做游戏，第一步永远是先看见数据。

请新建一个触摸实验：
1. 初始化屏幕和触摸芯片（I2C，SDA=16、SCL=15）；
2. 手指按在屏幕上时，在那个位置画一个半径 ___ 的小圆点（参考 3）；
3. 同时通过串口打印"x=__, y=__, 是否按下"；
4. 屏幕顶部留一条信息栏，高度 ___ 像素（参考 34），固定显示最近一次的坐标，
   并且这一条不要被手指画上点。

请用中文注释，参考项目里已经验证过的触摸示例，烧录前核对端口。

请边做边记：

重点看两件事：

1. 按左上角时，坐标是不是接近 (0, 0)？ 如果按左边却显示很大的 x，说明触摸坐标和屏幕坐标方向不一致——不是你错了，是两个芯片"看法"不同，需要转换。
2. 点的位置对得上手指吗？ 差了一截就要校准。

这就是真实工程：两个零件各自都对，凑一起却要对齐一下。 而且板子不会报错，它只是静静地给出坐标对不对。

四、作品一：挡板球

屏幕底部有块挡板，手指左右移动，挡板跟着走，别让小球掉下去。

请做一个"挡板球"游戏：
1. 屏幕底部有一块挡板，宽 ___、高 ___（你自己定，参考 60 和 8）；
2. 我的手指在屏幕上左右移动时，挡板跟着我的手指【横坐标】移动，
   手指移到哪儿挡板就跟到哪儿（只跟横向，不跟纵向）；
3. 一个小球从屏幕上方往下落，撞到左右和上方边界会反弹；
4. 小球碰到挡板就弹回去，每接住一次加 1 分；
5. 小球掉到屏幕底部以下就结束，屏幕显示"坚持了__秒，接住__次"；
6. 小球一开始下落的速度你自己定 ___（参考 每帧 3 像素）；
7. 按 BOOT 重新开始。
请用中文注释，保留旧程序，烧录前核对端口，亮度不超过 80。

玩起来后回答三个问题：

1. 挡板跟手吗？ 快速划过去，是立刻跟上还是慢半拍？
2. 如果慢半拍，问题出在"读手指读得不够勤"还是"画得不够快"？（想想第 7 课的帧预算。）
3. 挡板宽度从 60 改成 20，难度变了多少？——难度是可以量化调整的，这是游戏设计里很重要的事。

这里藏着一个关键概念

挡板跟着手指走，本质上是什么？写成中文步骤：

每一帧：
    问一次触摸芯片：现在手指在哪儿？
    如果按下了：
        把挡板的横坐标改成手指的横坐标
    如果没按下：
        挡板留在原地

    盖掉旧的挡板
    画出新的挡板

    算出小球的新位置
    如果碰到挡板：让小球往上弹，加 1 分
    如果掉出屏幕底部：游戏结束

找一找："问一次触摸芯片"多久做一次合适？ 这直接决定手感，第七节再算这笔账。

五、作品二：电子画板

请做一个电子画板：
1. 黑色背景，手指在屏幕上划过时留下线条（用画小圆点或画短线实现）；
2. 屏幕顶部留出 4 个小方块，分别是红、绿、蓝、黄，每个宽 ___、高 ___（参考 40 和 30），
   点一下就切换画笔颜色（手指按在那个区域里就算选中）；
3. 再留一个"清屏"方块，位置你自己定 ___（想想放哪最不容易点错），点一下清空画布；
4. 顶部最右边显示当前画笔颜色；
5. 颜色亮度都不超过 ___（参考 80）。
请参考项目里已验证的触摸画板示例，用中文注释，烧录前核对端口。

做完观察一件事：慢慢划和快速划，画出来的线一样吗？

大概率不一样——快速划会画成一串断开的点。

为什么？因为板子不是一直看着你的手指，它是每隔一小会儿才问一次。你划太快，两次询问之间手指跑出去一大截，中间那段它没看见。

打个比方：像在雪地上踩脚印——走得慢脚印连成线，跑起来脚印就一格一格分开。

修正：雪地是连续的，而屏幕是被"问"出来的——中间没被问到的时刻是彻底没记录，不是记录得模糊。

两个解法，都试试：

1. 问得更勤（提高读取频率）
2. 把两次的点连成线（用第 5 课的 drawLine 把上一个点和这一个点连起来）

第二个更聪明——不需要板子变快，只需要记住上一个点在哪儿。

请改进画板：
记住上一次手指的位置，用画线的方式把上一次和这一次连起来，
这样快速划过也能画出连续的线，不再是一串断点。
如果手指刚刚按下（还没有"上一次"），就只画一个点。
线宽你自己定 ___（参考 2）。请用中文注释，保留旧版本，烧录前核对端口。

六、按钮，是自己做出来的

做画板时你做了"点一下颜色方块就换色"。停下来想一想：

屏幕上有"按钮"这个东西吗？

没有。屏幕上只有像素点。按钮是我们自己判断出来的：

如果 手指的 x 在 130 到 170 之间
并且 手指的 y 在 75 到 115 之间：
    那么 画笔换成绿色

就这几行判断，一个按钮诞生了。

所以手机上每一个按钮、每一个图标，背后都是这样的判断：坐标落在这块区域里吗？

这也解释了为什么有的按钮"点不准"——多半是区域划得不对，不是屏幕坏了。

做按钮还要考虑误触：区域之间留点空隙；按下之后"锁定"一下，别让手指轻微移动就乱跳（和第 2 课的消抖思路一样）。

把鼠标移到色块上，看右边怎么把"判断过程"一行行读出来：

再拖一下最下面的"空隙"滑杆 —— 把它拖到 0，看三个按钮贴在一起时，是不是很容易点错。

七、触摸能听懂哪些"动作"

上一节你做出了一个按钮：坐标落在这块区域里，就算点中了。

那是"点一下"。可手指在屏幕上还能做很多别的事——按两下、按住不放、拖着走、往左划……板子能听懂哪些？

先记住一句话，它是这一节的总纲：

触摸芯片只会报告两件事：手指现在在哪、手指现在按着没有。 别的所有"动作"，都是程序算出来的。

这跟上一节的按钮是同一个道理：屏幕上没有按钮，也没有"双击"这个东西——都是你写的判断。

把"动作"翻译成数字

既然芯片只给位置和时间，那每个动作都得翻译成可判断的数字。下面是我们课上用的规则（不是唯一答案，你可以改）：

看出规律了吗？每个动作都是"时间"和"位移"两个量的组合。

• 时间短 + 位移小 = 单击
• 时间长 + 位移小 = 长按
• 时间任意 + 位移大 = 拖拽（或滑动）

第 2 课学按键时，你已经见过这套思路了：单击、双击、长按，靠的是"等待窗口"。 现在手指换成按钮，道理一模一样。

六个数字，三个注意

上面那张表里有 6 个数字（300、20、350、800、20、60）。它们没有标准答案，但每一个都有取舍：

最关键的一条：如果不设时间上限，"长按"和"单击"就分不开了——你按 3 秒抬起，程序会先报"长按"，松开时又报一次"单击"，一件事被报告了两遍。

所以做事件判断时，永远要问自己：这次抬手，是"单击的抬手"还是"长按的抬手"？ 得用一个变量记着。

亲眼看一遍

下面这个演示把"点击/滑动"的判断过程摊开给你看。按住拖动，它会实时显示位移、时间和判定结果：

试着做这几件事：

1. 原地快速点一下 —— 看它判成"单击"；
2. 按住 1 秒以上再松手 —— 看它判成"长按"（而且不会再报单击）；
3. 按着往左拖很远 —— 看它判成"左滑"；
4. 按着慢慢画个小圈 —— 位移够大，判成"拖拽"。

第 2 条最重要：松手时程序得知道"我刚才报过长按了，就不要再报单击"。

右边那几根滑杆就是上面表格里的数字，故意调极端试试：

• 把"单击时间上限"拖到最小 —— 正常点一下都不算单击了（人手没这么快）；
• 把"滑动距离"拖小 —— 手指轻轻一蹭就成了"左滑"；
• 把"单击位移上限"拖到最小 —— 手指轻微抖动都会被当成拖动。

自己动手：让板子认出这些动作

请给触摸程序加一套"动作识别"：
1. 单击（按下时间 < ___ 毫秒且位移 < ___ 像素）
2. 双击（两次单击间隔 < ___ 毫秒）
3. 长按（按住超过 ___ 毫秒，只报一次，松手时不要再报单击）
4. 拖拽（按住时位移超过 ___ 像素，实时报告手指位置）
5. 四方向滑动（抬手时判断：往左/往右/往上/往下）

每个动作发生时，在屏幕上用中文显示动作名称，并通过串口打印日志。
为了避免误判，请说明你是怎么保证"一次动作只报一次"的。
亮度不超过 80，请用中文注释，保留旧版本，烧录前核对端口。

一个真会踩的坑：点击被误判成滑动

这是我们在真实调试里踩到过的：

早期版本只用一个条件判断——位移超过 12 像素就算滑动。 结果：上下滑动能翻页，但怎么点按钮都没反应。

为什么？因为电容屏单次轻点，采样抖动也能超过 12 像素。每一次点击都被当成了滑动。

修法：加一个正交的维度——时间。

是点击：按住 <= 600 毫秒 并且 最大位移 <= 40 像素
否则  ：算滑动

真实拖拽必然有持续时间，所以"时间 + 位移"两个条件一起用，就分得开了。

这条经验很值钱：当你发现"用单一阈值区分两类事件总在某些场景失灵"， 就该问自己——我是不是只用了单一维度？ 再补一个正交的判据。

八、用什么去碰它

前面几节都在讲"手指做什么动作"。但有个问题一直没问过：

必须用手指吗？用笔行不行？戴着手套行不行？

要回答这个，得先知道屏幕底下到底在发生什么。

它认的不是"压力"，是"电"

我们的屏幕是电容屏。它上面盖着一层看不见的透明导电膜—— 细得像头发丝的网格，铺满整个屏幕，上面一直通着很微弱的电。

你可以把它想成一张铺开的"电的网"，每一小块都记着自己的电量。

手指是导体（人身上有水分和盐）。手指一碰到哪里， 就像在那张电网上"接了个小电容"，把那一小块的电量吸走一点儿。

控制器不停地挨个测量：哪块的电量变了、变了多少 → 就算出手指在哪。

所以关键就一句话：

它认的是"能不能导电"，不是"按得重不重"。

网上那些"用香蕉玩手机"是怎么回事

你可能见过这类搞笑视频：拿一根香蕉去划手机，居然能操作。

这不是特效。香蕉含水、含电解质，是导体——和手指一样能改变电容。

理解了这个，下面这张表就全都能自己推出来了。

什么能碰、什么不能碰

所以屏幕上那支"触控笔"为什么贵？因为它不能用普通塑料做—— 笔尖得是导电的（导电橡胶或金属），不然写了也没反应。

两个几乎人人都想错的地方

误解一："手指太粗就点不准"

反了。接触面积越大，电容变化越明显，越好检测。

真正会出问题的是相反的情况：

• 接触面太小（指甲尖、很细的笔尖）→ 电容变化太小，可能检测不到或位置飘；
• 手指太粗 → 不是"认不出"，而是一次会压到两个相邻的按钮 → 误触。

第二种情况你其实已经遇到过——第六节说"按钮之间要留空隙"，防的就是这个。 它不是识别问题，是布局问题。

误解二："金属笔不能用"

**能用。**金属是导体，和手指一个道理。

真正不能用的是塑料笔——这俩经常被记混。

一个快速判断法：这东西能导电吗？ 能 → 屏幕认；不能 → 屏幕不理。 （家里找不到触控笔时，一根金属勺子柄其实可以应急。）

亲手试一遍：给身边的东西做一次"触摸体检"

光看上面的表没用——你得自己上手试，而且要留下记录。

测试仪就是你自己写的程序：把第三节那个画点程序（手指按哪儿就画哪儿）烧在板子上， 然后换各种东西去碰屏幕，看它认不认。这比任何演示都真实。

顺序不能反：先猜，再试，最后记录。 猜错了才有收获。

第 1 行是"对照组"，别跳过。 先用手指确认"程序和屏幕都是好的"， 否则后面所有"不行"都可能是别的原因——这是做实验的基本规矩。

几条注意事项：

• 每试完一样，先擦一下屏幕——别让残留的水或果汁骗了你；
• 试"不认"的东西时，多按一会儿、稍微加点力，确认不是你没按到位；
• 第 7、8 行和第 9、10 行，上面的表里没有答案，得靠原理自己推。

填完表，回答三个问题：

1. "能认出"的那些，共同点是什么？"认不出"的那些呢？用一句话说清楚。
2. 哪一行你猜错了？为什么猜错？——猜错的那一行，才是这节课最值钱的。
3. 第 9、10 行是你自己加的。光凭"它导不导电"，能猜准吗？有没有反例？

硬件定死的几件事

有些事不是"程序写得好不好"的问题，是硬件就那样：

关于"两根手指"多说一句：芯片和驱动支持最多 2 个触点，而且已经在板上实测过—— 两个手指同时按，板子能分别认出它们，各自报一个坐标。所以双人对战可以直接做。

那"捏合放大、双指旋转"为什么能做？道理很简单：你手上有了两个坐标。

• 捏合（缩放）：算两个触点之间的距离。距离变大 = 放大，变小 = 缩小。
• 旋转：算两个触点连成的线，角度变了多少。

不过要提醒一句：这两样都得你自己算——芯片只负责"报出两个坐标"， 至于这两个坐标连起来是什么意思，还是和"按钮"一样，是判断出来的。

请做一个"两根手指"的测试：
屏幕上同时显示两个触点，手指按下去就画点在对应位置，
并显示当前检测到几个触点、每个触点的坐标，
再顺便算出两个触点之间的距离，显示在屏幕上。
我要亲眼看看：两根手指分开、合拢时，那个距离数字是不是跟着变。

先看清数据，再做作品。"算得出距离"是捏合放大的地基。

屏幕碎了还能用吗

先说结论：看碎在哪一层。

我们这块屏是"三明治"结构，从上到下三层：

所以有两种很不一样的结果：

• 只是外层玻璃碎：触摸还能用，画面也正常——但玻璃渣会划伤手，不能继续用；
• 伤到触摸层：会出现"某一块区域怎么点都没反应"——这种没法靠改程序补救。

给个实在的建议：这块屏经不起当"耐摔实验品"。 贴上保护膜、别用力戳、别压重物、收进包里时给它垫一下。 修屏幕的钱，够买好几块新的了。

回头看一眼这几节的关系

到这儿，你已经把"触摸"这件事从里到外看了一遍：

一句话把这几节串起来：

屏幕只给你两样东西——一个坐标和一个"按着没"。 剩下的一切，都是你写出来的。

九、还能做出什么（挑一个自己改）

入门：改一改就能成

进阶：要自己设计规则

跨界：接上前面学过的

当你把几课的东西拼在一起，作品才真正变成"你的"。

十、自检小测

十一、最后留给你

手指这一点，把"我能告诉板子什么"从 2 种可能变成了 76,800 种。

再想想：既然手指能说出位置，它还能说出什么别的？

• 用了多大力气？ 我们的板测不出来（有些设备能，叫压力感应）
• 能同时按几根手指？ 我们的触摸芯片最多认两根（已实测）——那能不能做成两个人对战？两根手指分开合拢，能不能做成放大缩小？
• 划过的速度能算出来吗？用第 2 课的 millis() 和第 5 课的坐标，你其实已经具备全部工具了

这些答案，都要你动手去试。

现在选一个最想做的，先自己补完：

我想用触摸做____，用来____。
手指____的时候，程序就____。
判断的规则是：如果手指在____范围内，就____。
有没说清楚的地方请先问我，再另存程序并烧录，保留旧作品。
我会这样检查它做对了：____。

我希望你带来的不只是"我的画板能画了"，而是这段介绍："手指告诉板子的不是'是'或'否'，而是七万六千八百个坐标里的某一个。我发现快速划过会画成断点，因为板子每隔一小会儿才问一次手指；把两个点连成线就解决了。我还发现按钮其实是我们自己用坐标判断出来的。"