第 2 讲 油漆桶.pdf

第 2 章　油漆桶 本章介绍Canvas组件，⽤它来⽣成简单的⼆维 （2D ）图形，⽬标是创建⼀个 PaintPot （油漆桶） ⽤，让⽤户在⼿机屏幕上绘制图画，并让⽤户⽤⼿机给⾃⼰拍 照，然后在⾃⼰的照⽚上绘图。回顾历史，早在20世纪70年代，PaintPot是最早运⾏ 在个⼈电脑上的 ⽤之⼀，⽬的是为了证明个⼈电脑的潜⼒。那时候，开发这样⼀款 简单的绘图 ⽤是⼀项极其复杂的⼯作，⽽且绘图效果也略显粗糙。但现在，使⽤ App Inventor ，任何⼈都可以快速地创建⼀个有趣的绘图 ⽤，这也是创建2D游戏的 起点。 如图2-1，油漆桶 ⽤将实现下列⽬标： ⽤⼿指点取颜⾊并绘图； ⽤⼿指在⼿机屏幕上画线； ⽤⼿指触碰⼿机屏幕画圆点； 点击按钮来擦净屏幕； 点击按钮来改变绘制圆点的⼤⼩； ⽤相机拍摄照⽚，并在照⽚上画图。 图 2-1　油漆桶应⽤ 学习内容 本章涵盖了以下内容： 使⽤Canvas组件来绘制图画； 处理屏幕上的触摸及拖拽事件； 使⽤arrangement组件来控制屏幕的外观； 使⽤带有参数的事件处理程序； 定义变量，来保存某些状态，如⽤户绘制的圆点的⼤⼩。 准备开始 ⾸先检查测试⽤的Android设备是否已经为使⽤App Inventor做好了准备： Android设备中已经安装了“AI伴侣” ； ⼿机的WiFi连接已经打开； 再访问App Inventor ⽹站。新建项⽬“PaintPot” ，点击“Connect-AICompanion” ，并按 照提⽰操作，连接测试设备。 在正式开始之前，在组件设计器右侧的“属性”⾯板中，将“Screen 1”的“ itle”属性修改 为“油漆桶” 。在测试设备上可以⽴即看到这⼀改变： ⽤的标题栏将显⽰“油漆桶” 。 这样做是否会混淆了项⽬名称与屏幕标题呢(在英⽂版书中，将 itle改为“PaintPot” ， 与项⽬同名，因此才有此疑问，对中⽂读者来说不存在这个疑问。——译者注) ？别担 ⼼ ！在App Inventor 中有三个⾮常重要名称： 项⽬名称：同时也是 ⽤发布时所使⽤的名称。提⽰：想修改项⽬名称，可以 点击Project-Save project as ，可以将原有项⽬赋予新的名称，同时原有项⽬依 然得以保留； 组件名称：⼀般的组件名称都可以修改，但Screen 1例外，在当前版本中不能修 改它的名称； 屏幕标题：出现在设备的标题栏中，是Screen组件的 itle属性，默认值是 Screen 1，如第⼀章HelloPurr 中所见，可以随意修改它，如我们刚才将其改 为“油漆桶” 。 设计组件 创建“油漆桶” ⽤需要以下组件： 三个Button组件：⽤来选择画笔颜⾊：红、蓝或绿，放在HorizontalArrangement 组件中； ⼀个Button组件⽤来充当橡⽪； 另外两个Button组件⽤来改变画笔的⼤⼩； ⼀个Canvas组件，充当画布。Canvas具有BackgroundImage属性，我们将其设置 为第⼀章HelloPurr 中的kitty .png ，稍后还可以将背景图⽚设置为⽤户拍摄的照 ⽚。 创建颜⾊按钮 ⾸先按照以下提⽰创建三个颜⾊按钮： 1. 拖⼀个Button组件到预览窗⼜，设置其 ext属性为“红” ，BackgroundColor属性设为 红⾊； 2. 在组件列表中选中Button 1 （可能已经被选中），点击Rename按钮将组件名称改为 RedButton 。注意组件名称中不允许有空格，因此通常将组件名称中每个单词的⾸字母 ⼤写。 3. 同样，创建另外两个按钮，分别命名为BlueButton和GreenButton ，将它们垂直地放 在RedButton下⽅。对照图2-2 ，检查⼀下你的操作结果。 图 2-2　创建了3个按钮的预 窗⼜ 注意：在项⽬中，建议为组建起⼀个有意义的名称，⽽不是像第⼀章那样采⽤默认名 称。有意义的名称增加了程序的可读性，尤其是在切换到块编辑器时，将有助于区分 不同的组件。本书中，采⽤惯⽤的骆驼命名法 （如RedB