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 实现动态滚动波形图(心电图)功能的资料请关注我们其它相关文章!

时间: 2021-03-25

Android 拍照选择图片并上传功能的实现思路(包含权限动态获取)

作为一个Android新手,想实现手机拍照并上传的功能,经过查找资料,已实现此功能.在此记录备忘.老鸟请忽略. 一.实现思路: 1.Android手机客户端,拍照(或选择图片),然后上传到服务器. 2.服务器端接收手机端上传上来的图片. 二.实现步骤: 1.按惯例,先放效果图: 项目结构: 2.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a

Android 动态加载二维码视图生成快照的示例

1.需求背景 需要实现一个动态加载但不显示出来的视图,且该视图上有个动态生成的二维码,最后用其去生成一张快照(也就是图片). (常见这种情况是来源于"图片分享"的功能需求,与普通图片分享不同在于,该快照图片是动态加载不显示的.) 2.需求功能拆解 动态二维码的实现 动态视图生成快照的实现 3.踩坑点提要 获取不到动态视图的bitmap 无法获取最新动态视图的bitmap 4.开发实现 动态加载的视图的布局文件代码: <?xml version="1.0" en

Android GridView扩展仿微信微博发图动态添加删除图片功能

在平时的开发中,我们会看到不管是微信发朋友圈照片还是微博发布新鲜事,添加图片的时候都是选完后面还有个+号再去选择图片,这样的话比较方便用户去添加图片,有的右上角还有个-号方便用户去删除图片,而一般用户选择的图片多少都是不定的,我们只限制最大张数,我们用gridview去实现,代码可能比较简单,高手请略过. 0.效果图 1.准备资源图片 添加图片的+号图片 删除图片的图片 2.可设置限制用户选择最大张数 /** * 可以动态设置最多上传几张,之后就不显示+号了,用户也无法上传了 * 默认9张 */

Android自定义view实现动态柱状图

先看一下动态柱状图效果. 主要功能是可以自定义指定的字体,柱状图颜色,动态效果. 在自定义view public class Histogram extends View { int MAX = 100;//矩形显示的最大值 int corner = 0; //矩形的角度. 设置为0 则没有角度. double data = 0.0;//显示的数 double tempData = 0; //初始数据 int textPadding = 50; //字体与矩形图的距离 Paint mPaint;

Android将Glide动态加载不同大小的图片切圆角与圆形的方法

Glide加载动态图片 首先我们先要去依赖一个githup:bumptech:glide:glide:3.7.0包: 使用Glide结合列表的样式进行图片加载: 1) 如果使用的是ListView,可以直接在Adapter的getView方法中使用: @Override public View getView(int position, View convertView, ViewGroup parent) { if (null == convertView) { //..... } Glide

Android用RecyclerView实现动态添加本地图片

本文介绍了Android用RecyclerView实现动态添加本地图片,分享给大家,具体如下: 本文所用的多图选择的library来自:https://github.com/lovetuzitong/MultiImageSelector 简单介绍一下用法: 1.跳转到图片选择页面: Intent intent = new Intent(PassengerSetActivity.this, MultiImageSelectorActivity.class); intent.putExtra(Mul

Android动态修改应用图标与名称的方法实例

遇到的坑 这里我把做这个功能中遇到的一些问题写在前面,是为了大家能先了解有什么问题存在,遇到这些问题的时候就不慌了,这里我把应用图标和名称先统一使用icon代替进行说明. 1.动态替换icon,只能替换内置的icon,无法从服务器端获取来更新icon: 2.动态替换icon以后,应用内更新的时候必须要切换到原始icon),否则可能导致更新安装失败(AS上表现为adb运行会失败),或者升级后应用图标出现多个甚至应用图标都不显示的情况(这些问题都可以通过下面我推荐的开发规则解决掉,所以这是一个坑点,

Android绘制动态折线图

所谓动态折线图,就是折线图能随着手指的滑动进行动态绘制,这里很定会产生动画效果.基于这个效果,这里使用SurfaceView进行制图. 实现步奏如下: (1): 这里新建一个绘图ChartView,继承SurfaceView并实现SurfaceHolder.Callback , Runnable接口,主要绘图工作在子线程中完成. (2):现实 SurfaceHolder.Callback接口的三个方法,并在 surfaceCreated中开启子线程进行绘图. (3):重写onTouchEvent

Android实现动态改变app图标的示例代码

本文介绍了动态改变app图标,分享给大家,具体如下: 代码实现如下: <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"&

Android实现动态改变shape.xml中图形的颜色

在Android开发过程中我们常遇到将某个图形的颜色改变(例如用圆点的不同颜色来代表不同的状态) 像这样的需求,一般我们使用android的shape就可以实现,比如 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval&qu

Android动态绘制饼状图的示例代码

项目里面的需求,当时搜索到MPAndroidChart库,可以实现,但是只是一个需求就引用偌大的一个库,感觉不太爽,打算自己自定义一个. 一.惯例先上效果图 更新图 二.GitHub 代码地址,欢迎指正https://github.com/MNXP/XPPieChart 三.思路 1.空心图(一个大圆中心绘制一个小圆)   2.根据数据算出所占的角度   3.根据动画获取当前绘制的角度   4.根据当前角度获取Paint使用的颜色   5.动态绘制即将绘制的 和 绘制已经绘制的部分(最重要) 四

Python使用matplotlib的pie函数绘制饼状图功能示例

本文实例讲述了Python使用matplotlib的pie函数绘制饼状图功能.分享给大家供大家参考,具体如下: matplotlib具体安装方法可参考前面一篇http://www.jb51.net/article/51812.htm,具体使用代码如下: #coding=utf8 import matplotlib as mpl import numpy as np import matplotlib.pyplot as plt ''''' matplotlib.pyplot.pie函数:画一个饼

Python matplotlib绘制饼状图功能示例

本文实例讲述了Python matplotlib绘制饼状图功能.分享给大家供大家参考,具体如下: 一 代码 import numpy as np import matplotlib.pyplot as plt #The slices will be ordered and plotted counter-clockwise. labels ='Frogs','Hogs','Dogs','Logs' sizes =[15,30,45,10] colors =['yellowgreen','gold

利用php绘制饼状图的实现代码

drawPieImg()函数包含8个参数,$title为饼状图的标题:$dataArr为需要显示的数据数组:$labelArr为对应数据的标签分类数组:$colorArr为对应数据的绘图颜色数组,这4个参数是必须的,对于不同的系统应用传递相应的参数即可.接下来的4个参数,负责设置要生成的饼状图的大小,如果不设置则使用系统默认值.程序按照床底数组数据的大小,从0度开始绘制,方向按照顺时针方向依次绘制对应数据占据的扇面大小. 复制代码 代码如下: <?php //变量定义,画椭圆弧时的角度大小 de

php使用Jpgraph绘制饼状图的方法

本文实例讲述了php使用Jpgraph绘制饼状图的方法.分享给大家供大家参考.具体实现方法如下: <?php include ("src/jpgraph.php"); include ("src/jpgraph_pie.php"); $data = array(19,23,34,38,45,67,71,78,85,87,90,96); $graph = new PieGraph(400,300); $graph->SetShadow(); $graph-

Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

本文实例讲述了Android编程实现canvas绘制饼状统计图功能.分享给大家供大家参考,具体如下: 本例的目的是实现一个简单的饼状统计图,效果如下:    特点: 1.使用非常方便,可放在xml布局文件中,然后在代码中设置内容,即: PieChartView pieChartView = (PieChartView) findViewById(R.id.pie_chart); PieChartView.PieItemBean[] items = new PieChartView.PieItem

iOS使用Charts框架绘制饼状图

首先先看一下效果: 饼状图 一.创建饼状图对象 创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundColor = BgColor; [self.view addSubview:self.pieChartView]; [self.pieChartView mas_makeConstraints:^(MASConstraintMak

android 仿QQ动态背景、视频背景的示例代码

本文介绍了android 仿QQ动态背景.视频背景的示例代码,分享给大家,具体如下: 效果如下: 如上图类似效果图: 1, 自定义视频类 继承VideoView public class CustomVideoView extends VideoView { public CustomVideoView(Context context) { super(context); } public CustomVideoView(Context context, AttributeSet attrs)

Android使用自定义View实现饼状图的实例代码

本文讲述了Android使用自定义View实现饼状图的实例代码.分享给大家供大家参考,具体如下: 1.效果图 2.代码实现 public class PieChartView extends View { private Paint mPaint; private List<PieData>pieDataList; // 饼状图初始绘制角度 private float mStartAngle = 0; public PieChartView(Context context) { this(co

spring+srpingmvc+hibernate实现动态ztree生成树状图效果

ztree生成树状图 ztree官网 前台 导入js和css包 下载地址 前端页面 ztree.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %> <!DOCTYPE html> <HTML> <HEAD> &l