最近加班趕項目上線之后除了改一些bug看一些文章肖抱,似乎有點(diǎn)松散了逆巍。
今天主要講的還是自定義view的操作县貌。由于自己一開始實(shí)習(xí)的時候做的是一個空氣凈化器的硬件項目抖拴,顯示數(shù)據(jù)也是通過自定義view去展示。所以這里寫了一個類似的小demo缘缚。(只不過這里支持手勢滑動)-----簡易鐘表的繪制
講來這個小demo其實(shí)也是挺簡單的勾笆,只是手勢滑動之前自己一直沒有實(shí)踐過,有的只是自己的想法和方案桥滨。故今天就特地對自己的方案測試了下窝爪。
先上圖
額。齐媒。蒲每。。有點(diǎn)丑里初。啃勉。。双妨。淮阐。
由于主要是對手勢滑動處理,故并沒有對畫的質(zhì)量做太多要求刁品,將就看吧泣特。
廢話不多說,開始講解代碼挑随。
1表盤以及刻度的繪制
1)可以看到表盤是一個圓形
2)刻度尺
刻度尺分為兩部分: 1 時状您、2分
時刻度比較長,一共有12個兜挨。 ?分刻度比較短膏孟,一共60個
畫布的初始位置是3點(diǎn)鐘的位置(作為0度),所以每隔360/12的角度繪制一條線拌汇。通過旋轉(zhuǎn)畫布的方式分別繪制12個時刻度尺柒桑。
時刻度畫完之后記得將畫布的角度重新規(guī)整到0度位置,然后開始繪制分刻度
2繪制時針和分針以及中間的按鈕
時針以及分針其實(shí)就是一個line,中間為了稍微美觀點(diǎn)就加了一個圓形
重點(diǎn): 可以看到繪制的重點(diǎn)是每個方法第一行的畫布旋轉(zhuǎn)里面的角度 hAngel,mAngel噪舀。很明顯這里的角度是隨著手勢的滑動而動態(tài)設(shè)置的魁淳,這樣才有了隨著手指的滑動,指針而滑動的效果
可以看到手勢的各個事件都在執(zhí)行 calcDegree的方法与倡。那么重點(diǎn)就是該方法中的 ?MyDegreeAdapter.getAngle的方法
理論: 上面提過 3點(diǎn)鐘的位置為0度角界逛,如果手勢是逆時針滑動則canvas實(shí)際上的角度是遞減的,也就是小于0纺座。這里我們就以逆時針的例子講解(其實(shí)如果是順時針滑動息拜,效果也是一樣的)
這個方法得到一個與x軸的夾角(以表盤為中心,過中心分別垂直的兩條垂線分別是x軸和y軸「盟荩可以理解為 3點(diǎn)和9點(diǎn)的連線為x軸岛抄, ?12點(diǎn)和6點(diǎn)的連線是y軸)
如圖
其中
那么如果分針在第一象限旋轉(zhuǎn)的角度(以下統(tǒng)一稱為degree.别惦,注意這里的角度是與x軸的夾角狈茉,統(tǒng)一做了絕對值的處理)
degree = -degree(比如-30度)
分針在第二象限
degree = -(180度- degree); (比如degree為30度)
分針在第三象限
degree = -(degree +180);
分針在第四象限
degree = -(360度- degree);
然后把degree傳給分針?biāo)D(zhuǎn)的角度就可以了
總結(jié):
其實(shí)做這些最好的方案還是要自己在本子上畫草稿圖,方法不一定是固定的掸掸,但是做法理論其實(shí)都是在計算畫布旋轉(zhuǎn)的角度氯庆。應(yīng)用數(shù)學(xué)知識的反三角函數(shù)得出角度然后旋轉(zhuǎn)畫布。以上例子只是一個小練習(xí)扰付,但是基本實(shí)現(xiàn)了旋轉(zhuǎn)的需求堤撵,實(shí)際中可以根據(jù)不同的需求做不同的操作。