APP Invertor入門

intoweb

APP Invertor是谷歌公司開發的一款使用Blockly語言的Android手機編程環境，無需高深的編程知識，就可以編寫出APK程序運行在安卓手機上！上期我們已經制作了一個手機搖一搖聽單詞的APP。這次我們來做一個創意涂鴉板，APP效果如圖1。

1. APP的基本功能需求

涂鴉板就是可以用手指在手機上寫寫畫畫，為了能夠寫得舒服畫得方便，需要具備以下最基本的功能。

1） 手指劃動時畫線，APP Invertor的繪圖功能組件是“畫布”，位于“組件→繪圖動畫→畫布”。畫布組件是一個可以感知觸摸的矩形框，可以繪畫或者讓“球形精靈”和“圖像精靈”在其中移動。

2） 畫點，當手指觸碰畫板時，即可畫點。

3） 更換畫筆顏色，畫布默認的畫筆顏色是黑色，為了有更豐富的色彩，我們需要有一些更換畫筆顏色的按鈕，如果有那耐心還可以做一個調色盤。

4） 橡皮擦，如果畫錯了還需要有清屏和橡皮擦功能，其實橡皮擦就是白色的畫筆。

5） 畫筆粗細調節，我們可以用滑動條來調節畫筆的粗細。

6）存儲，作品可以保存在手機中，如果要完美實現這項功能需要用到交互、輸入文件名、選擇目錄等組件，過程比較復雜，限于篇幅此項功能我們在此實例中僅實現能固定保存為“dcim/camera/1.jpg”。更完善的保存功能你可以自行研究，建議新增一個屏幕完成保存文件的交互部分。

2. 組件設計

1） 瀏覽器中打開app.gzjkw.net，用QQ登錄，新建項目“Doodle”。

2） 設置組件居中排列，“組件列表→Screen1→組件屬性→水平對齊→居中”。

3） 添加畫布組件，將“組件面板→繪圖動畫→畫布”拖動到工作面板中。設置“畫布1→組件屬性→高度70%→寬度充滿→線寬8”。要注意給組件設置合適的高度和寬度。

4） 添加筆畫粗細滑動條，將“組件面板→用戶界面→標簽”和“組件面板→用戶界面→滑動條”拖動到工作面板中。

5） 設置標簽和滑動條為水平布局。

6） 點擊組件列表的標簽1，修改標簽屬性中的文本為“畫筆粗細”。

7） 調整滑動條屬性，寬度設為60%，最大值30，最小值1，滑塊位置8?；瑝K的數值與筆畫的粗細對應，即筆畫寬度從1到30，初始默認寬度8。

8） 將“界面布局→表格布局”拖入工作面板，設置表格為5列2行。

9） 添加功能按鈕，根據需要添加顏色按鈕，本例添加了黑、紅、黃、藍4個按鈕。添加橡皮、清屏和保存按鈕。將7個“用戶界面→按鈕”拖入工作面板的表格區域。

10） 設置按鈕。在組件列表對顏色按鈕依次重命名。在“組件屬性→文本”刪除文本。改變按鈕的背景顏色。修改橡皮、清屏、保存按鈕的名字和文本。完成組件設計的工作面板如圖2。

3. 邏輯設計

將所有組件擺好位置后，點擊右上角“邏輯設計”，開始為它們編程。

1） 首先設置變量“線寬”，用于設置筆畫寬度。拖動“模塊→變量→初始化全局變量變量名為”，“模塊→數字”到工作面板。組合并設置“線寬”為8。這樣畫筆的默認粗細就是8。如圖3。

2） 讓畫布組件在手指劃動時畫線。組合“模塊→畫布1→當畫布1被拖動執行”和“模塊→畫布1→調用畫布1畫線”。x1，y1取前點X坐標和Y坐標。x2，y2取當前X坐標和Y坐標。畫布上的坐標原點在屏幕左上角。如圖4。

3） 讓畫布組件在手指點擊時畫圓點。組合“模塊→畫布1→當畫布1被觸碰執行”，“模塊→畫布1→調用畫布1畫圓”。半徑“取global線寬”。

畫布對手指的動作除了拖動和觸碰外還有劃動、按壓、松開。劃動使用極坐標方式要設定原點和方向常與球形精靈搭配使用。

4） 使用滑動條調整線寬。根據滑塊位置數值改變變量“線寬”，并把畫布1的線寬設為變量“線寬”。組合“模塊→滑動條→當滑動條1位置被改變”，“模塊→變量→設置global線寬為”，“模塊→滑動條→當滑動條1位置被改變→滑塊位置”。組合“模塊→畫布1→設置畫布1線寬為”，“模塊→變量→取值”。如圖5。

5） 點擊顏色按鈕改變畫筆顏色，以紅色按鈕為例。組合“模塊→當紅被點擊執行”，“模塊→畫布1→設置畫布1畫筆顏色為”，“模塊→顏色→紅”。其他按鈕可以復制代碼塊后再修改。

6） 設置橡皮擦按鈕，橡皮擦其實是將畫筆顏色改為白色，與其他顏色按鈕相同。如圖6。

7） 設置清屏按鈕，點擊按鈕后可以清除畫布。組合“清屏被點擊執行”，“畫布1→調用畫布1清除畫布”。

8） 設置點擊保存按鈕保存作品，由于正常的保存文件要設置目錄和文件名，這樣的交互需要不少篇幅才能講清，在此例中我們就不展開詳述了。組合“保存→當保存被點擊執行”，“畫布→設置畫布1背景圖片為”，“畫布→調用畫布1另存為”，“文本→DCIM＼Camera＼1.jpg”。這樣點擊保存就可以把作品1.jpg保存到Camera目錄中。

4. 調試和下載

下載并運行APP Invertor ?AI 伴侶，在APP Invertor 環境中點擊“連接→USB”就可以在AI 伴侶中實時調試程序。當程序完成后點擊“打包APK→打包APK并顯示二維碼”掃碼就可以在手機上運行程序了。