指針式時鐘


本範例使用 Clock 元件取得系統時間之後,繪製時針、分針與秒針在 Canvas 元件上,還會顯示 12, 3 ,6, 9 等指標,並每秒鐘隨機改變 Canvas 的背景顏色。

本題的關鍵是將系統時間推算為時針、分針與秒針與X軸的夾角,需要用到 atan2 反正切函數,由 y/x 的值回推角度,是個練習三角函數的好範例喔!


Designer 頁面

只有用到 Clock 與 Canvas 兩個元件,Clock 的 TimerInterval 請維持 1000,因為秒針就是一秒鐘動一次,所以更新頻率設為1秒就好。


Blocks 程式介紹

本範例所有的指令都寫在 Clock.Timer 事件中時針、分針與秒針都使用 Canvas.Drawline 指令,差別只在於長度以及觸發頻率不同而已。

1. 更新時間,並隨機改變 Canvas 的背景顏色。

透過 Clock,Hour, Minute 與 Second 指令來取得系統的小時、分鐘與秒,並分別儲存於h、m、s等變數中。

接著使用隨機 (50~200) 指令來隨機改變 Canvas 的背景顏色。

最後如果變數值小於10的話,就在前面補0來對齊。


2. 顯示系統時間與繪製時鐘鐘面 

將系統時間顯示在 Screen.Title 標題列。接著先清除畫面(不然上一秒的指針都還會在喔!),接著畫一個白色空心圓當作時鐘表面




3. 繪製秒針

秒針起點公式為:

x1 = 160 + sin(秒數 x 6) x 120 
y1 = 160 - cos(秒數 x 6) x 120

秒數之所以要乘以 6,因為一分鐘60秒要走完 360 度的話,1秒鐘自然是轉6度囉120 代表秒針長度,可調整
x2 y2 為 160,160 代表 Canvas的中心點


4. 繪製分針

分針起點公式為:

x1 = 160 + sin(分數 x 6) x 110 
y1 = 160 - cos(分數 x 6) x 110
x2 y2 為 160,160 代表 Canvas的中心點,最後的110則是分針長度。


5. 繪製時針

時針起點公式為:

x1 = 160 + sin( (小時 + 8) / 12的餘數 x 30 + (分數 / 2的商) ) x 90 
y1 = 160 - cos( (小時 + 8) / 12的餘數 x 30 + (分數 / 2的商) ) x 90

x2 y2 為 160,160 代表 Canvas的中心點。最後的 90 則是時針長度。

之所以要考慮到 (分數 / 2的商)是因為時針實際上也會慢慢移動而非一小時動一次,例如 8:30 的時候,時針就會剛好位於 8 與 9 之間。

請注意在此 (小時 +8) 是因為執行於模擬器時會使用標準時間,需再加 8 小時才是台灣時間。如果您是執行在實體手機上的話,就不需要加 8



6. 繪製 3 6 9 12 字樣

使用 Canvas.DrawText 指令畫出 3 6 9 12 等字樣,讓您的時鐘更漂亮。 


ċ
analog_clock.aia
(19k)
曾吉弘,
2015年12月8日 下午10:40
Comments