記錄一下。
App Inventor學習記錄198-剪裁圖片時，常用的九宮格拖曳框
這次範例的完成品如下。
很常在剪裁圖片的時候，會看到這個框。
這次是用畫布加上球型精靈的元件做的。
畫面編排的部份如下。
全部的程式碼如下。
新增一個球的初始位置程式。
在這個程式中，我們利用 call ball.move to的方塊，把這 4個球型精靈移動到我們指定的位置去。
我們可以看到在程式方塊中，在設定球型精靈 x,y值的時候，沒有減去球型精靈的半徑。這個是因為有在屬性中，勾選 origin at center座標在圓心這一個屬性，這個部份請參考之前文章如下：
App Inventor學習記錄175-用球形精靈做的反應訓練小遊戲，點擊唯一不同的顏色
新增畫線程式第 1部份。
程式的一開始，先 call canvas.clear清除畫布的資料，這個是因為我們要把舊的線給清除，讓每次拉動球型精靈的時候，就會畫新的線出來。
set canvas.paint color to，把畫布的畫筆顏色設定成黑色。
call canvas.draw line，呼叫畫布畫線的程式，x1,y1放的是這條線的起點位置，所以這裡我們就代入 ball1.x跟 ball 1.y球型精靈的 x,y值。x2,y2放的則是這個線的終點位置，所以我們代入 ball2.x跟 ball 2.y球型精靈的 x,y值。
我們有 4個球型精靈，所以要拉邊框的 4條線，所以這個程式我們要做 4次，分別代入不同的球形精靈的 x,y座標。
set canvas.paint color to，把畫布的畫筆顏色設定成白色。
邊框用黑色，裡頭的線條用白色來做。
set canvas.line width，把線寬設定成 0.5
新增畫線程式第 2部份。
這個部份，我們就是利用數學運算的方式，把內部的 4條線也畫出來
新增變數，初始值為 0。
這個變數是用來解決球形精靈在拖曳時，會卡住的問題。
when screen1.initialize，當螢幕初始化的時候。
呼叫我們剛才介紹過的球的初始位置，以及畫線這兩個程式。
when ball 1.touch down，當球型精靈 1被按下的時候，把變數的值設成 1。
這裡有 4個球型精靈，所以我們分別設定 4個球型精靈被按下時的變數的值為 1、2、3、4。
when ball1.dragged，當球型精靈 1被拖曳的時候。
如果變數的值為 1的話，就用 call ball. move to方塊，移動 ball 1的位值到 current x和 current y的位置。同時也把直角位置的兩個球的位置做相對的移動。
最後再呼叫畫線功能。
同樣的，這裡有 4個球型精靈，所以這裡我們就分別做 4次。
好的，全部的程式方塊都簡單說明過了，建議大家試著做一次，就會用的越來越熟。
但如果不想要重新拉程式方塊，或要需要範例 aia檔的話，請前往第 2頁哦!