App Inventor學習記錄126-用 Canvas畫布,畫量測儀器的指針

這是一個在 Gallery中找到的一個範例,做的很棒,我來學習一下它的法。
記錄一下:
App Inventor學習記錄126-用 Canvas畫布,畫量測儀器的指針


這次的完成範例如下。

總共會分成 6個步驟來畫出儀器指針表。


全部的程式碼如下。

這次沒有放上畫面編排的原因,是因為只有一個 CANVAS畫布的元件。
它的寬度和高度都設定成 300px。


第 1部份的程式碼說明。

建立一個 tickmarks變數,它的值是清單。清單的值依序放的是 x1、y1、x2、y2的位置。


第 2部份的程式碼說明。

按鈕按下之後,call do All呼叫 do All這個程式執行。


第 3部份的程式碼說明。

doAll這個小程式是由 6個小程式組成的。


第4部份的程式碼說明。

這裡用的是 call canvas1.drawcircle畫布畫圓的程式。
fill這裡的值,放 true的話,是實心圓,放 false的話,則是空心圓。


第 5部份的程式說明。

這部份跟上一個部份是相同的。就是在灰色圈外面,再加一個黑色圈。


第 6部份的程式碼說明。

呼叫畫布畫線的程式,畫 5條刻度線出來。
由於這裡的畫面是固定大小,所以直接放上個別的值就可以了。


第 7部份的程式碼說明。

這一個則是呼叫畫布畫形狀的功能。
這裡要注意的是 pointlist這裡要放的是清單,清單中的每一個則是 x,y的位置。
fill 則是要不要填充顏色。


第 8部份的程式碼說明。

同樣呼叫畫布畫圖的功能,在指針上再畫一個綠色的實心圓。


第 9部份的程式碼說明。

最後一個部份則是利用畫寫文字的功能,把文字定義到指定的位置上。


完成品就像這樣子。


補充一下,由於這次的範例是我在 Gallery上找到的,不是我自己寫的,所以,我就不提供 aia的下載點,大家可以自行的搜尋一下。

我本來是要放連結的頁面,可是剛才怎麼找都找不到……

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

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

發表迴響