最近涉及的某个医疗相关的业务,传感器数据传递上来需要实现示波器的效果,心电图的效果,目前交付效果还算理想,于是封装了一下,方便自己以后使用,也给大家分享一下
图一是心电图效果,图二是一个滚动的波形图
(一)绘制背景网格
为了让他看上去像示波器上的数据,我们先绘制一层网格背景,看上去似乎就有那么点意思了
在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
网格是静态的,所以绘制起来比较简单
(二)绘制折线
折线的绘制有两种模式,也就是效果图上下两种效果的区别
原理也比较简单
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; i0) { 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' } } }
(二)布局文件
<&#63;xml version="1.0" encoding="utf-8"&#63;>
xml中可使用的参数
<&#63;xml version="1.0" encoding="utf-8"&#63;>
(三)向波形图中添加数据
data = new Random().nextFloat()*(20f)-10f; waveShowView.showLine(data);//取得是-10到10间的浮点数
源码地址:
https://github.com/Giftedcat/Waveform
到这里就结束啦.
以上就是Android如何实现动态滚动波形图(心电图)功能的详细内容,更多关于Android 实现动态滚动波形图(心电图)功能的资料请关注其它相关文章!