App Inventor學習記錄40,小畫家 app,上一步和下一步的功能按鈕

這一次再來介紹一下,我覺得也是很有必要加到小畫家的一個功能,那就是上一步下一步的功能。畢竟不是人人都可以落筆如神不犯錯的。有這個功能會很方便。

記錄一下:
App Inventor學習記錄40,小畫家 app,上一步和下一步的功能按鈕


首先先來講一下在 app inventor中做上一步下一步按鈕的原理。
這裡是利用畫布存檔的功能來做。
畫布被按下的時候,我們儲存當下的畫面,來當回覆上一步的畫面
因為我們剛碰到畫布的時候,還沒有啟動畫線等等的功能,所以這個時候保存的畫面,就是開始畫圖之前的畫面。

畫布被放開的時候,我們儲存當下的畫面,來當回復下一步的畫面
這代表這個畫畫的筆觸已經結束,就是我們這一次畫好圖的狀態。


畫面編排的部份如下:

1個畫布加 3個按鈕元件。


全部的程式碼如下:


第 1段的程式碼說明:

我們先建 2個變數,一個叫上一步的圖片,一個叫這一步的圖片。
從名字就知道這兩個變數是要拿來做什麼的。


第 2段的程式碼說明:

當畫布 1被拖曳後:
把畫布的線寬設定為 20。
呼叫畫布畫線的功能。


第 3段的程式碼說明:

這裡就是重點了,我儘量講的清楚一點。
當畫布被壓下後:
把上一步的圖片這個變數的值,設定成呼叫畫布存檔的功能。
把下一步的圖片這個變數的值,設定成呼叫畫布存檔的功能。

說起來就是把上一張圖片這個變數的值,設定成呼叫畫布存檔功能之後的圖片


第 4段程式碼說明:

當上一步的按鈕被按下之後:
為了不要留下太多的問題,所以我們先呼叫畫布清除的功能。
把畫布的背景,設定成上一步的圖片。


第 5段的程式碼說明:

當重作一次的按鈕被按下之後:
同樣的理由,呼叫畫布清除的功能。
把畫布的背景,設定成這一步的圖片。


第 6段的程式碼說明:

當清除畫面的按鈕被按下之後:
呼叫畫布清除的功能。
把畫布的背景,設定成空白。


目前這個作法就只能回復上一步的步驟,或是下一步的步驟。但在實際使用上,可能需要多記錄幾個步驟。這個部份應該就是建立一個清單,當超出指定的長度之後,就刪除最舊的記錄來取代。

這個部份晚點再來介紹。

這次的 aia檔的下載連結如下:
點我下載 NO_40_DO_UNDO

參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發佈留言