仿钉钉考勤统计圆形控件

一、效果图

      出于好奇,做了一个模仿钉钉考勤统计的圆形控件,会按照设置的比例填充,效果如下:

二、原理

    不感兴趣的可以不往下看,代码已经上传到github,连接:https://github.com/861493711/CircleRatioView


      如上图所示,首先我们从最简单的部分开始,先画出外圆和内圆,再在两圆之间的间隙填充有色弧线,到这一部分为止,我相信大部分的人都可以做到,接下来最难的部分就是画出弧线两端的半圆,我在弧线两端画的是整个圆,展示出来的效果跟画半圆的结果是一样的,我们已知外圆的半径为R,外圆圆心为(a,b),弧线两端小圆的半径为r(该数值为外圆和内圆之间的间隙的一半),而且我们很容易就知道弧线两端小圆的圆心在半径为R-r,圆心为(a,b)的圆上,然后计算出小圆偏移的圆心角t,最后根据圆的参数方程

x=a+r Cos t,y=b+r Sin t 

得出小圆的圆心位置,就能画出弧线两端小圆了,剩下的就只剩画出园内的字符串了,这个很简单就不说了,直接看代码应该就可以明白了

        有问题可以在评论区跟我讨论。


猜你喜欢

转载自blog.csdn.net/u012859430/article/details/79377543