序言
够几个月没有更新了,博客还透露着春招焦虑的气息。最近code确实不多,而且缺乏原创性的内容,当然,关键点还是在于,对于最近看的东西,看的比较杂,没能够有一个非常透彻的理解,input后没有进行很好的内化,导致output如难产的婴儿,迟迟无法落地。转到正题,这次写的仪表盘,继承JComponent实现一个仪表空间。支持直线性,弧形,圆形。同时支持对于表盘的颜色,大小的一些自定义操作。难点在于对于表盘刻度的绘制。涉及到数学公式的转化,将我们的刻度线进行绘制。
实现思路
初次想到实现一个仪表盘,有点畏惧心理,但是想到了之前创业公司实现的一个扇形的RecyclerView控件,感觉有很多可以参考的算法在里面,所以决定来尝试下。逐层剖析,同时在网上看到了一个实现,大体上看了下其实现,代码写的非常烂,阅读难度非常大,对于后期想在其寄出上造个轮子来说是比较困难的。平时开发中,很多轮都不能完全match我们的需求,因此需要我们具备自身拆轮能力,而作为一个造轮者,除了完成需求,应该尽可能的使轮具备更好的泛化能力。
对于刻度盘的绘制,首先要知道的是,一个刻度盘包含哪些东西,哪些需要我们去绘制的,对刻度盘进行了一个拆分之后,然后逐个去绘制,此时就没有这么难了。
-
刻度:刻度盘,首先要有的必然是刻度,如下图中的所示,对于刻度,我们需要有长刻度和短刻度,长刻度也就是我们的大的单位。然后是其中的最小单位,也就是一个个的小刻度。
-
文字标量:刻度盘中的文字标量,对于刻度盘,我们需要文字来准确直观的描述,每一个刻度所度量的大小,因此,我们需要在刻度上,对于大小进行一个标注。
-
指针:对于表示我们的当前值的大小,我们需要一个指针来指向我们的当前值,这个时候我们需要根据提供的数值的大小,绘制一个指针来表示当前的值,指向刻度盘上的当前位置。
因此,我们可以得出,对于一个刻度盘的绘制,需要对于三个部分的绘制综合得到。以绘制弧形的举例。
绘制弧形,首先是对于刻度的绘制,我们需要根据提供整个圆弧的角度和数值的范围来将刻度盘进行分割,分割完成之后,对其进行绘制,这个时候,如何绘制呢?从什么地方开始绘制,画刻度,无非是提供线的两端,然后画一条线,那么问题就是在于如何如何找到这条线的两端的坐标,这个时候,需要我们运用一些数学知识,来进行计算,根据角度来计算。这个时候需要我们计算出起始角度,然后根据每当我们画出一个刻度,就加上相应的角度值,最后得到每一个刻度所处的角度,然后根据余弦公式,表示当前的角度。
-
double x1 = Math.cos(startAngle - num * major * dunit) * r + width / 2;
-
double y1 = height - yOffset - Math.sin(startAngle - num * major * dunit) * r;
-
double x2 = Math.cos(startAngle - num * major * dunit) * r * 0.75 + width / 2;
-
double y2 = height - yOffset - Math.sin(startAngle - num * major * dunit) * r * 0.75;
具体代码的实现可以参考本人github开源代码。
实现效果
线性刻度盘
弧形刻度盘
半圆中心刻度盘
圆形刻度盘
评论(0)