簡單轉(zhuǎn)盤的實(shí)現(xiàn)

一墓臭、簡介

????????? 在Android的菜鳥路上,學(xué)習(xí)自定義控件氓鄙,掌握了一點(diǎn)東西就想實(shí)踐一下诚隙,這時(shí)候剛好有個需求需要實(shí)現(xiàn)一個簡單轉(zhuǎn)盤的效果,那就動手去嘗試一下赎懦,封裝就...,只當(dāng)做是自己的練習(xí)吧雀鹃。效果圖如下(點(diǎn)擊可以讓箭頭旋轉(zhuǎn)):

二、思路和主要代碼

1励两、圓環(huán)部分的實(shí)現(xiàn)黎茎。先畫一個藍(lán)色的大圓,再畫一個白色的小圓伐蒋,前提是要設(shè)置相同的圓心工三,半徑部分就可以自己去定義。主要代碼:

畫圓環(huán)

2先鱼、兩條相交的直線俭正。先讓畫布以圓心為中心點(diǎn)旋轉(zhuǎn)45度,然后再畫兩條互相垂直的直線即可焙畔。代碼如下:

3掸读、畫三角形即圖中的箭頭。因?yàn)檫@三角形是需要轉(zhuǎn)動宏多,所以需要設(shè)置canvas的旋轉(zhuǎn)的角度儿惫,再去畫三角形。一開始設(shè)置三角形是在左邊的伸但,因此先確定三角形的三個頂點(diǎn)肾请,然后在用Path類來畫出三角形,至于旋轉(zhuǎn)其實(shí)就是利用canvas.rotate(degree, width / 2, height / 2);要注意的是旋轉(zhuǎn)的中心點(diǎn)是圓心更胖,就可以讓三角形圍繞白色圓形轉(zhuǎn)動了铛铁。不然就看不到旋轉(zhuǎn)的三角形了隔显。代碼如下:

畫三角形

4、畫文本饵逐。x坐標(biāo)的是很容易確定的括眠,y坐標(biāo)我取的是文本的底部,所以需要使用以下方法來獲取文本的范圍倍权。


獲取文本的大小

之后就是畫出具體的內(nèi)容了掷豺,其它的文本也是類似。

畫具體的文本

5薄声、設(shè)置控件的點(diǎn)擊事件当船。

(1)判斷點(diǎn)擊是否落在圓環(huán)上。其實(shí)就是點(diǎn)到圓心的距離要大于小園的半徑同時(shí)小于大圓的半徑奸柬,這時(shí)候就能看出之前采用兩個圓組合成圓環(huán)的好處了生年。

判斷點(diǎn)是否在圓上

(2)判斷點(diǎn)落在哪一個區(qū)域。首先要計(jì)算出兩條直線的表達(dá)式廓奕,要注意的是Android里面的坐標(biāo)系豎直向下方向才是y軸的正方向抱婉。然后根據(jù)它在哪一條直線的上方和哪一條直線的下方等方向來判斷。比如最左邊的區(qū)域其實(shí)就是在傾斜角為45度直線的上方和另外一條直線的下方桌粉,這時(shí)候只需要判斷y值就可以了蒸绩。

判斷點(diǎn)落在哪個范圍上

(3)計(jì)算三角形要旋轉(zhuǎn)的角度,這個就用暴力法來做铃肯,直接判斷當(dāng)前的位置和要旋轉(zhuǎn)到的位置來設(shè)置它們的角度患亿。暫時(shí)沒想到其它的算法就只好將就了。

旋轉(zhuǎn)前的計(jì)算

(4)使用屬性動畫讓三角形轉(zhuǎn)起來押逼。兩個參數(shù)分別是三角形當(dāng)前的角度和要旋轉(zhuǎn)到的角度步藕,然后在onAnimationUpdate回調(diào)方法里獲取到當(dāng)前的值,最后調(diào)用postInvalidate()方法重新繪圖挑格。

開始旋轉(zhuǎn)

(5)重寫onTouchEvent方法咙冗。

三、總結(jié)漂彤。

這是我學(xué)習(xí)了自定義控件的基礎(chǔ)知識之后的實(shí)踐雾消,算是入門了,當(dāng)然肯定會有很多不足的地方挫望,慢慢來吧立润。我覺得遇到?jīng)]做過的東西,主要就是要有自己的想法媳板,雖然有可能不完美桑腮,但是至少是自己的東西。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蛉幸,一起剝皮案震驚了整個濱河市破讨,隨后出現(xiàn)的幾起案子旨巷,更是在濱河造成了極大的恐慌,老刑警劉巖添忘,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異若锁,居然都是意外死亡搁骑,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門又固,熙熙樓的掌柜王于貴愁眉苦臉地迎上來仲器,“玉大人,你說我怎么就攤上這事仰冠》剑” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵洋只,是天一觀的道長辆沦。 經(jīng)常有香客問我,道長识虚,這世上最難降的妖魔是什么肢扯? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮担锤,結(jié)果婚禮上蔚晨,老公的妹妹穿的比我還像新娘。我一直安慰自己肛循,他們只是感情好铭腕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著多糠,像睡著了一般累舷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上熬丧,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天笋粟,我揣著相機(jī)與錄音,去河邊找鬼析蝴。 笑死害捕,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的闷畸。 我是一名探鬼主播尝盼,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼佑菩!你這毒婦竟也來了盾沫?” 一聲冷哼從身側(cè)響起裁赠,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎赴精,沒想到半個月后佩捞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕾哟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年一忱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谭确。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡帘营,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逐哈,到底是詐尸還是另有隱情芬迄,我是刑警寧澤,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布昂秃,位于F島的核電站禀梳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏械蹋。R本人自食惡果不足惜出皇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哗戈。 院中可真熱鬧郊艘,春花似錦、人聲如沸唯咬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胆胰。三九已至狞贱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蜀涨,已是汗流浹背瞎嬉。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留厚柳,地道東北人氧枣。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像别垮,于是被迫代替她去往敵國和親便监。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355

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

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,685評論 2 32
  • 轉(zhuǎn)載請聲明 原文鏈接 關(guān)注公眾號獲取更多資訊 這篇文章主要總結(jié)H5的一些新增的功能以及一些基礎(chǔ)歸納烧董,這里只是一個提...
    程序員poetry閱讀 9,071評論 22 225
  • 自尊這個東西必不可少毁靶,但是吧有時(shí)候可以不用太強(qiáng)悍。
    蟬笙閱讀 316評論 0 0
  • 端午節(jié)放假了逊移。我要利用假日去體驗(yàn)一下跑滴的生活预吆。小車跟隨我有近一年的時(shí)間啦。其實(shí)胳泉,當(dāng)初買車的其中一個目的就是啡浊,利用...
    一片祥和閱讀 251評論 0 0
  • 【幸福路人謝淑偉 平頂山 堅(jiān)持分享第27天 20170907 星期四】 ...
    你今天怎么樣閱讀 244評論 0 0