|
本範例使用 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 等字樣，讓您的時鐘更漂亮。
 |