Android如何實現動態滾動波形圖(心電圖)功能

Posted on by

一、前言

最近涉及的某個醫療相關的業務，傳感器數據傳遞上來需要實現示波器的效果，心電圖的效果，目前交付效果還算理想，於是封裝瞭一下，方便自己以後使用，也給大傢分享一下

二、效果圖

圖一是心電圖效果，圖二是一個滾動的波形圖

三、功能實現

（一）繪制背景網格
為瞭讓他看上去像示波器上的數據，我們先繪制一層網格背景，看上去似乎就有那麼點意思瞭

在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 實現動態滾動波形圖(心電圖)功能的資料請關註WalkonNet其它相關文章！

推薦閱讀：