## 第 2 章　畫筆畫布 **教學制作**：一克拉 **App作品下載**： https://share.weiyun.com/c517583c14e54d9aaf1d956fdb2fda32  **App應用的外觀圖**（結果展示）  一、【學習目標】 創建一個PaintPot（油漆桶）應用，讓用戶在手機屏幕上繪制圖畫，并讓用戶用手機給自己拍照，然后在自己的照片上繪圖。 使用App Inventor，任何人都可以快速地創建一個有趣的繪圖應用，這也是創建2D游戲的起點。 油漆桶應用將實現下列目標： ? 用手指點取顏色并繪圖； ? 用手指在手機屏幕上畫線；> ? 用手指觸碰手機屏幕畫圓點； ? 點擊按鈕來擦凈屏幕； ? 點擊按鈕來改變繪制圓點的大小； ? 用相機拍攝照片，并在照片上畫圖。 二、【學習內容】 1 使用Canvas組件來繪制圖畫； 2 處理屏幕上的觸摸及拖拽事件； 3 使用arrangement組件來控制屏幕的外觀； 4 使用帶有參數的事件處理程序； 5 定義變量，來保存某些狀態，如用戶繪制的圓點的大小。 三、【制作組件】7個按鈕，2個布局，1照相，1畫布 1、顏色按鈕三個 紅藍綠 Button（頭標）加 水平布局組件一個 HorizontalArrangement 2、畫布組件Canvas 放圖像 3、四個功能按鈕（底標）加水平布局一個 4、照相機（非可視組件） 四、【制作程序】 1、全局變量：畫筆大小 。設初值2 。 一塊程序。 2、觸碰畫布時畫圓點，用到變量，設置x、y、r 。 一塊程序。 3、拖拽時畫線 前點、當前點 。一塊程序。 4、功能按鈕四個，紅、藍、綠、清除。 6、照相機二塊程序：調出拍，之后設置用圖。 7、改畫筆大小二個按鈕，二塊程序。 五、【制作步驟】 1、注意： 項目名稱：同時也是應用發布時所使用的名稱。提示：想修改項目名稱，可以點擊Project->Save project as，可以將原有項目賦予新的名稱，同時原有項目依然得以保留； 組件名稱：一般的組件名稱都可以修改，但Screen1例外，在當前版本中不能修改它的名稱； 屏幕標題：出現在設備的標題欄中，是Screen組件的Title屬性，默認值是Screen1，可以隨意修改它，將其改為“油漆桶”。 2、創建三個顏色按鈕（創建組件）  注意： 在項目中，建議為組建起一個有意義的名稱，而不是像第一章那樣采用默認名稱。有意義的名稱增加了程序的可讀性，尤其是在切換到塊編輯器時，將有助于區分不同的組件。 采用慣用的駱駝命名法（如RedButton），即多單詞無空格的首字母大寫命名方式。 3、改善布局 方法：拖拽法 如圖：拖拽按鈕時，會看到一條藍色豎線，提示按鈕將會被放置在什么地方。 三個按鈕縮進排列在HorizontalArrangement項下，以顯示它們現在是次一級的組件。  HorizontalArrangement周圍的輪廓線，在測試設備上則不可見。 通常采用布局組件來創建簡單的垂直、水平或表格布局，也可以通過逐級插入（或嵌套）布局組件來創建更加復雜的布局。 4、添加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，以便當用戶剛啟動應用但尚未點擊顏色按鈕時，畫筆為紅色。  5、設置底部4個按鈕及照相機組件 （1）. 從組件面板中拖出第二個HorizontalArrangement，放在canvas下方，再拖兩個Button并置于屏幕底部的HorizontalArrangement中；將第一個按鈕改名為TakePictureButton，Text屬性設為“拍照”；第二個按鈕改名為WipeButton，Text屬性設為“清除”； （2）. 再拖兩個Button組件到HorizontalArrangement中，放在“清除”按鈕后面； （3）. 兩個Button分別命名為BigButton、SmallButton，Text屬性分別設為“大圓”、“小圓”； （4）. 從組件的Media類中拖出一個Camera組件放在預覽窗口中，它將落在非可視組件區。 到此為止，應用外觀已經設置完成。 6為組件添加行為（加塊程序） 讓組件關聯起來完成動作任務。 處理用戶的觸摸及拖拽事件，也可以實現繪畫及拍照功能。 Canvas組件具有Touched及Dragged事件， 針對DrawingCanvas.Touched（觸碰）事件編程，調用DrawingCanvas.DrawCircle（畫圓）程序； 針對DrawingCanvas.Dragged（拖拽）事件編程來調用DrawingCanvas.DrawLine（畫線）程序。 針對按鈕編程，設置DrawingCanvas.PaintColor（畫筆顏色）屬性 針對按鈕 清除DrawingCanvas， 將DrawingCanvas的背景圖片修改為照相機拍攝的圖片。 （1）設置觸碰行為 當用戶觸碰DrawingCanvas時，在接觸點繪制一個圓點。  第一：拖出DrawingCanvas.Touched程序塊 打開DrawingCanvas抽屜拖出DrawingCanvas.Touched塊，該塊有三個參數x、y及touchedSprite，如圖2-6所示。這些參數提供了接觸點的位置信息； 【提示】在第一章HelloPurr應用中已經熟悉了Button.Click事件，但對Canvas事件還很陌生。Button.Click事件的發生很簡單，不附帶任何其他信息；但有些事件則不然，它們附帶了與事件有關的“參數”信息。 DrawingCanvas.Touched事件中的x、y代表接觸點在DrawingCanvas中的坐標，而touchedSprite代表接觸點所碰到的DrawingCanvas中的對象（在App Inventor中稱作sprite—精靈），但在第三章之前我們不會用到它。我們將利用接觸點的xy坐標來繪制圓點。 第二：拖出DrawingCanvas.DrawCircle程序塊 從DrawingCanvas抽屜中拖出DrawingCanvas.DrawCircle命令塊，放在DrawingCanvas.Touched事件處理程序中 【*設xy*】在DrawingCanvas.DrawCircle塊的右側有三個插槽，需要填入三個參數：x、y、r。 其中x、y用于指定繪制圓形的位置，r用于指定圓的半徑。在屏幕左下角帶感嘆號的黃色警告顯示數字“1”，表示需要填滿這些插槽。 從圖中看到，有兩組xy，這里要區分清楚：DrawingCanvas.Touched事件中的xy表示接觸點位置（已知）； 而DrawingCanvas.DrawCircle命令塊的xy插槽，用于設定繪制圓形的位置（待定）。我們恰好要在用戶的接觸點繪制圓形，因此DrawingCanvas.Touched事件中的xy值，可以作為DrawingCanvas.DrawCircle的x、y參數，插入到插槽中。  圖 2-8　讀取事件參數：從DrawingCanvas.Touched事件中拖出“get x”塊  【設半徑r】長度的單位是pixel（像素），是屏幕上能夠繪制的最小的點。 設r = 5：點擊屏幕的空白區域，輸入5然后回車（自動創建數字塊“5”）并將其插入插槽r中。再看屏幕左下角的黃色三角形，數字由1變為0，因為所有插槽都被填滿了  提示：在塊編輯器中輸入5然后回車，這種操作叫做輸入塊（typeblocking）。 塊編輯器會根據你輸入的字符，顯示與該字符相匹配的一系列塊；如果輸入的是數字，那么將創建一個數字塊。 意思是：當用戶觸碰DrawingCanvas時，將在(x,y)點繪制一個半徑為5的圓形。 觸碰 DrawingCanvas（畫布），手指碰過的地方會留下一個圓點。如果在設計器中將DrawingCanvas.PaintColor屬性設置為紅色，那么圓點也是紅色（否則應該是默認的黑色）。 （2）設置拖拽行為 知識點： 觸碰（Toughed）事件與拖拽（Dragged）事件的區別： ? 觸碰事件：手指在DrawingCanvas（畫布）上放下再抬起，其間手指沒有移動。 ? 拖拽事件：手指在DrawingCanvas（畫布）上放下，手指與屏幕保持接觸并移動。 在繪圖程序中，手指在屏幕上拖動，沿著手指移動的路徑，將繪制出一條曲線，因為這條曲線由數微小的線段構成：手指每次微小的移動，都將繪制一個微小的線段。 第一：DrawingCanvas.Dragged程序塊。起點終點參數 ? StartX、StartY：手指開始拖動時所在的位置（整個曲線的起點）； ? currentX、currentY：手指的當前位置（微小線段的終點）； ? prevX、prevY：手指的上一個位置（微小線段的起點）； ? draggedSprite：布爾值，如果用戶直接拖動一個圖片，則其值為真。  Dragged事件攜帶了更多參數 第二：DrawingCanvas.DrawLine程序塊。添加畫線功能  有四個參數，兩點確定一線：設（X1，Y1）為起點，（X2，Y2）為終點。 當手指在DrawingCanvas上拖動時，拖動事件將被調用很多次： 在應用中，手指的每次移動都會繪制出一個微小線段，每次從微小鄰點（Prevx, prevy）到（currentX, currentY）。 第三：拖出“get”塊來充當畫線的參數。變量座標 將get prevX與get prevY分別插入到x1和y1插槽；而get currentX與get currentY插入到x2和y2插槽。  第四：設置三個顏色按鈕及清除按鈕 程序塊 在塊編輯器中： （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所示。  思路：按鈕點擊-執行do-set設置另一組件畫布上的畫筆- 思路：按鈕點擊-讓call-畫布清理。 兩個組件關聯上了。 單擊顏色按鈕改變DrawingCanvas的畫筆顏色；單擊清除按鈕清空屏幕。 第五：讓用戶拍照片更換app畫布。TakePictureButton按鈕設置程序塊 App Inventor應用可以與Android設備的強大功能進行交互，包括相機功能，用戶可以將繪圖背景設置為自己用相機拍攝的照片。 （1）. Camera組件有兩個關鍵的塊： Camera.TakePicture塊用來啟動設備上的拍照程序；拍照完成將觸發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的參數代表剛剛拍攝的照片，將從Camera1.AfterPicture塊中得到的get image塊插入DrawingCanvas.BackgroundImage塊。 所有的塊如圖2-15所示 。  拍完的照片被設置為DrawingCanvas的背景圖片 第六：改變畫筆大小程序塊BigButton和SmallButton 問題1：在DrawingCanvas上畫圓點，其大小由DrawingCanvas.DrawCircle塊中參數r決定。改變r值可以改變圓點的大小。試試看將5改為10，然后在測試設備上查看結果。 問題2：無論開發者如何設置參數r，用戶都只能用這個固定的尺寸。如何讓用戶來改變圓點的大小呢？就需要定義一個變量。變量是一個存儲單元，可以把它想象成一個容器，里面存儲著可變的數據，如畫筆的大小。 ?定義變量dotSize： （1）. 在塊編輯器中，從Variables（變量）抽屜中拖出一個initialize global name to塊。將“name”改為“dotSize”； （2）. 請注意，initialize global dotSize to塊有一個開放的插槽，可以在這里設定變量的初始值，或者說是應用啟動時的默認值（編程術語稱為“初始化變量”）。在本應用中，用數字塊2來初始化變量dotSize，（創建塊“2”的方法有兩種：在空白區直接輸入“2”然后回車；或從Math抽屜中拖出“0”塊，將0改為2。）將其插到initialize global dotSize to塊的插槽中，如圖2-17所示。  圖 2-17　將dotSize變量的初始值設為2 ?使用變量 我們要修改DrawingCanvas.Touched事件處理程序，將其中DrawingCanvas.DrawCircle塊的參數r的固定值用變量dotSize來代替。（我們先將dotSize的初始值設定為“固定”的2，但稍后我們將改變dotSize的值，并同時改變畫筆的大小。） （1）. 從initialize global dotSize to塊中拖出一個get global dotSize塊，用它來提供變量的值； （2）. 轉到DrawingCanvas.Touched事件處理程序，將數字塊“5”拖出插槽并扔進垃圾桶，用get global dotSize塊來替換（見圖2-18）。當用戶觸摸到DrawingCanvas時，應用將根據dotSize的大小來確定圓點的半徑。  圖 2-18　畫筆的大小取決于變量dotSize中保存的值 ?修改變量值 現在變量魔法登場，變量dotSize允許用戶選擇畫筆的大小，而事件處理程序也將以dotSize為半徑來畫圓。通過設計SmallButton.Click和BigButton.Click的事件處理程序來實現此功能： （1）. 從SmallButton抽屜中拖出SmallButton.Click事件處理程序；再從Variables抽屜中拖出一個“set”塊，下拉選擇global dotSize，并將其插入SmallButton.Click塊；最后，創建一個數字塊“2”，并將其插入set global dotSize塊。 （2）. 創建另一個類似的BigButton.Click事件處理程序，設置畫筆大小為8。這兩個事件處理程序顯示在塊編輯器中，如圖2-19所示。  圖 2-19　點擊SmallButton及BigButton按鈕改變畫筆大小，之后將以該尺寸繪制圖形 　【提示】： get/set global dotSize 之中的“global”（全局）指的是該變量適用于程序中所有的事件處理程序（全局）。與global相對的是“local”（局部）變量，適用于程序的特定部分；App Inventor 2中添加了此項功能，第12章首次使用。 　【測試】嘗試單擊“大圓”、“小圓”按鈕，然后在DrawingCanvas上觸碰，所繪圓點的大小是否不同？畫線呢？圓有變化而線沒有變化，因為只有DrawingCanvas.DrawCircle塊的半徑r使用了變量dotSize。在此基礎上，考慮修改塊的設置，以使畫筆的大小line線條對畫線也同樣有效。注意：DrawingCanvas有一個“LineWidth（線寬）”的屬性。要加線寬屬性。 ### 總結：油漆桶的完整應用。 1、程序塊  2、駱駝命名法 這是一個編程術語，指的是變量的命名規則：由于變量名中不允許出現空格，因此當需要用多個英文單詞為變量命名時，通過每個單詞的首字母大寫來區分不同的單詞，如本例中的紅色按鈕命名為RedButton，其中第一個單詞的首字母也可以小寫，即redButton。 3、改進 可以考慮做以下改進： 1. 用戶界面中沒有顯示當前的狀態信息（如畫筆大小或顏色），只能通過畫圖來得知這些信息。修改應用，向用戶顯示當前的狀態信息； 2. 讓用戶在TextBox組件內輸入畫筆的尺寸，這樣一來，除了2和8之外，他還可以將其更改為其他數值。有關TextBox組件的詳細信息，請參閱第4章。 4、本章涵蓋了如下內容： （1） DrawingCanvas組件：用于在其中繪畫，也可以感知觸摸及拖動事件，可以利用這些事件來實現繪圖功能； （2）使用布局組件（HorizontalAarrangement），使多個組件的布局條理化，而不是摞在一起； （3）有些事件處理程序附帶了與事件有關的信息，例如Toughed事件中附帶了觸摸點的坐標，這些信息用參數來表示。在使用帶參數的事件處理程序時，App Inventor以塊的方式生成“get”及“set”項，來獲取這些參數的引用； （4）創建變量可以使用Variables抽屜中的initialize global name to塊，變量可以讓應用記住那些沒有被存儲成組件屬性的信息，如畫筆的大小； （5）對于定義的每一個變量，App Inventor提供了變量的讀寫方法：get global variable用來獲取變量的值（讀），而set global variable用來設置/修改變量的值（寫）。可以從變量初始化塊的變量名中拖出“get”或“set”塊。 THE END