美文网首页
一个简易的钟表

一个简易的钟表

作者: 若无初见 | 来源:发表于2017-11-03 11:52 被阅读111次

    最近加班赶项目上线之后除了改一些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传给分针所要旋转的角度就可以了

    总结:

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

    相关文章

      网友评论

          本文标题:一个简易的钟表

          本文链接:https://www.haomeiwen.com/subject/gcxtmxtx.html