项目挑战

本教程使用面部关键点检测制作一个 AI 滤镜相机。你可以选择可爱的猫咪贴纸或威猛的狮子贴纸；贴纸会随着脸部移动、转动和缩放。

设置电脑和手机

• 起始工程：面部贴纸.aia
• 起始工程 Blocks：面部贴纸.asc
• 硬件测试工程：面部贴纸测试.aia

FaceExtension 不能在模拟器中运行。请先用 AI2 Companion 打开测试工程，确认手机硬件和扩展可以工作。

面部贴纸教程

1. 了解面部滤镜

Facemesh 是一个公开的面部关键点模型。它接收摄像头中的脸，返回鼻子、额头、嘴巴等部位的坐标；我们把图像精灵的中心放到这些坐标上，就能形成滤镜。

2. 认识 Facemesh 模型

App Inventor 中的 FaceExtension1 是应用和模型之间的桥梁。它需要 WebViewer1 提供摄像头画面，Canvas1 负责显示实时背景和贴纸。模型加载和识别必须用真机测试。

3. 检查用户界面

起始工程已经准备好 TakePhotoButton、SharePhotoButton、TextToSpeech1、FaceExtension1、WebViewer1、Canvas1 和三个图像精灵：leftEar、rightEar、whiskers。

不要重命名组件。WebViewer1、Canvas1 和 FaceExtension 的尺寸必须一致；WebViewer 可以隐藏，因为 Canvas 会显示最终画面。

4. 查看面部关键点

FaceExtension 能提供额头、下巴、脸颊、眼睛、眉毛、鼻子和嘴巴等关键点。教程主要使用 LeftForehead、RightForehead 和 MouthTop。

5. 了解关键点格式

每个关键点是一个包含两个元素的列表：[x, y]。例如，额头点可以写成 [forehead x-coordinate, forehead y-coordinate]。如果整张脸没有被追踪到，FaceExtension 会返回空列表，滤镜就不会移动。

6. 选择猫咪或狮子

在媒体资源中查看两套贴纸素材。根据自己的选择，为 whiskers 的图片属性设置 CAT_whiskers.png 或 LION_whiskers.png。

7. 设置左右耳素材

为 leftEar 和 rightEar 设置同一动物的图片：猫咪使用 CAT_leftEar.png、CAT_rightEar.png，狮子使用 LION_leftEar.png、LION_rightEar.png。

8. 检查完整贴纸

三个图像精灵都设置图片后，回到 Canvas 查看效果。此时它们可能还没有贴在正确的脸部位置，下一步会设置图像原点。

9. 设置图像原点

选中 leftEar、rightEar 和 whiskers，把它们的 OriginX 和 OriginY 都设为 0.5。默认原点是左上角；设为 0.5 后，MoveTo 会把图像中心贴到关键点，移动时更自然。

10. 查看起始程序

起始积木已经处理拍照、分享和朗读提示。photoCount 为照片编号，mostRecentPhoto 保存最近一张照片的文件名。照片按 characterCamera1.jpg、characterCamera2.jpg 等唯一命名，避免覆盖旧文件。

11. 创建 placeImage 辅助过程

创建 placeImage(img, facePoint) 过程，把图像精灵的中心移动到 FaceExtension 返回的面部点。img 是要移动的图像精灵，facePoint 是 [x, y] 坐标列表。

12. 理解 ImageSprite.移动到指定位置

ImageSprite.移动到指定位置(x, y) 会把图像精灵的中心移动到指定坐标。Canvas 左上角是 (0, 0)，y 坐标向下增加，所以要直接使用面部点的 x、y 值。

13. 填充 placeImage 参数

在 placeImage 过程中：

1. 从 img 参数取得 ImageSprite 对象。
2. 从 facePoint 参数取得坐标列表。
3. 用列表第 1 项作为 MoveTo 的 x，用第 2 项作为 y。

14. 处理 FaceUpdated

FaceExtension 会持续追踪脸部；检测到新位置后触发 FaceExtension1.FaceUpdated。起始事件已经准备好，你需要逐步补齐它调用的 moving 过程。resizing 过程已经提供。

15. 编写 moving 过程

在 moving 中调用三次 placeImage：把 leftEar 放到 FaceExtension.LeftForehead，把 rightEar 放到 FaceExtension.RightForehead，把 whiskers 放到 FaceExtension.MouthTop。

16. 调整贴纸大小

resizing 根据脸部大小调整贴纸的宽度和高度。胡须的宽度可以取脸宽，高度可以取眼睛到嘴巴的距离；耳朵通常使用脸颊到鼻子的距离，并保持正方形。

17. 在手机上测试滤镜

用 AI2 Companion 测试，确认脸部明亮、正对摄像头时，耳朵和胡须会贴在正确位置。模拟器不能运行 FaceExtension；如果关键点为空，先调整光线、距离和脸部位置。

18. 拍照并分享

摆好姿势后点击“拍照”，再点击“分享最近照片”。应用会使用 mostRecentPhoto 找到刚刚保存的文件，并交给手机上的分享应用。

扩展你的应用

19. 打开 FaceExtension.ShowMesh

在设计器中选中 FaceExtension1，勾选 ShowMesh，即可看到 Facemesh 识别出的全部面部点。用它可以检查模型是否正确追踪到脸。

20. 使用 FaceExtension.AllPoints

FaceExtension 提供约 486 个点。可以查看 Facemesh 点位图，找到嘴唇或其他部位的编号，再从 FaceExtension.AllPoints 取得该点，并把它作为 placeImage 的 facePoint 参数。

21. 切换 FaceExtension.UseCamera

UseCamera 默认是 Front，适合自拍。改成 Back 可以拍摄朋友；如果在积木编辑器中修改，必须传入文字 Front 或 Back。FaceExtension 自己访问摄像头，不需要额外添加 Camera 组件。

22. 设计自己的角色

你可以准备透明背景的耳朵、帽子或眼镜图片，制作自己的图像精灵，再把它们放到对应面部点。图片的宽高和原点要配合 resizing 和 placeImage 调整。

23. 添加滤镜切换按钮

添加两个按钮，在点击事件中改变图像精灵的图片属性，就能在猫咪和狮子之间切换。切换后仍要保持同样的 OriginX、OriginY 和定位逻辑。

24. 创建照片画廊

可以添加第二个屏幕，用 TinyDB 保存照片文件名，再用列表和图片组件显示已经拍过的照片。这样应用就不只是一张照片，而是一个小型作品集。

25. 增加面部互动

同时放置“张嘴”和“闭嘴”两个图像精灵，比较上下嘴唇 y 坐标的差值，再根据差值切换它们的 Visible 属性，就能制作会随表情变化的表情滤镜。