跳到教程内容
教程首页
App Inventor 2 教程 数字涂鸦
准备开始
动手创造 · PROJECT LAB

数字涂鸦

准备探索你的新作品
0%
项目难度每一步,都离作品更近

先了解你将做出什么

应用介绍

把手机屏幕变成一个可以随手涂鸦的画板:手指拖动就画线,摇动手机可以擦除全部内容。

数字涂鸦

连接你的应用

通过 WiFi 连接设备

使用 AI 伴侣连接后,可以在手机或平板上实时查看和测试应用。

AI 伴侣连接示意图

视频演示:

App Inventor 2 连接 AI 伴侣

安装 AI 伴侣

使用手机系统扫码器或浏览器扫描二维码,下载并安装 AI 伴侣。只需安装一次,以后可以直接使用。

AI 伴侣下载二维码

打开应用的连接二维码

在 App Inventor 2 中依次点击「连接」和「AI 伴侣」。

打开 AI 伴侣连接

连接手机

连接二维码会显示在电脑屏幕上。

应用连接二维码

在手机 AI 伴侣中点击蓝色的「scan QR code」按钮扫描二维码;也可以输入代码,再点击橙色的「connect with code」按钮。

AI 伴侣连接界面

使用模拟器连接

模拟器由 aiStarter 自动启动,不需要手机,但速度较慢、环境配置较复杂且 Android 版本较旧,一般不推荐作为首选方式。

App Inventor 2 连接模拟器

使用 USB 连接

aiStarter 可以通过 USB 调试连接手机,并自动启动手机上的 AI 伴侣。它的使用效果和扫描二维码连接基本相同。

App Inventor 2 使用 USB 连接

查看完整连接教程

下面的视频完整演示 AI 伴侣、模拟器和 USB 三种连接方式。不同方式的详细比较可以查看连接方式说明

App Inventor 2 完整连接教程

仍然无法连接?

可以前往中文社区查找解决方案或发帖提问。

数字涂鸦教程

1. 认识 App Inventor 环境

设计器用来添加画布和传感器,积木编辑器用来编写绘图和清空逻辑。连接 AI2 Companion 后可以边拖块边测试。

2. 认识设计器组件

Canvas 是画布,AccelerometerSensor 是非可视组件。先保持组件名称 Canvas1AccelerometerSensor1,后续事件块会使用它们。

3. 关闭屏幕滚动

如果 Screen1 的 Scrollable 开启,页面滚动可能让画布尺寸和触摸位置不容易控制。先在设计器中取消 Screen1 的 Scrollable。

4. 设置 Canvas 尺寸

从“绘图与动画”抽屉拖入 Canvas,把高度和宽度都设置为“充满父容器”。画布应尽量覆盖手机屏幕。

5. 编写画布拖动事件

Canvas1 抽屉拖出 当 Canvas1.被拖动时,再放入 调用 Canvas1.画线。把 x1, y1 接到 prevX, prevY,把 x2, y2 接到 currentX, currentY

when Canvas1.Dragged(startX, startY, prevX, prevY, currentX, currentY, draggedSprite) {
  Canvas1.DrawLine(prevX, prevY, currentX, currentY)
}

使用上一点连接当前点,手指移动时才会形成连续曲线;startX/startY 只代表第一次触摸的位置。

6. 摇一摇清空画布

当 AccelerometerSensor1.被晃动时 中调用 Canvas1.清除画布

when AccelerometerSensor1.Shaking() {
  Canvas1.Clear()
}

这个事件要在真机上测试,普通模拟器不能真实模拟摇动。

7. 测试和扩展应用

先画一个字母,再轻轻摇动手机,确认画布清空。你还可以加入颜色按钮、线宽滑块、橡皮擦,或用 DrawCircle 让用户画点。