最近加班赶项目上线之后除了改一些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传给分针所要旋转的角度就可以了
总结:
其实做这些最好的方案还是要自己在本子上画草稿图,方法不一定是固定的,但是做法理论其实都是在计算画布旋转的角度。应用数学知识的反三角函数得出角度然后旋转画布。以上例子只是一个小练习,但是基本实现了旋转的需求,实际中可以根据不同的需求做不同的操作。
网友评论