Android如何实现动态滚动波形图(心电图)功能

一、前言

最近涉及的某个医疗相关的业务，传感器数据传递上来需要实现示波器的效果，心电图的效果，目前交付效果还算理想，于是封装了一下，方便自己以后使用，也给大家分享一下

二、效果图

图一是心电图效果，图二是一个滚动的波形图

三、功能实现

（一）绘制背景网格
为了让他看上去像示波器上的数据，我们先绘制一层网格背景，看上去似乎就有那么点意思了

在onlayout函数中获取控件宽高，然后除以默认网格的宽高，得出需要绘制横线和竖线的数量

  /** 根据网格的单位长宽，获取能绘制网格横线和竖线的数量*/
  gridhorizontalnum = (int) (mheight / grid_width);
  gridverticalnum = (int) (mwidth / grid_width);

在ondraw函数中，通过for循环，来一条条绘制横线和竖线

 /**
  * 绘制网格
  *
  * @param canvas
  */
 private void drawgrid(canvas canvas) {
  /** 设置颜色*/
  mlinepaint.setcolor(gridlinecolor);
  /** 绘制横线*/
  for (int i = 0; i < gridhorizontalnum + 1; i++) {
   canvas.drawline(0, i * grid_width,
     mwidth, i * grid_width, mlinepaint);
  }
  /** 绘制竖线*/
  for (int i = 0; i < gridverticalnum + 1; i++) {
   canvas.drawline(i * grid_width, 0,
     i * grid_width, mheight, mlinepaint);
  }
 }

网格是静态的，所以绘制起来比较简单

（二）绘制折线

折线的绘制有两种模式，也就是效果图上下两种效果的区别

原理也比较简单

1、首先和绘制网格一样，在onlayout函数中根据每段数据线条的跨度，算出当前view能绘制多少条直线
同时创建一个浮点类型的数组，用于保存每次传进来的数据

  /** 根据线条长度，最多能绘制多少个数据点*/
  row = (int) (mwidth / wave_line_width);
  dataarray = new float[row + 10];

2、来看数据的保存方式

心电图效果的保存方式是创建了一个索引，每次绘制后自增，索引达到数组的最大值时，赋值为0

也就实现了循环的效果

普通的滚动效果的，就是删除第一个，新增的数据添加至数组的末尾

 /**
  * 添加新的数据
  */
 public void showline(float line) {
  if (draw_index >= row) {
   draw_index = 0;
  }
  switch (drawmode){
   case 0:
    /** 常规模式数据添加至最后一位*/
    dataarray[row - 1] = line;
    break;
   case 1:
    /** 循环模式数据添加至当前绘制的位*/
    dataarray[draw_index] = line;
    break;
  }
  postinvalidate();
 }

3、绘制折线的流程

默认最大值为20，以view高度的一半处为0，下方是-20，上方是+20

x没什么好说的，就是i*单位宽度

y则为高度的一半减去数组中数据占view一半高度的比重

将所有的点坐标传入path类中，最后使用canvas的drawpath函数就可以绘制出想要有的效果了

 /**
  * 取数组中的指定一段数据来绘制折线
  * @param start 起始数据位
  * @param end 结束数据位
  * */
 private void drawpathfromdatas(canvas canvas, int start, int end){
  mpath.reset();
  mpath.moveto(start * wave_line_width, mheight / 2);
  for (int i = start; i < end; i++) {
   nowx = i * wave_line_width;
   float datavalue = dataarray[i];
   /** 判断数据为正数还是负数 超过最大值的数据按最大值来绘制*/
   if (datavalue > 0) {
    if (datavalue > max_value) {
     datavalue = max_value;
    }
   } else {
    if (datavalue < -max_value) {
     datavalue = -max_value;
    }
   }
   nowy = mheight / 2 - datavalue * (mheight / (max_value * 2));
   mpath.lineto(nowx, nowy);
  }
  canvas.drawpath(mpath, mwavepaint);
 }

四、如何使用

（一）添加库

allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
 }

（二）布局文件

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".mainactivity">

 <textview
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="波形图1"
  android:textcolor="#000000"
  android:textsize="24sp" />

 <com.giftedcat.wavelib.view.waveview
  android:id="@+id/wave_view1"
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:layout_weight="1"
  app:draw_mode="loop"
  app:max_value="30"
  app:wave_background="#000000"
  app:wave_line_color="#ffff00"
  app:wave_line_width="20" />

 <textview
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="波形图2"
  android:textcolor="#000000"
  android:textsize="24sp" />

 <com.giftedcat.wavelib.view.waveview
  android:id="@+id/wave_view2"
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:layout_weight="1"
  app:draw_mode="normal"
  app:grid_visible="false"
  app:wave_line_stroke_width="5" />

</linearlayout>

xml中可使用的参数

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="waveview">
  <!--最大值 默认为20，数据为-20 ~ 20-->
  <attr name="max_value" format="integer" />
  <!--波形图折线单位宽度，通过修改该参数，控制横坐标的单位-->
  <attr name="wave_line_width" format="integer" />
  <!--波形图折线的线宽-->
  <attr name="wave_line_stroke_width" format="integer" />
  <!--波形图折线的颜色-->
  <attr name="wave_line_color" format="string" />
  <!--背景网格图的颜色-->
  <attr name="grid_line_color" format="string" />
  <!--背景颜色，默认为黑-->
  <attr name="wave_background" format="string"/>
  <!--背景网格是否可见-->
  <attr name="grid_visible" format="boolean" />
  <!--波形图绘制模式，常规和循环-->
  <attr name="draw_mode" format="enum">
   <enum name="normal" value="0" />
   <enum name="loop" value="1" />
  </attr>
 </declare-styleable>
</resources>

（三）向波形图中添加数据

    data = new random().nextfloat()*(20f)-10f;
    waveshowview.showline(data);//取得是-10到10间的浮点数

源码地址：

https://github.com/giftedcat/waveform

到这里就结束啦.

以上就是android如何实现动态滚动波形图(心电图)功能的详细内容，更多关于android 实现动态滚动波形图(心电图)功能的资料请关注其它相关文章！