第 2 章　油漆桶

本章介紹Canvas組件，用它來生成簡單的二維（2D）圖形，目標是創(chuàng)建一個PaintPot（油漆桶）應用，讓用戶在手機屏幕上繪制圖畫，并讓用戶用手機給自己拍照，然后在自己的照片上繪圖。回顧歷史，早在20世紀70年代，PaintPot是最早運行在個人電腦上的應用之一，目的是為了證明個人電腦的潛力。那時候，開發(fā)這樣一款簡單的繪圖應用是一項極其復雜的工作，而且繪圖效果也略顯粗糙。但現(xiàn)在，使用App Inventor，任何人都可以快速地創(chuàng)建一個有趣的繪圖應用，這也是創(chuàng)建2D游戲的起點。

如圖2-1，油漆桶應用將實現(xiàn)下列目標：

• 用手指點取顏色并繪圖；

• 用手指在手機屏幕上畫線；

• 用手指觸碰手機屏幕畫圓點；

• 點擊按鈕來擦凈屏幕；

• 點擊按鈕來改變繪制圓點的大?。?/p>

• 用相機拍攝照片，并在照片上畫圖。

圖 2-1　油漆桶應用

學習內容

本章涵蓋了以下內容：

• 使用Canvas組件來繪制圖畫；

• 處理屏幕上的觸摸及拖拽事件；

• 使用arrangement組件來控制屏幕的外觀；

• 使用帶有參數(shù)的事件處理程序；

• 定義變量，來保存某些狀態(tài)，如用戶繪制的圓點的大小。

準備開始

首先檢查測試用的Android設備是否已經為使用App Inventor做好了準備：

• Android設備中已經安裝了“AI伴侶”；

• 手機的WiFi連接已經打開；

再訪問App Inventor網(wǎng)站。新建項目“PaintPot”，點擊“Connect->AICompanion”，并按照提示操作，連接測試設備。

在正式開始之前，在組件設計器右側的“屬性”面板中，將“Screen1”的“Title”屬性修改為“油漆桶”。在測試設備上可以立即看到這一改變：應用的標題欄將顯示“油漆桶”。

這樣做是否會混淆了項目名稱與屏幕標題呢(在英文版書中，將Title改為“PaintPot”，與項目同名，因此才有此疑問，對中文讀者來說不存在這個疑問?！g者注)？別擔心！在App Inventor中有三個非常重要名稱：

• 項目名稱：同時也是應用發(fā)布時所使用的名稱。提示：想修改項目名稱，可以點擊Project->Save project as，可以將原有項目賦予新的名稱，同時原有項目依然得以保留；

• 組件名稱：一般的組件名稱都可以修改，但Screen1例外，在當前版本中不能修改它的名稱；

• 屏幕標題：出現(xiàn)在設備的標題欄中，是Screen組件的Title屬性，默認值是Screen1，如第一章HelloPurr中所見，可以隨意修改它，如我們剛才將其改為“油漆桶”。

設計組件

創(chuàng)建“油漆桶”應用需要以下組件：

• 三個Button組件：用來選擇畫筆顏色：紅、藍或綠，放在HorizontalArrangement組件中；

• 一個Button組件用來充當橡皮；

• 另外兩個Button組件用來改變畫筆的大小；

• 一個Canvas組件，充當畫布。Canvas具有BackgroundImage屬性，我們將其設置為第一章HelloPurr中的kitty.png，稍后還可以將背景圖片設置為用戶拍攝的照片。

創(chuàng)建顏色按鈕

首先按照以下提示創(chuàng)建三個顏色按鈕：

1. 拖一個Button組件到預覽窗口，設置其Text屬性為“紅”，BackgroundColor屬性設為紅色；

2. 在組件列表中選中Button1（可能已經被選中），點擊Rename按鈕將組件名稱改為RedButton。注意組件名稱中不允許有空格，因此通常將組件名稱中每個單詞的首字母大寫。

3. 同樣，創(chuàng)建另外兩個按鈕，分別命名為BlueButton和GreenButton，將它們垂直地放在RedButton下方。對照圖2-2，檢查一下你的操作結果。

圖 2-2　創(chuàng)建了3個按鈕的預覽窗口

注意：在項目中，建議為組建起一個有意義的名稱，而不是像第一章那樣采用默認名稱。有意義的名稱增加了程序的可讀性，尤其是在切換到塊編輯器時，將有助于區(qū)分不同的組件。本書中，采用慣用的駱駝命名法（如RedButton），即多單詞無空格的首字母大寫命名方式。

　測試：如果你還沒有點擊“Connect”來連接測試設備，那么做好連接，然后檢查一下應用在設備（如果已經連接）上的表現(xiàn)。

使用Arrangement組件改善布局

現(xiàn)在三個按鈕排成一列縱隊，我們希望它們能排成一行，如圖2-3所示，使用HorizontalArrangement組件來實現(xiàn)組件的水平排列：

1. 在組件面板的Layout類中拖出HorizontalArrangement組件，放在按鈕下方；

2. 在屬性面板中，設置HorizontalArrangement的width屬性為“Fill Parent”（充滿父容器），以便在水平方向上占滿整個屏幕；

3. 將三個按鈕移動到HorizontalArrangement中。注意，當你拖拽按鈕時，會看到一條藍色豎線，提示按鈕將會被放置在什么地方。

圖 2-3　在水平布局組件內的三個按鈕

此時查看組件列表，你會發(fā)現(xiàn)三個按鈕縮進排列在HorizontalArrangement項下，以顯示它們現(xiàn)在是次一級的組件。同時注意到所有組件都縮進排在Screen1項下。

　測試：在測試設備的屏幕上，你會看到三個按鈕排列成一行，盡管看起來與預覽窗口中略有不同。如，在預覽窗口中可見的HorizontalArrangement周圍的輪廓線，在測試設備上則不可見。

通常采用布局組件來創(chuàng)建簡單的垂直、水平或表格布局，也可以通過逐級插入（或嵌套）布局組件來創(chuàng)建更加復雜的布局。

添加Canvas（畫布）

Canvas像一塊畫布，用戶可以在上面繪畫（畫圓、畫等）。添加一個Canvas，并用第一章中的kitty.png作它的背景圖片（設置BackgroundImage屬性），具體步驟如下：

1. 打開組件面板中的Drawing and Amination（繪畫與動畫）類，將Canvas組件拖到預覽窗口中，改名為DrawingCanvas，Width設為“Fill parent”，Height設為300pixels；

2. 如果你已經完成了第一章的課程，那么文件kitty.png已經下載；如果沒有，請在這里下載kitty.png。

3. 將DrawingCanvas的BackgroundImage設置為kitty.png：在設計器的屬性面板中，BackgroundImage的默認值為None，點擊None及Upload File來添加kitty.png文件；

4. 將DrawingCanvas的PaintColor屬性設置為red，以便當用戶剛啟動應用但尚未點擊顏色按鈕時，畫筆為紅色。對照圖2-4檢查一下你的操作。

圖 2-7　用戶觸摸畫布時，應用繪制一個圓點

在DrawingCanvas.DrawCircle塊的右側有三個插槽，需要填入三個參數(shù)：x、y、r。其中x、y用于指定繪制圓形的位置，r用于指定圓的半徑。在屏幕左下角帶感嘆號的黃色警告顯示數(shù)字“1”，表示需要填滿這些插槽。從圖中看到，有兩組xy，這里要區(qū)分清楚：DrawingCanvas.Touched事件中的xy表示接觸點位置（已知）；而DrawingCanvas.DrawCircle命令塊的xy插槽，用于設定繪制圓形的位置（待定）。我們恰好要在用戶的接觸點繪制圓形，因此DrawingCanvas.Touched事件中的xy值，可以作為DrawingCanvas.DrawCircle的x、y參數(shù)，插入到插槽中。

　提示：可以從“when”塊中提取事件的參數(shù)值，將鼠標懸停在參數(shù)上，將呼出“get”及“set”塊?？梢詫ⅰ癵et x”塊拖出并插到x插槽中，作為DrawCircle命令的x值。如圖2-8所示。

圖 2-12　添加畫線功能

DrawingCanvas.DrawLine塊有四個參數(shù)，兩點確定一線：設（X1，Y1）為起點，（X2，Y2）為終點。你能確定每個參數(shù)中需要插入什么值嗎？記住，當手指在DrawingCanvas上拖動時，拖動事件將被調用很多次：在應用中，手指的每次移動都會繪制出一個微小線段，從（Prevx, prevy）到（currentX, currentY）?，F(xiàn)在把它們填入DrawingCanvas.DrawLine塊。

3. 拖出“get”塊來充當畫線的參數(shù)。將get prevX與get prevY分別插入到x1和y1插槽；而get currentX與get currentY插入到x2和y2插槽，如圖2-13所示。

圖 2-13　用戶在屏幕上拖動手指，應用就在前一位置與當前位置之間畫一條微小線段

　測試：在設備上測試一下剛剛設定的行為：在屏幕上隨意拖動手指，畫出線段及曲線；觸碰屏幕畫出一個圓點。

添加按鈕事件處理程序

應用已經實現(xiàn)了畫線功能，但現(xiàn)在只能畫紅線。下面添加顏色按鈕的事件處理程序，用戶可以改變畫筆的顏色；同樣設置清除按鈕WipeButton，以便用戶可以清除畫面并重新開始。

在塊編輯器中：

1. 展開左側塊的（Blocks）列表；

2. 打開RedButton抽屜，拖出RedButton.Click塊；

3. 打開DrawingCanvas抽屜。拖出set DrawingCanvas.PaintColor塊（可能需要滾動塊的列表以便在抽屜里找到它），并把它放在RedButton.Click塊“do”的位置；

4. 打開Colors抽屜，拖出紅色塊，將其插入set DrawingCanvas.PaintColor塊的插槽；

5. 重復步驟2-4，設置藍色和綠色按鈕；

6. 最后設置WipeButton按鈕。從WipeButton抽屜中拖出WipeButton.Click塊。再從DrawingCanvas抽屜里拖出DrawingCanvas.Clear塊，并將其放在WipeButton.Click塊中。確認所有塊顯示如圖2-14所示。

圖 2-14　單擊顏色按鈕改變DrawingCanvas的畫筆顏色；單擊清除按鈕清空屏幕

讓用戶拍照片

App Inventor應用可以與Android設備的強大功能進行交互，包括相機功能。為了增加應用的趣味性，用戶可以將繪圖背景設置為他們用相機拍攝的照片。

1. Camera組件有兩個關鍵的塊：Camera.TakePicture塊用來啟動設備上的拍照程序；拍照完成將觸發(fā)Camera.AfterPicture事件。在Camera.AfterPicture事件處理程序中，可以將剛剛拍攝的照片設置為DrawingCanvas.BackgroundImage。打開TakePictureButton抽屜并拖出TakePictureButton.Click事件處理程序；

2. 從Camera1抽屜拖出Camera1.TakePicture放在TakePictureButton.Click事件處理程序中；

3. 從Camera1的抽屜中拖出Camera1.AfterPicture事件處理程序；

4. 從DrawingCanvas抽屜拖出set DrawingCanvas.BackgroundImage塊放在Camera1.AfterPicture事件處理程序中；

5. Camera1.AfterPicture事件有一個名為image的參數(shù)，代表剛剛拍攝的照片，將從Camera1.AfterPicture塊中得到的get image塊插入DrawingCanvas.BackgroundImage塊。

所有的塊如圖2-15所示 。

圖 2-15　拍完的照片被設置為DrawingCanvas的背景圖片

　測試：在設備上點擊“拍照”按鈕并拍攝照片，貓的圖片變成了你拍的照片。你可以在自己的照片上進行繪畫。（用Wolber教授的照片繪畫是學生們的一大樂事，如圖2-16。）（Wolber教授是本書的作者之一。）

改變畫筆大小

圖 2-16　帶有Wolber教授涂鴉照片的PaintPot應用

在DrawingCanvas上畫圓點，其大小由DrawingCanvas.DrawCircle塊中參數(shù)r決定。改變r值可以改變圓點的大小。試試看將5改為10，然后在測試設備上查看結果。

另一個問題是，無論開發(fā)者如何設置參數(shù)r，用戶都只能用這個固定的尺寸。如何讓用戶來改變圓點的大小呢？為此我們來修改程序：當用戶點擊“大圓”按鈕時，圓點半徑設為8，當點擊“小圓”時半徑設為2。

我們要用不同的半徑畫圓，但應用怎么知道我們要用哪個值呢？必須通知應用我們選定的值，而應用必須以某種方式記?。ɑ虮４妫┻@個值，這樣才能在需要的時候使用它。之前我們所使用的值，要么設定為屬性（如畫筆顏色），要么用固定的數(shù)字塊（如畫筆大小），現(xiàn)在應用需要記住一些屬性之外的、不是固定不變的東西，這就需要定義一個變量。變量是一個存儲單元，可以把它想象成一個容器，里面存儲著可變的數(shù)據(jù)，如畫筆的大小（有關變量的詳細信息，請參見App Inventor指南第16章）。

讓我們先來定義一個變量dotSize：

1. 在塊編輯器中，從Variables（變量）抽屜中拖出一個initialize global name to塊。將“name”改為“dotSize”；

2. 請注意，initialize global dotSize to塊有一個開放的插槽，可以在這里設定變量的初始值，或者說是應用啟動時的默認值（編程術語稱為“初始化變量”）。在本應用中，用數(shù)字塊2來初始化變量dotSize，（創(chuàng)建塊“2”的方法有兩種：在空白區(qū)直接輸入“2”然后回車；或從Math抽屜中拖出“0”塊，將0改為2。）將其插到initialize global dotSize to塊的插槽中，如圖2-17所示。

圖 2-17　將dotSize變量的初始值設為2

使用變量

下一步，我們要修改DrawingCanvas.Touched事件處理程序，將其中DrawingCanvas.DrawCircle塊的參數(shù)r的固定值用變量dotSize來代替。（我們先將dotSize的初始值設定為“固定”的2，但稍后我們將改變dotSize的值，并同時改變畫筆的大小。）

1. 從initialize global dotSize to塊中拖出一個get global dotSize塊，用它來提供變量的值；

2. 轉到DrawingCanvas.Touched事件處理程序，將數(shù)字塊“5”拖出插槽并扔進垃圾桶，用get global dotSize塊來替換（見圖2-18）。當用戶觸摸到DrawingCanvas時，應用將根據(jù)dotSize的大小來確定圓點的半徑。

圖 2-18　畫筆的大小取決于變量dotSize中保存的值

修改變量值

現(xiàn)在變量魔法登場，變量dotSize允許用戶選擇畫筆的大小，而事件處理程序也將以dotSize為半徑來畫圓。通過設計SmallButton.Click和BigButton.Click的事件處理程序來實現(xiàn)此功能：

1. 從SmallButton抽屜中拖出SmallButton.Click事件處理程序；再從Variables抽屜中拖出一個“set”塊，下拉選擇global dotSize，并將其插入SmallButton.Click塊；最后，創(chuàng)建一個數(shù)字塊“2”，并將其插入set global dotSize塊。

2. 創(chuàng)建另一個類似的BigButton.Click事件處理程序，設置畫筆大小為8。這兩個事件處理程序顯示在塊編輯器中，如圖2-19所示。

圖 2-19　點擊SmallButton及BigButton按鈕改變畫筆大小，之后將以該尺寸繪制圖形

　提示： get/set global dotSize 之中的“global”（全局）指的是該變量適用于程序中所有的事件處理程序（全局）。與global相對的是“l(fā)ocal”（局部）變量，適用于程序的特定部分；App Inventor 2中添加了此項功能，第12章首次使用。

App inventor網(wǎng)站，可以嘗試譯者提供的替代版本，或點擊頁面右上角的“開發(fā)體驗”按鈕。