[App Inventor] 點擊畫布兩次,畫圓形

本範例點擊畫布兩次時就會以這兩次的點擊座標畫出一個圓(底色為黃色)並標示圓心(底色為藍色)。執行畫面如下:
Screenshot_2016-03-15-10-03-57-37

Designer頁面
 
只有 Canvas 畫布元件與按鈕元件,相當簡易。您可以自由調整畫面的安排方式。
 
Blocks 頁面
 
1. 宣告變數
x_old, y_old 是用來記錄第一次的點擊座標;firstPressed 則是判斷現在是否為第一次點擊;最後centerX 與 centerY 則是用來計算每次的圓心座標
Button1 按下時,清除畫布上所有的東西。
2. 點擊畫布
 
在 Canvas的 TouchDown (您也可以用 Touched) 事件中,先檢查firstPressed變數值來判斷現在是否為第一次點擊,如果為第一次點擊,則紀錄本次點擊座標,並把firstPressed變數值設為 false。
第二次點擊時,也就是firstPressed變數值為 false,則先計算出圓心座標:
centerX = (X2 + X1) / 2
centerY = (Y2 + Y1) / 2
 
接著畫兩個圓,第一個圓就是我們要畫的圓,第二個則代表圓心。半徑計算方式為直徑/2,而直徑計算如下:
 
直徑 = square ( (X2 – X1)^2 + (Y2 – Y1)^2)
 
最後把 firstPressed變數值設為 false,這樣程式就可以連續執行囉!
 


發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *