安卓自定义控件之折线图

目标:

效果图:

安卓自定义控件之折线图

需求:

1、      折线图是固定的,不会滑动,但是随着点数的增多间距逐渐变小(需要在一页中可以看见全部的点)。

2、      横轴的数字也是随着点数的增多保持好间距。

3、      折现需要平滑一点

实现思路

因为没有滑动功能,所以思路比较简单。就是画线和画数字。根据点的多少来决定纵轴间的间距和下面数字之间的间距。

 

功能实现:

1、      初始化和获取宽高:

安卓自定义控件之折线图

我比较喜欢在onSizeCHanged里面获取padding值和我们空间的宽高。

2、      开始绘制:

 安卓自定义控件之折线图

 

初始化:

安卓自定义控件之折线图

安卓自定义控件之折线图

安卓自定义控件之折线图

测试点设置是这样的;

 

画x轴:

安卓自定义控件之折线图

画y轴:

 安卓自定义控件之折线图

安卓自定义控件之折线图

因为有了起始点和终止点所以我们画的时候就比较好计算了。

将获取的点转化为坐标轴上的点

安卓自定义控件之折线图

根据点的索引,获得点的x值。根据点的值,获取点的y值。

画连接点的线

因为draw的绘画机制是后画的覆盖先画的。所以为了能够让点显出来,我们将点放在最后绘制。这里我们先画线。

画线为了平滑,我们选择了两个参考点的贝叶斯曲线。

安卓自定义控件之折线图

安卓自定义控件之折线图

手动画比较粗糙。原理就是利用2阶贝叶斯曲线进行平滑。

画点:

安卓自定义控件之折线图

画点就没什么了,因为之前转化过坐标,所以直接用就好了。

 

 

 

 

 

 

 

 

 

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-01-05
  • 2021-11-13
  • 2021-07-11
  • 2021-11-13
  • 2021-12-30
  • 2022-12-23
猜你喜欢
  • 2022-02-09
  • 2022-02-09
  • 2021-10-20
  • 2021-12-06
  • 2021-07-20
  • 2022-12-23
相关资源
相似解决方案