
挑戰任務:使用OpenCV繪制一個随系統時間動态變化的時鐘。
1、挑戰内容
完成如下圖所展示的動态時鐘,時鐘需随系統時間變化,中間顯示目前日期。
其實本次任務涉及的OpenCV知識并不多,但有助于提升大家的程式設計實踐能力。
挑戰題不會做也木有關系,但請務必在自行嘗試後,再看下面的解答噢,不然…我也沒辦法( ̄▽ ̄)”
2、挑戰解答
一 方案
本次挑戰任務旨在提升大家的動手實踐能力,解決實際問題,是以我們得先有個解題思路和方案。觀察下常見的時鐘表盤:
整個表盤其實隻有3根表針在動,是以可以先畫出靜态表盤,然後擷取系統目前時間,根據時間實時動态繪制3根表針就解決了。
二 繪制表盤
表盤上隻有60條分/秒刻線和12條小時刻線,當然還有表盤的外部輪廓圓,也就是重點在如何畫72根線。先把簡單的圓畫出來:
import cv2
import math
import datetime
import numpy as np
%matplotlib inline
margin = 5 # 上下左右邊距
radius = 220 # 圓的半徑
center = (center_x, center_y) = (225, 225) # 圓心
# 1. 建立一個畫闆并填充成白色
img = np.zeros((450, 450, 3), np.uint8)
img[:] = (255, 255, 255)
# 2. 畫出圓盤
cv2.circle(img, center, radius, (0, 0, 0), thickness=5)
前面我們使用OpenCV畫直線的時候,需知道直線的起點和終點坐标,那麼畫72根線就變成了擷取72組坐标。
在平面坐标系下,已知半徑和角度的話,A點的坐标可以表示為:
x=r×cosα
y=r×sinα
先隻考慮将坐标系原點移動到左上角,角度依然是平面坐标系中的逆時針計算,那麼新坐标是:
對于60條分/秒刻線,刻線間的夾角是360°/60=6°,對于小時刻線,角度是360°/12=30°,這樣就得到了72組起點坐标,那怎麼得到終點坐标呢?其實同樣的原理,用一個同心的小圓來計算得到B點:
通過A/B兩點就可以畫出直線:
pt1 = []
# 3. 畫出60條秒和分鐘的刻線
for i in range(60):
# 最外部圓,計算A點
x1 = center_x+(radius-margin)*math.cos(i*6*np.pi/180.0)
y1 = center_y+(radius-margin)*math.sin(i*6*np.pi/180.0)
pt1.append((int(x1), int(y1)))
# 同心小圓,計算B點
x2 = center_x+(radius-15)*math.cos(i*6*np.pi/180.0)
y2 = center_y+(radius-15)*math.sin(i*6*np.pi/180.0)
cv2.line(img, pt1[i], (int(x2), int(y2)), (0, 0, 0), thickness=2)
# 4. 畫出12條小時的刻線
for i in range(12):
# 12條小時刻線應該更長一點
x = center_x+(radius-25)*math.cos(i*30*np.pi/180.0)
y = center_y+(radius-25)*math.sin(i*30*np.pi/180.0)
# 這裡用到了前面的pt1
cv2.line(img, pt1[i*5], (int(x), int(y)), (0, 0, 0), thickness=5)
# 到這裡基本的表盤圖就已經畫出來了
三 角色換算
接下來算是一個小難點,首先時鐘的起始坐标在正常二維坐标系的90°方向,其次時鐘跟圖像一樣,都是順時針計算角度的,是以三者需要統一下:
因為角度是完全對稱的,順逆時針沒有影響,是以平面坐标系完全不用理會,放在這裡隻是便于大家了解。對于時鐘坐标和圖像坐标,時鐘0的0°對應圖像的270°,時鐘15的90°對應圖像的360°,時鐘30的180°對應圖像的450°(360°+90°)…
是以兩者之間的關系便是:
計算角度 = 時鐘角度+270°計算角度 = 計算角度 if 計算角度<=360° else 計算角度-360°
四 同步時間
Python中如何擷取目前時間和添加日期文字都比較簡單,看代碼就行,我就不解釋了。代碼中角度計算我換了一種方式,其實是一樣的,看你能不能看懂(●ˇ∀ˇ●):
while(1):
# 不斷拷貝表盤圖,才能更新繪制,不然會重疊在一起
temp = np.copy(img)
# 5. 擷取系統時間,畫出動态的時-分-秒三條刻線
now_time = datetime.datetime.now()
hour, minute, second = now_time.hour, now_time.minute, now_time.second
# 畫秒刻線
# OpenCV中的角度是順時針計算的,是以需要轉換下
sec_angle = second*6+270 if second <= 15 else (second-15)*6
sec_x = center_x+(radius-margin)*math.cos(sec_angle*np.pi/180.0)
sec_y = center_y+(radius-margin)*math.sin(sec_angle*np.pi/180.0)
cv2.line(temp, center, (int(sec_x), int(sec_y)), (203, 222, 166), 2)
# 畫分刻線
min_angle = minute*6+270 if minute <= 15 else (minute-15)*6
min_x = center_x+(radius-35)*math.cos(min_angle*np.pi/180.0)
min_y = center_y+(radius-35)*math.sin(min_angle*np.pi/180.0)
cv2.line(temp, center, (int(min_x), int(min_y)), (186, 199, 137), 8)
# 畫時刻線
hour_angle = hour*30+270 if hour <= 3 else (hour-3)*30
hour_x = center_x+(radius-65)*math.cos(hour_angle*np.pi/180.0)
hour_y = center_y+(radius-65)*math.sin(hour_angle*np.pi/180.0)
cv2.line(temp, center, (int(hour_x), int(hour_y)), (169, 198, 26), 15)
# 6. 添加目前日期文字
font = cv2.FONT_HERSHEY_SIMPLEX
time_str = now_time.strftime("%d/%m/%Y")
cv2.putText(img, time_str, (135, 275), font, 1, (0, 0, 0), 2)
cv2.imshow('clocking', temp)
if cv2.waitKey(1) == 27: # 按下ESC鍵退出
break
本此挑戰旨在鍛煉一步步解決實際問題的思路(雖然有點數學知識( ̄▽ ̄)”),大家再接再厲噢!