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

一个简易的钟表

作者: 若无初见 | 来源:发表于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传给分针所要旋转的角度就可以了

总结:

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

相关文章

  • 一个简易的钟表

    最近加班赶项目上线之后除了改一些bug看一些文章,似乎有点松散了。 今天主要讲的还是自定义view的操作。由于自己...

  • 简易电子钟表

    钟表 body{ background: url...

  • 别再错过了,这才是最简单最有效的习惯养成法!

    记得有这样一个故事:一个小钟表问一个大钟表,我每天的工作是什么呀?大钟表说你的工作就是每天敲钟86400下。小钟表...

  • 做钟表

    今天我们社团课是做钟表,老师让一个同学把钟表发到我们手里,打开袋子,一看我的是一个绿色的小杨钟表,袋子里有小杨钟表...

  • 末世吟唱 ——读《钟表馆事件》(剧透)

    充满诡异气氛的钟表馆,有上百个不同的钟表,每个钟表都不约而同地指着同一个时刻,嘀嗒、嘀嗒地响着…… 《钟表馆事件》...

  • 故事的结局早已开始

    钟表延伸出去 那是三天里的一个时刻,在一个钟表里的故事。 我喜欢这个钟表,不是因为拍照的人把它拍的多好,而是,它是...

  • 钟表

    你不紧不慢 不慌不忙 中规中矩的往前走 走啊,走啊 没有尽头 这多像一个人的头脑 在白天,没有休息的时候

  • 钟表

    日子走了 已有快有三个年头 钟表 却蜷缩在暗角 静止了 指针所指的方向 是清晨 也是傍晚 醒来 或是将要睡去 ...

  • 钟表

    一块钟表 秒针是你 时针是我 秒针不停转 时针怎么追

  • 钟表

    锈迹斑驳的栏门里 掩了芳华的怀表 拉着地球自转 追赶太阳的脚步 灼热逼退的方向 弯月削了尖牙 白墙上的大摆钟 左右...

网友评论

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

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