一個簡易的鐘表

最近加班趕項目上線之后除了改一些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ù)不同的需求做不同的操作。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末羽莺,一起剝皮案震驚了整個濱河市实昨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盐固,老刑警劉巖荒给,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異刁卜,居然都是意外死亡志电,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進(jìn)店門蛔趴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挑辆,“玉大人,你說我怎么就攤上這事孝情∮悴酰” “怎么了?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵箫荡,是天一觀的道長魁亦。 經(jīng)常有香客問我,道長菲茬,這世上最難降的妖魔是什么吉挣? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮婉弹,結(jié)果婚禮上睬魂,老公的妹妹穿的比我還像新娘。我一直安慰自己镀赌,他們只是感情好氯哮,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著商佛,像睡著了一般喉钢。 火紅的嫁衣襯著肌膚如雪姆打。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天肠虽,我揣著相機(jī)與錄音幔戏,去河邊找鬼。 笑死税课,一個胖子當(dāng)著我的面吹牛闲延,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播韩玩,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼垒玲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了找颓?” 一聲冷哼從身側(cè)響起合愈,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎击狮,沒想到半個月后佛析,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡帘不,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年说莫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寞焙。...
    茶點(diǎn)故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡储狭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出捣郊,到底是詐尸還是另有隱情辽狈,我是刑警寧澤,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布呛牲,位于F島的核電站刮萌,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏娘扩。R本人自食惡果不足惜着茸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琐旁。 院中可真熱鬧涮阔,春花似錦、人聲如沸灰殴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至伟阔,卻和暖如春辣之,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背皱炉。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工怀估, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人娃承。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓奏夫,卻偏偏與公主長得像怕篷,于是被迫代替她去往敵國和親历筝。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫廊谓、插件梳猪、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,096評論 4 62
  • 下面是項目在手機(jī)上運(yùn)行的效果圖 GIF演示圖 樣式效果演示圖 實(shí)現(xiàn)原理分析 刻度線繪制:畫一個刻度線很簡單,就是c...
    啊杰杰杰杰閱讀 1,478評論 0 2
  • 早上一二節(jié)給專升本的新同學(xué)上課蒸痹,這是我給他們上的第一次課春弥,大一。 這個專升本班不是本學(xué)院的叠荠,自己算是一個外聘老師匿沛,...
    愛自己多一點(diǎn)的貓閱讀 322評論 0 0
  • 街上新開了一家小小的店鋪,賣餛飩的榛鼎,大概十幾平米的樣子逃呼,裝修樸素,白的墻者娱,灰色的地面抡笼,位置不好,人煙也寥寥黄鳍,卻別有...
    歡喜長安閱讀 205評論 0 0
  • 陳重字景公框沟,豫章宜春人也藏古。 少與同郡雷義為友,俱學(xué)《魯詩》忍燥、《顏氏春秋》拧晕。太守張云舉重孝廉,重以讓義灾前,前后十余通記...
    水土jun閱讀 2,574評論 0 0