App Inventor 2 手势检测拓展:让你的App「听懂」手指的语言
在移动互联网时代,手势操作已经成为用户体验的核心——双指缩放地图、滑动切换页面、长按弹出菜单……这些看似自然的交互背后,都离不开手势检测技术。
今天,我们为大家带来 GestureDetector 手势检测拓展,一套覆盖旋转、缩放、滑动、自定义手势、多点触控的完整手势方案,让你的 App Inventor 2 应用立刻拥有专业级的手势交互能力。
五大组件,覆盖全场景
GestureDetector 拓展包含五个独立组件,各司其职:
- •RotationDetector(旋转检测):检测双指旋转手势,返回旋转角度,正值顺时针,负值逆时针
- •ScaleDetector(缩放检测):检测双指缩放/捏合手势,返回缩放比例因子
- •SwipeDetector(滑动检测):检测上下左右滑动、单击、双击和长按
- •CustomGestureDetector(自定义手势识别):录制手势后可识别相同手势
- •MultiTouch(多点触控):追踪所有触摸点的位置和数量
无论是图片查看器、地图缩放、还是游戏控制,这套拓展都能轻松应对。
快速上手:三步完成手势绑定
旋转与缩放(绑定 Canvas 画布)
- 1.在设计器中拖入 Canvas 画布组件
- 2.拖入 RotationDetector 或 ScaleDetector 组件
- 3.在 Screen.Initialize 事件中调用
AddHandlerToCanvas(Canvas1)完成绑定
就这么简单!绑定后,双指旋转会触发 Rotate 事件,双指缩放会触发 Scale 事件。
滑动与点击(绑定任意可视组件)
SwipeDetector 是最灵活的组件——不限于 Canvas,可以绑定到任何可视组件:
- 1.拖入 SwipeDetector 组件
- 2.在 Screen.Initialize 中调用
AddHandler(组件)绑定到目标组件 - 3.处理对应的滑动、点击事件
支持的交互类型包括:向左/右/上/下滑动、单击、双击、长按。
自定义手势识别
这是最有趣的功能,你可以「教」App 识别特定的手势:
- 1.绑定 Canvas 后,调用
StartRecording("圆形")开始录制 - 2.在 Canvas 上画出你想要识别的手势(比如一个圆)
- 3.手指抬起后自动保存
- 4.调用
EnableDetection()开启识别模式 - 5.再次画出类似图形,就会触发
GestureDetected事件
你还可以通过 LoadGestureFile / SaveGestureFile 导入导出手势库,实现手势的复用和分享。
核心参数详解
旋转灵敏度控制
RotationDetector 提供 Threshold 属性(默认 0.5 度),用于过滤手指微小的抖动。值越小越灵敏,适合需要精细控制的场景。
缩放焦点追踪
ScaleDetector 的 FocusX / FocusY 属性记录双指缩放的中心点坐标,可以实现以触摸点为中心的锚点缩放效果,就像专业图片查看器一样。
滑动阈值双保险
SwipeDetector 同时设置了距离阈值(SwipeThreshold,默认 100 像素)和速度阈值(SwipeVelocityThreshold,默认 100 像素/秒)。两个条件必须同时满足才触发滑动事件,有效避免误触发。
自定义手势识别精度
CustomGestureDetector 的 MinimumScore 属性控制识别严格程度(默认 2.0,建议范围 1.0~5.0)。分数越高要求越严格,可根据实际需求调整。
多检测器共存
一个常见问题:多个手势检测器能同时工作吗?
答案是:可以! RotationDetector 和 ScaleDetector 可以同时绑定到同一个 Canvas,互不干扰。比如你可以同时实现双指旋转和缩放,打造完整的图片浏览体验。SwipeDetector 绑定到独立组件,也不受影响。
多点触控实战
MultiTouch 组件提供完整的多点触控追踪能力:
- •
TouchStart/TouchEnd:第一个手指按下和最后一个手指抬起 - •
PointerDown/PointerUp:每个手指的按下和抬起,带索引和坐标 - •
TouchMove:触摸点移动时触发 - •
GetPointerX(index)/GetPointerY(index):获取任意触摸点的实时坐标
通过这些接口,你可以实现钢琴多键同按、多人同时游戏等高级交互。
注意事项
- •RotationDetector、ScaleDetector、CustomGestureDetector 和 MultiTouch 仅支持 Canvas 画布组件
- •SwipeDetector 支持任意可视组件,但在按钮等自带点击事件的组件上可能产生冲突
- •设置
Enabled = false时不会触发任何事件,但检测器保持绑定状态 - •CustomGestureDetector 的录制和识别模式互斥,录制时不会触发识别事件
开始使用
GestureDetector 拓展已发布至 App Inventor 2 中文网,包含完整文档和 .aix 拓展文件下载。
文档地址:https://www.fun123.cn/reference/extensions/GestureDetector.html
让手势交互不再复杂,让每个开发者都能轻松实现专业级的手势操作。
App Inventor 2 中文网 — 让每个人都能「搭建」出自己的 App
夜雨聆风