一个简易的钟表

最近加班赶项目上线之后除了改一些bug看一些文章，似乎有点松散了。

今天主要讲的还是自定义view的操作。由于自己一开始实习的时候做的是一个空气净化器的硬件项目，显示数据也是通过自定义view去展示。所以这里写了一个类似的小demo。（只不过这里支持手势滑动）-----简易钟表的绘制

讲来这个小demo其实也是挺简单的，只是手势滑动之前自己一直没有实践过，有的只是自己的想法和方案。故今天就特地对自己的方案测试了下。

先上图

额。。。。有点丑。。。。。

由于主要是对手势滑动处理，故并没有对画的质量做太多要求，将就看吧。

废话不多说，开始讲解代码。

1表盘以及刻度的绘制

1）可以看到表盘是一个圆形

2）刻度尺

刻度尺分为两部分： 1 时、2分

时刻度比较长，一共有12个。  分刻度比较短，一共60个

画布的初始位置是3点钟的位置（作为0度），所以每隔360/12的角度绘制一条线。通过旋转画布的方式分别绘制12个时刻度尺。

时刻度画完之后记得将画布的角度重新规整到0度位置，然后开始绘制分刻度

道理同上

2绘制时针和分针以及中间的按钮

时针以及分针其实就是一个line,中间为了稍微美观点就加了一个圆形

重点： 可以看到绘制的重点是每个方法第一行的画布旋转里面的角度 hAngel,mAngel。很明显这里的角度是随着手势的滑动而动态设置的，这样才有了随着手指的滑动，指针而滑动的效果

可以看到手势的各个事件都在执行 calcDegree的方法。那么重点就是该方法中的  MyDegreeAdapter.getAngle的方法

理论： 上面提过 3点钟的位置为0度角，如果手势是逆时针滑动则canvas实际上的角度是递减的，也就是小于0。这里我们就以逆时针的例子讲解（其实如果是顺时针滑动，效果也是一样的）

这个方法得到一个与x轴的夹角（以表盘为中心，过中心分别垂直的两条垂线分别是x轴和y轴。可以理解为 3点和9点的连线为x轴，  12点和6点的连线是y轴）

如图

其中

那么如果分针在第一象限旋转的角度（以下统一称为degree.，注意这里的角度是与x轴的夹角，统一做了绝对值的处理）

degree = -degree(比如-30度)

分针在第二象限

degree = -(180度- degree); （比如degree为30度）

分针在第三象限

degree = -(degree +180);

分针在第四象限

degree = -(360度- degree);

然后把degree传给分针所要旋转的角度就可以了

总结:

其实做这些最好的方案还是要自己在本子上画草稿图，方法不一定是固定的，但是做法理论其实都是在计算画布旋转的角度。应用数学知识的反三角函数得出角度然后旋转画布。以上例子只是一个小练习，但是基本实现了旋转的需求，实际中可以根据不同的需求做不同的操作。