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

一、前言
二、效果图
三、功能实现
四、如何使用

一、前言最近涉及的某个医疗相关的业务，传感器数据传递上来需要实现示波器的效果，心电图的效果，目前交付效果还算理想，于是封装了一下，方便自己以后使用，也给大家分享一下
【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 = https://www.it610.com/article/dataArray[i]; /** 判断数据为正数还是负数超过最大值的数据按最大值来绘制*/if (dataValue> 0) {if (dataValue > MAX_VALUE) {dataValue = https://www.it610.com/article/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); }

四、如何使用
（一）添加库