本文出自簡(jiǎn)書(shū)：堯沐魏割，如需轉(zhuǎn)載請(qǐng)標(biāo)明出處砌庄，尊重原創(chuàng)謝謝
博客地址：http://www.reibang.com/p/1fe0584e2007
這次實(shí)現(xiàn)的效果是這樣的
GIF.gif
這里要說(shuō)一點(diǎn) 一定要捋清邏輯才能寫(xiě)代碼不然就是白寫(xiě)
需求分析
- 1 繪制最外面的外圓弧
- 2 繪制里面的不連續(xù)線的小圓弧
- 3 繪制中心文字
- 4 繪制中心文字下面的文字
- 5 繪制圖片指針
- 6 繪制外圓弧上面的進(jìn)度點(diǎn)
然后我們開(kāi)始第一步操作
第一步
繪制圓弧需要什么？ 是不是需要一個(gè)矩形或者其他重載參數(shù)的補(bǔ)全(實(shí)際上就是矩形)腿准，
然后我們繼續(xù)分析杂穷，這個(gè)矩形是不是應(yīng)該是一個(gè)正方形？因?yàn)槲覀兊膱A弧是一個(gè)正正好好的半圓
所以我們確定下了第一步
繪制矩形
RectF mreRectF = new RectF(left, top, right, bottom);
這里我們要說(shuō)一下矩形的四個(gè)參數(shù)都是什么猜敢，并不是什么頂點(diǎn)坐標(biāo)姑荷，而是他距離屏幕左邊
以及屏幕右邊的距離。這里要明白
所以我們定義參數(shù)如下(偽代碼)
左 = 寬度 / 2 - 半徑
上 = 高度 / 2 - 半徑
右 = 寬度 / 2 + 半徑 (因?yàn)槲覀儽旧砭匦尉鸵紦?jù)一部分)
下 = 高度 / 2 + 半徑 同理
繪制外圓弧
canvas.drawArc(mreRectF, 開(kāi)始角度, 要旋轉(zhuǎn)多少角度, 是不是連接中心, 畫(huà)筆);
第二步
2.1
繪制小一點(diǎn)的內(nèi)圓弧锣枝？ 我們這里還需要定義一個(gè)矩形么厢拭？ 當(dāng)然不要了- -。我們把原來(lái)的矩形減少一點(diǎn)就可以了
所以我們減少的部分就不寫(xiě)了撇叁。
2.2
這里實(shí)際上用到了一個(gè)旋轉(zhuǎn)畫(huà)布的技巧 也就是Canvas 對(duì)于這個(gè)類我以后會(huì)專門(mén)說(shuō)一次供鸠，這次明白怎么用就好
內(nèi)圓弧是什么組成的? 是不是一個(gè)一個(gè)小的線段呢？ 所以我們做出第一步! 在最左面繪制出一個(gè)最小的
繪制最左側(cè)線段
canvas.drawLine(開(kāi)始X,開(kāi)始Y,結(jié)束X,結(jié)束Y,畫(huà)筆);
我們一個(gè)一個(gè)來(lái)看陨闹，開(kāi)始X代表的是我們線段開(kāi)始的X坐標(biāo)楞捂，所以就是 外矩形 - NUM(你想要的值)
開(kāi)始Y代表的是我們線段開(kāi)始的Y坐標(biāo)薄坏，所以就是 外矩形的中心Y - NUM
結(jié)束X 我們X坐標(biāo)并沒(méi)有發(fā)生改變,所以還是之前的
結(jié)束Y 只需要把剛才的Y多減少一點(diǎn)就可以延長(zhǎng)長(zhǎng)度了啊寨闹！
線段繪制結(jié)束
旋轉(zhuǎn)畫(huà)布達(dá)到繪制全部線段
為什么要旋轉(zhuǎn)畫(huà)布呢? 因?yàn)槲覀冎荒芏c(diǎn)繪制線段胶坠，這里不是很好解釋，但是很好理解
我們所有的繪制都在一個(gè)畫(huà)布上面繁堡，我們旋轉(zhuǎn)畫(huà)布 然后在繪制相當(dāng)于什么呢沈善？
就相當(dāng)于我們把畫(huà)筆拿起來(lái) 旋轉(zhuǎn)了一下角度 然后我們?cè)瓉?lái)繪制的東西會(huì)透過(guò)畫(huà)布然后印在屏幕上面
就暫時(shí)這么理解把，其實(shí)實(shí)際和我說(shuō)的差一點(diǎn)椭蹄，我就不說(shuō)什么名詞了
canvas.rotate(每次旋轉(zhuǎn)角度, 中心X, 中心Y);// 以圓中心進(jìn)行旋轉(zhuǎn)
旋轉(zhuǎn)多少次闻牡？！绳矩？ 其實(shí)就是想旋轉(zhuǎn)的角度 / 每次轉(zhuǎn)多少度
for (int i = 0; i < 多少次; i++) {
畫(huà)線段
旋轉(zhuǎn)畫(huà)布
}
第三步
繪制中心文字
又要涉及到我們基線計(jì)算了罩润，因?yàn)橹灰O(shè)計(jì)繪制文字就要計(jì)算baseline
想要繪制在中心就要測(cè)量字符串寬度 然后 / 2,中心距離 然后一個(gè)減法 這個(gè)說(shuō)了很多次了
Y = 矩形的top - bottom 然后 + (Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2
老套路了不多說(shuō)
第四步
繪制中心下面文字
原理一樣就是Y的減少（數(shù)值減少）
第五步
繪制圖片指針
這個(gè)有一點(diǎn)麻煩，需要理解一下
因?yàn)槲覀兠看味家{(diào)用invalidate來(lái)重新繪制翼馆，所以我們每次只需要畫(huà)一幀或者說(shuō)他在這一次繪制的時(shí)候應(yīng)該在的位置就好
所以說(shuō)是這樣的
/ /每次改變的度數(shù) = 我要變到多少 * 我要一共要轉(zhuǎn)幾次 / 整體旋轉(zhuǎn)的度數(shù)
然后 如果我這次旋轉(zhuǎn)的次數(shù)==我要改變的此時(shí) 我這時(shí)候就繪制,當(dāng)然每次都需要旋轉(zhuǎn)畫(huà)布
for (int i = 0; i < 旋轉(zhuǎn)次數(shù); i++) {
if (每次改變的度數(shù)==i){
繪制
}
旋轉(zhuǎn)
}
這里需要好好理解一下
第六步
同上
這篇寫(xiě)了好久割以，因?yàn)樽罱チ诵鹿荆》渴裁词虑樘?- -以后完善一下 代碼就不給了应媚，主要是思路
（一個(gè)想進(jìn)階高級(jí)的工程師 一個(gè)交流群：233138718）
