APP Invertor入門

intoweb

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

1. APP的基本功能需求

涂鴉板就是可以用手指在手機(jī)上寫寫畫畫，為了能夠?qū)懙檬娣嫷梅奖悖枰邆湟韵伦罨镜墓δ堋?/p>

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

2） 畫點(diǎn)，當(dāng)手指觸碰畫板時(shí)，即可畫點(diǎn)。

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

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

5） 畫筆粗細(xì)調(diào)節(jié)，我們可以用滑動(dòng)條來調(diào)節(jié)畫筆的粗細(xì)。

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

2. 組件設(shè)計(jì)

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

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

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

4） 添加筆畫粗細(xì)滑動(dòng)條，將“組件面板→用戶界面→標(biāo)簽”和“組件面板→用戶界面→滑動(dòng)條”拖動(dòng)到工作面板中。

5） 設(shè)置標(biāo)簽和滑動(dòng)條為水平布局。

6） 點(diǎn)擊組件列表的標(biāo)簽1，修改標(biāo)簽屬性中的文本為“畫筆粗細(xì)”。

7） 調(diào)整滑動(dòng)條屬性，寬度設(shè)為60%，最大值30，最小值1，滑塊位置8。滑塊的數(shù)值與筆畫的粗細(xì)對應(yīng)，即筆畫寬度從1到30，初始默認(rèn)寬度8。

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

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

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

3. 邏輯設(shè)計(jì)

將所有組件擺好位置后，點(diǎn)擊右上角“邏輯設(shè)計(jì)”，開始為它們編程。

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

2） 讓畫布組件在手指劃動(dòng)時(shí)畫線。組合“模塊→畫布1→當(dāng)畫布1被拖動(dòng)執(zhí)行”和“模塊→畫布1→調(diào)用畫布1畫線”。x1，y1取前點(diǎn)X坐標(biāo)和Y坐標(biāo)。x2，y2取當(dāng)前X坐標(biāo)和Y坐標(biāo)。畫布上的坐標(biāo)原點(diǎn)在屏幕左上角。如圖4。

3） 讓畫布組件在手指點(diǎn)擊時(shí)畫圓點(diǎn)。組合“模塊→畫布1→當(dāng)畫布1被觸碰執(zhí)行”，“模塊→畫布1→調(diào)用畫布1畫圓”。半徑“取global線寬”。

畫布對手指的動(dòng)作除了拖動(dòng)和觸碰外還有劃動(dòng)、按壓、松開。劃動(dòng)使用極坐標(biāo)方式要設(shè)定原點(diǎn)和方向常與球形精靈搭配使用。

4） 使用滑動(dòng)條調(diào)整線寬。根據(jù)滑塊位置數(shù)值改變變量“線寬”，并把畫布1的線寬設(shè)為變量“線寬”。組合“模塊→滑動(dòng)條→當(dāng)滑動(dòng)條1位置被改變”，“模塊→變量→設(shè)置global線寬為”，“模塊→滑動(dòng)條→當(dāng)滑動(dòng)條1位置被改變→滑塊位置”。組合“模塊→畫布1→設(shè)置畫布1線寬為”，“模塊→變量→取值”。如圖5。

5） 點(diǎn)擊顏色按鈕改變畫筆顏色，以紅色按鈕為例。組合“模塊→當(dāng)紅被點(diǎn)擊執(zhí)行”，“模塊→畫布1→設(shè)置畫布1畫筆顏色為”，“模塊→顏色→紅”。其他按鈕可以復(fù)制代碼塊后再修改。

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

7） 設(shè)置清屏按鈕，點(diǎn)擊按鈕后可以清除畫布。組合“清屏被點(diǎn)擊執(zhí)行”，“畫布1→調(diào)用畫布1清除畫布”。

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

4. 調(diào)試和下載

下載并運(yùn)行APP Invertor ?AI 伴侶，在APP Invertor 環(huán)境中點(diǎn)擊“連接→USB”就可以在AI 伴侶中實(shí)時(shí)調(diào)試程序。當(dāng)程序完成后點(diǎn)擊“打包APK→打包APK并顯示二維碼”掃碼就可以在手機(jī)上運(yùn)行程序了。