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

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

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

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