本文出自简书：尧沐，如需转载请标明出处，尊重原创谢谢
博客地址：http://www.jianshu.com/p/1fe0584e2007
这次实现的效果是这样的
GIF.gif
这里要说一点 一定要捋清逻辑才能写代码不然就是白写
需求分析
- 1 绘制最外面的外圆弧
- 2 绘制里面的不连续线的小圆弧
- 3 绘制中心文字
- 4 绘制中心文字下面的文字
- 5 绘制图片指针
- 6 绘制外圆弧上面的进度点
然后我们开始第一步操作
第一步
绘制圆弧需要什么？ 是不是需要一个矩形或者其他重载参数的补全(实际上就是矩形)，
然后我们继续分析，这个矩形是不是应该是一个正方形？因为我们的圆弧是一个正正好好的半圆
所以我们确定下了第一步
绘制矩形
RectF mreRectF = new RectF(left, top, right, bottom);
这里我们要说一下矩形的四个参数都是什么，并不是什么顶点坐标，而是他距离屏幕左边
以及屏幕右边的距离。这里要明白
所以我们定义参数如下(伪代码)
左 = 宽度 / 2 - 半径
上 = 高度 / 2 - 半径
右 = 宽度 / 2 + 半径 (因为我们本身矩形就要占据一部分)
下 = 高度 / 2 + 半径 同理
绘制外圆弧
canvas.drawArc(mreRectF, 开始角度, 要旋转多少角度, 是不是连接中心, 画笔);
第二步
2.1
绘制小一点的内圆弧？ 我们这里还需要定义一个矩形么？ 当然不要了- -。我们把原来的矩形减少一点就可以了
所以我们减少的部分就不写了。
2.2
这里实际上用到了一个旋转画布的技巧 也就是Canvas 对于这个类我以后会专门说一次，这次明白怎么用就好
内圆弧是什么组成的? 是不是一个一个小的线段呢？ 所以我们做出第一步! 在最左面绘制出一个最小的
绘制最左侧线段
canvas.drawLine(开始X,开始Y,结束X,结束Y,画笔);
我们一个一个来看，开始X代表的是我们线段开始的X坐标，所以就是 外矩形 - NUM(你想要的值)
开始Y代表的是我们线段开始的Y坐标，所以就是 外矩形的中心Y - NUM
结束X 我们X坐标并没有发生改变,所以还是之前的
结束Y 只需要把刚才的Y多减少一点就可以延长长度了啊！
线段绘制结束
旋转画布达到绘制全部线段
为什么要旋转画布呢? 因为我们只能定点绘制线段，这里不是很好解释，但是很好理解
我们所有的绘制都在一个画布上面，我们旋转画布 然后在绘制相当于什么呢？
就相当于我们把画笔拿起来 旋转了一下角度 然后我们原来绘制的东西会透过画布然后印在屏幕上面
就暂时这么理解把，其实实际和我说的差一点，我就不说什么名词了
canvas.rotate(每次旋转角度, 中心X, 中心Y);// 以圆中心进行旋转
旋转多少次？！？ 其实就是想旋转的角度 / 每次转多少度
for (int i = 0; i < 多少次; i++) {
画线段
旋转画布
}
第三步
绘制中心文字
又要涉及到我们基线计算了，因为只要设计绘制文字就要计算baseline
想要绘制在中心就要测量字符串宽度 然后 / 2,中心距离 然后一个减法 这个说了很多次了
Y = 矩形的top - bottom 然后 + (Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2
老套路了不多说
第四步
绘制中心下面文字
原理一样就是Y的减少（数值减少）
第五步
绘制图片指针
这个有一点麻烦，需要理解一下
因为我们每次都要调用invalidate来重新绘制，所以我们每次只需要画一帧或者说他在这一次绘制的时候应该在的位置就好
所以说是这样的
/ /每次改变的度数 = 我要变到多少 * 我要一共要转几次 / 整体旋转的度数
然后 如果我这次旋转的次数==我要改变的此时 我这时候就绘制,当然每次都需要旋转画布
for (int i = 0; i < 旋转次数; i++) {
if (每次改变的度数==i){
绘制
}
旋转
}
这里需要好好理解一下
第六步
同上
这篇写了好久，因为最近去了新公司，住房什么事情太多 - -以后完善一下 代码就不给了，主要是思路
（一个想进阶高级的工程师 一个交流群：233138718）
网友评论