記錄一下。
App Inventor學習記錄169-用球形精靈試做手機圖型鎖功能
這次範例的完成檔如下。
手指滑過球形精靈，就會把線給起來，然後存到下面的清單中。
最後，我們再用這個清單來做判斷。
畫面編排的部份如下。
9個球型精靈，加一個顯示清單用的標籤，還有一個 reset按鈕。這就是這次使用到的元件。
全部的程式方塊如下。
第 1部份的程式方塊記錄。
清單_球形精靈群組，依順序放入 9個球形精靈的元件。
等一下用任意元件來設定全部元件狀態的時候，就會很方便。
清單_圖型清單，預設值是空清單，這是用來儲存已經連線過的球形精靈用的。
第 2部份的程式方塊記錄。
建立球移動到初始位置的程式。
我們知道在畫布編排的畫布中，不管是拉入圖片精靈或是球形精靈，它們的位置，都一定不會是在我們想要它出現的位置。所以我們要先把它移動到我們的預設的位置上。
這個程式一開始，先把清單_圖形清單給設定成空清單。
然後用 for each item in list方塊，把清單_球形精靈群組裡的球形精靈元件做設定，把清單中所有的元件的 radius半徑設定成 30，把 paint color球的顏色，設定成綠色。
再接著用 call ball 1.move to的程式，把每一個球移動到我們想要的位置上。
移動球形精靈位置的方法跟移動圖片精靈是一樣的，請參考：
App Inventor學習記錄35-2，調整畫布精靈的位置，讓游標正確顯示
這裡補充一下，如果我們在球形精靈的屬性下，勾選 OriginAtCenter，那麼在抓球形精靈的座標的時候，會改抓球形精靈的中心點。這個部份有機會用到的話，再來說明。這次還是一樣用舊方法來做設定。
第 3部份的程式方塊記錄。
建立畫格線的程式，我是覺得加上格線之後，畫面比較沒有那麼的空洞……
這裡畫了 6條灰線，同樣都是用 call canvas 1.draw line的方塊來做。在 call canvas 1.draw line的方塊中，x1,y1代表起始點的位置，x2,y2代表終點的位置。另外就是要注意一下 app inventor中的座標系統。
第 4部份的程式方塊記錄。
建立球連線的程式。
這個程式的重點只有一個，就是要畫一條線的時候，我們一定要有 2個點的座標，所以在程式的一開始，加上一個判斷式，先判斷清單_圖型清單的長度有沒有大於等於 2。有達成這個條件的話，我們再來畫線。
畫線的時候，一樣是用 call canvas1.draw line的方塊來做。這裡用任意元件去拉出前 1個球形精靈元件的 x,y座標來當 x1,y1的座標，再用當下元件的 x,y座標當 x2,y2的座標。
第 5部份的程式方塊記錄。
建立加入清單程式。加入參數_數字。
加入判斷式，如果參數_數字的值不在清單_圖型清單中的話，就把它加到清單_圖型清單中。這樣就不會有重覆拉線條的情形發生。
把球形精靈的顏色變成淺藍色，然後呼叫球連線程式。
這裡有個順序的問題，所以把球連線的程式放在加入清單的程式裡頭。
第 6部份的程式方塊記錄。
程式初始化的時候，把畫布的寬度和高度，都設定成螢幕的高度。
這樣就會把畫布的大小變成一個正方型。
接著呼叫球移動到初始位置以及畫格線這兩個程式。
第 7部份的程式方塊記錄。
button 1是 reset按鈕，按下按下之後，回復到初始條件就可以。
在這裡就是把畫布清空，再呼叫球移動到初始位置以及畫格線這兩個程式。
第 8部份的程式方塊記錄。
當球形精靈被拖動的時候，呼叫加到清單程式，參數_數字就代入該球形精靈是位在清單_球形精靈群組中第幾項的數字。
這次沒有做最後判斷的部份，我想了一下，除了可以當圖形鎖之外，程式改一下之後，應該也可以拿來當記憶遊戲來玩。這個部份等之後再來做。
這次的 aia檔的下載連結如下:
NO_169_Ball_patterm.aia
app inventor交流討論群組連結如下(掃描 QR code或是點擊連結皆可)
https://line.me/ti/g2/Loxwrcc2iNRS5-Qd4SFXxQ?utm_source=invitation&utm_medium=link_copy&utm_campaign=default
參考書籍請見博客來書籍介紹頁面：
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC＋創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單：App Inventor 2初學特訓班
手機應用程式設計超簡單：App Inventor 2小專題特訓班
手機應用程式設計超簡單：App Inventor 2資料庫專題特訓班
之前介紹過的一些 appinventor的使用記錄，都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面