Android——ECG心电图的绘制实现(二)

于 2019-05-29 23:14:01 发布
阅读量9.5k 收藏 47
点赞数 11
分类专栏： Android 基础与进阶 文章标签： ECG心电图 Andorid心电图 Android心电 自定义心电图 动态心电图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22770457/article/details/90679481
版权

在上篇Android——ECG心电图的绘制实现博客中，实现了心电图的数据展示绘制。

在之后又新增了 心电图的自动滑动展示 与 实时绘制 功能。效果如下：

自动滑动展示

实时绘制(这里用到了一个timer不断添加数据)

一、自动滑动展示 实现

实现思路：

通过开启定时器实现下标scrollIndex不断增加，以此来计算展示数据的开始下标scrollStartIndex与结束下标scrollEndIndex，来获得一段数据data[]中的展示数据，该段数据刚好填满view的宽度(按比例填满)，然后不断的更细视图，实现视觉上的滑动效果(View实际上没有滑动)。如图所示：

代码实现：

首先在initData()初始化数据的时候，调用startScrollTimer()方法，开启一个timer，去不断的更新下标：

    private fun startScrollTimer() {
        timer = Timer()
        timerTask = object : TimerTask() {
            override fun run() {
                if (scrollIndex < data!!.size) {
                    scrollIndex++
                } else {
                    scrollIndex = 0
                }
            }
        }
        timer!!.schedule(timerTask, 0, 50)
    }

然后在ondraw中，进行具体的绘制：

// 绘制心电滚动视图
    private fun drawHeartScroll(canvas: Canvas) {
        if (data == null || data!!.size == 0) {
            return
        }
        paint!!.reset()
        path!!.reset()
        paint!!.style = Paint.Style.STROKE
        paint!!.color = Color.parseColor("#31CE32")
        paint!!.strokeWidth = mGridLinestrokeWidth
        paint!!.isAntiAlias = true
        path!!.moveTo(0f, mHeight / 2)

        var scrollStartIndex = 0
        var scrollEndIndex = 0

        scrollEndIndex = scrollIndex

        scrollStartIndex = scrollEndIndex - intervalNumHeart
        if (scrollStartIndex < 0) {
            scrollStartIndex = 0
        }

        var nowX: Float
        var nowY: Float
        for (i in scrollStartIndex until scrollEndIndex) {
            nowX = (i - scrollStartIndex) * intervalRowHeart

            var dataValue = data!![i]
            if (dataValue > 0) {
                if (dataValue > MAX_VALUE * 0.8f) {
                    dataValue = MAX_VALUE * 0.8f
                }
            } else {
                if (dataValue < -MAX_VALUE * 0.8f) {
                    dataValue = -(MAX_VALUE * 0.8f)
                }
            }
            nowY = mHeight / 2 - dataValue * intervalColumnHeart
            path!!.lineTo(nowX, nowY)
            LogUtils.d("drawHeartScroll $nowX $nowY")
        }

        canvas.drawPath(path!!, paint!!)
        postInvalidate()
    }

其中，前半部分是对数据下标的整理，后半部分是对整理的data数据进行实时展示。

二、实时绘制刷新refresh 实现

实现思路

这个就比上一个复杂多了。通过showLine（float float） 方法，让外界能输入数据并动态展示在心电图上，也就是说需要实现一个动态递增的Arraylist，然后在具体的绘制中，实现如下所示的数据结构：

第1次添加   1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ,                      
第2次添加   1 , 2 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ,                      
第3次添加   1 , 2 , 3 , 0 , 0 , 0 , 0 , 0 , 0 , 0 ,                      
第4次添加   1 , 2 , 3 , 4 , 0 , 0 , 0 , 0 , 0 , 0 ,                      
第5次添加   1 , 2 , 3 , 4 , 5 , 0 , 0 , 0 , 0 , 0 ,                      
第6次添加   1 , 2 , 3 , 4 , 5 , 6 , 0 , 0 , 0 , 0 ,                      
第7次添加   1 , 2 , 3 , 4 , 5 , 6 , 7 , 0 , 0 , 0 ,                      
第8次添加   1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 0 , 0 ,                      
第9次添加   1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 0 ,                      
第10次添加   1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ,                      
第11次添加   11 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ,                      
第12次添加   11 , 12 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ,                      
第13次添加   11 , 12 , 13 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ,                      
第14次添加   11 , 12 , 13 , 14 , 5 , 6 , 7 , 8 , 9 , 10 ,                      
第15次添加   11 , 12 , 13 , 14 , 15 , 6 , 7 , 8 , 9 , 10 ,                      
第16次添加   11 , 12 , 13 , 14 , 15 , 16 , 7 , 8 , 9 , 10 ,                      
第17次添加   11 , 12 , 13 , 14 , 15 , 16 , 17 , 8 , 9 , 10 ,                      
第18次添加   11 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 9 , 10 ,                      
第19次添加   11 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 10 ,                      
第20次添加   11 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 20 ,                      
第21次添加   21 , 12 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 20 ,                      
第22次添加   21 , 22 , 13 , 14 , 15 , 16 , 17 , 18 , 19 , 20 ,                      
第23次添加   21 , 22 , 23 , 14 , 15 , 16 , 17 , 18 , 19 , 20 ,                      
第24次添加   21 , 22 , 23 , 24 , 15 , 16 , 17 , 18 , 19 , 20 ,                      
第25次添加   21 , 22 , 23 , 24 , 25 , 16 , 17 , 18 , 19 , 20 ,                      
第26次添加   21 , 22 , 23 , 24 , 25 , 26 , 17 , 18 , 19 , 20 ,                      
第27次添加   21 , 22 , 23 , 24 , 25 , 26 , 27 , 18 , 19 , 20 ,    ....(后面省略)

可以看到要位置一个总长度固定的数据，但是随着数据的增加新的数据是从左往右进行刷新的(对应刷新心电图数据的刷新方式)，实现了该结构之后，再去做数据展示就可以实现心电图的刷新绘制了。

为此我专门写了一个测试类去测试：

public class TestClass {
    private static List<Float> refreshList = new ArrayList<>();
    private static float[] data; //一排显示的数据  一排10个
    private static int intervalNumHeart = 10;

    private static int showIndex;

    public static void main(String[] args) {
        data = new float[intervalNumHeart];

        for (int i = 1; i < 100; i++) {
            refreshList.add((float) i);
            drawHeartRefresh();
        }

    }

    private static void drawHeartRefresh() {
        int nowIndex = refreshList.size(); //当前长度
        if (nowIndex < intervalNumHeart) {
            showIndex = nowIndex - 1;
        } else {
            showIndex = (nowIndex - 1) % intervalNumHeart;
        }
        for (int i = 0; i < intervalNumHeart; i++) {
            if (i > refreshList.size() - 1) {
                break;
            }
            if (nowIndex <= intervalNumHeart) {
                data[i] = refreshList.get(i);
            } else {
                int times = (nowIndex - 1) / intervalNumHeart;
                int temp = times * intervalNumHeart + i;
                if (temp < nowIndex) {
                    data[i] =
                            refreshList.get(temp);
                }
            }
        }
        logdata();
    }

    private static void logdata() {
        String str = "";
        for (float temp : data) {
            int tempInt = (int) temp;
            str += tempInt + " , ";

        }
        Log( "第" +(refreshList.size()) + "次添加   " + str + "                     " );
    }

    private static void Log(String txt) {
        System.out.println(txt);
    }

}

代码实现

一样分为两个部分，前半部分实现该结构，后半部分进行具体的绘制：

private fun drawHeartRefresh(canvas: Canvas) {
        paint!!.reset()
        path!!.reset()
        paint!!.style = Paint.Style.STROKE
        paint!!.color = Color.parseColor("#31CE32")
        paint!!.strokeWidth = mGridLinestrokeWidth
        paint!!.isAntiAlias = true
        path!!.moveTo(0f, mHeight / 2)

        val nowIndex = if (refreshList == null) 0 else refreshList!!.size //当前长度

        if (nowIndex == 0) {
            return
        }

        if (nowIndex < intervalNumHeart) {
            showIndex = nowIndex - 1
        } else {
            showIndex = (nowIndex - 1) % intervalNumHeart
        }


        for (i in 0 until intervalNumHeart) {
            if (i > refreshList!!.size - 1) {
                break
            }
            if (nowIndex <= intervalNumHeart) {

                data!![i] = refreshList!![i]
            } else {
                val times = (nowIndex - 1) / intervalNumHeart

                val temp = times * intervalNumHeart + i

                if (temp < nowIndex) {
                    data?.set(i, refreshList!![temp])
                }
            }
        }

        logdata()

        //绘制出data
        var nowX: Float
        var nowY: Float
        for (i in data!!.indices) {
            nowX = i * intervalRowHeart
            var dataValue = data!![i]
            if (dataValue > 0) {
                if (dataValue > MAX_VALUE * 0.8f) {
                    dataValue = MAX_VALUE * 0.8f
                }
            } else {
                if (dataValue < -MAX_VALUE * 0.8f) {
                    dataValue = -(MAX_VALUE * 0.8f)
                }
            }
            nowY = mHeight / 2 - dataValue * intervalColumnHeart

            if (i - 1 == showIndex) {
                path!!.moveTo(nowX, nowY)

            } else {
                path!!.lineTo(nowX, nowY)
            }

        }

        canvas.drawPath(path!!, paint!!)
    }

 

 

近期在把所有写过的自定义view(实用性较强的)整理成一个开源框架，Github地址：

https://github.com/jiangzhengnan/UI#ngui

gradle依赖：

compile 'ng.ngui.ngbase:nguilib:0.0.1'

化作孤岛的瓜
关注
  • 11
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
博客
（二）Jetpack Compose 布局模型
05-12 1047
Jetpack Compose 提供一个更为高效且强大的布局模型。本文首先继续深挖了上文Compose入门章中提到的一些问题，然后对Compose的布局模型，结合源码探索了各个阶段具体如何实现，阅后可以对Compose的布局流程和框架实现思想有一个大体的了解。（基于compose 1.6.4版本）。
博客
（一）Jetpack Compose 从入门到会写
04-12 1019
Jetpack Compose 快速上手篇，阅读本文需要30分钟，写一遍需要2小时，但是进一步理解深入需要各位看官持续的学习～！
博客
RxJava 2.0 全体系梳理(持续更新ing)
07-02 1604
只有观察者订阅了，才开始执行发射数据的代码。并且Cold Observable和Observer只能是一对一的关系。当有多个不同的订阅者时，消息是重新完整发送的，也就是说，对于Cold Observeable来说，有多个Observer存在的时候，各自的事件是独立的。多个订阅的sunbscribe（或者说观察者）事件各自独立。Hot Observable 无论有没有观察者订阅，事件始终都会发生。当Hot Observable有多个订阅者时，Hot Observable与订阅者们的关系是一对多的关系。
博客
Android——CInit源码分析
02-04 639
CInit 是一个Android 依赖任务启动框架(最近在分析公司的启动框架，发现虽然实现了DAG结构，可以支持任务依赖，同异步，优先级回调等功能，但是缺点也有很多，配置只能代码配置，不支持注解，不支持多进程等，已经落后于时代了- =!所以找到CInit来研究一下。总的来看框架整体实现比较简单，容易上手或者改造，有一个瑕疵是任务优先级priority并没有实现。较为复杂的点在于任务的执行部分逻辑，需要依次进行依赖环检查，进程判断，线程判断，children依赖任务执行步骤。
博客
Android——Matirx 自动生成火焰图小工具
11-05 1089
于是写了一个工具包，可以将Matirx抓到的堆栈信息stack自动生成火焰图svg文件。1.把Matirx生成的堆栈文件与mapping文件放到fire根目录下。2.终端运行python3 main.py。3.可以看到svg自动生成出来了。
博客
23种设计模式归纳总结——行为型
10-08 805
主要解决的就是“类或对象之间的交互”问题，将不同的行为代码解耦
博客
23种设计模式归纳总结——结构型
10-05 555
主要解决“类或对象的组合或组装”问题，将不同功能代码解耦
博客
23种设计模式归纳总结——创建型
10-01 557
主要解决“对象的创建”问题，将创建和使用代码解耦
博客
Android字节码框架ByteX [method_call_opt] 源码分析
03-05 2241
前言ByteX是字节团队推出的一个基于GradleTransformApi和ASM的字节码插件平台。Github：GitHub - bytedance/ByteX: ByteX is a bytecode plugin platform based on Android Gradle Transform API and ASM. 字节码插件开发平台近期在学习研究字节码相关的技术，所以会整理一个系列文章着重分析ByteX各种插件的实现原理和思想。阅读本文需要初步了解ASM技术,传...
博客
Android——Qigsaw 源码分析(四) 安装过程
12-19 1672
前言在编译，初始化，加载的准备工作都结束以后，就到了插件的安装步骤。本文按调用顺序来分析具体的安装步骤。在官方demo下，可以看到QigsawInstaller中实际执行安装的步骤:SplitInstallManager.startInstall↓SplitInstallManagerImpl.startInstall(SplitInstallRequest request)↓如果未安装SplitInstallService.startInstall(List<St
博客
Android——Qigsaw 源码分析(三) 加载过程
12-12 2313
前言在初始化流程结束之后，本章节主要是继续按执行顺序，分析后续的加载和安装流程。目录前言加载过程1. 预加载 (SplitLoadManagerImpl)1.1 SplitLoadManagerImpl.loadInstalledSplitsInternal1.2 SplitLoadManagerImpl.createInstalledSplitFileIntents1.3 SplitLoadManagerImpl.createLastInstalledSplitFileIn
博客
Android——Qigsaw 源码分析(二) 初始化过程
12-11 1775
上一章节描述了Qigsaw编译期做的事情，后面的工作就是运行期进行的初始化，加载，和安装插件的过程。初始化过程通过官方文档:https://github.com/iqiyi/Qigsaw/blob/master/README.zh-CN.md中可以了解到，插件安装过程在QigsawApplication中。1.QigsawApplication1.1 attachBaseContext()SplitConfiguration configuration = SplitConfi
博客
Android——Qigsaw 源码分析(一) 编译过程
12-05 2021
本文主要是对Qigsaw的源码分析。Qigsaw是一种动态组件化技术，可以有效减少包size，进行热更新等调优功能，在实际应用开发中能带来不错的收益与启发。基于2021/7/14版本分析。Qigsaw分为编译过程→安装过程→加载过程 三个阶段进行源码分析。如何调试gradle:Android如何创建Gradle插件开发工程及调试_xialonghua的专栏-CSDN博客_gradle插件开发目录包目录结构:1 QigsawAppBasePlugin1.1 Transform部
博客
Android——面向AOP编程(二) Xerath 开源AOP框架
11-14 2136
承接上文Android——面向AOP编程(一)https://pumpkin.blog.csdn.net/article/details/119849325在持续了一段时间的学习之后，运用闲暇时间写了一个开源项目，目前在持续扩充和发育中。github：https://github.com/jiangzhengnan/XerathXerathXerath 是一个通过 [自定义注解]+ASM+Gradle Transform API实现的一套功能强大，方便开发，并且能够有效减少重复代码的A...
博客
动态规划习题本(持续更新)
10-30 200
1.求连续数组的最大和:力扣public static int maxSubArray(int[] nums) {//当前最大值int pre = 0;int max = nums[0];for (int temp : nums) {pre = Math.max(pre + temp, temp);max = Ma...
博客
Android——ASM 极速上手 简单使用
08-28 3224
理解一个工具的最快方式就是跑起来，然后原理自然了然于心本文以一个最简单的demo来实现对ASM全过程的了解。创建一个Child类，有一个call方法，最终的目的是在class类的call方法下增加一行输出语句。ASM概念，操作流程:需要创建一个 ClassReader 对象，将 .class 文件的内容读入到一个字节数组中然后需要一个 ClassWriter 的对象将操作之后的字节码的字节数组回写需要事件过滤器 ClassVisitor。在调用 ClassVisitor 的某些.
博客
Android——NguiLib酷炫的动画集合开源框架
08-28 1657
项目地址：https://github.com/jiangzhengnan/NguiLib基于Kotlin &Java 语言实现的，符合android material design规范的漂亮 + 实用 + 简单 风格的自定义视图和布局集合，最小sdk版本兼容到14，欢迎rp，欢迎startJcenter地址:https://bintray.com/jiangzhengnan/NguiLib/NguiLib包含以下各种属性/矢量，布局/view动画。用法gradle:..
博客
iOS——Github 客户端Objective-C开源项目
08-23 495
应该是全网唯一的Objective-C版本的github客户端版本了，遵循简洁明了的设计理念，适合新人小白上手与拓展。在学习Oc语言的过程中，慢慢学习积累的成果。希望有志同道合的同学可以加入进来，共同开发，做大做强～项目地址：https://github.com/jiangzhengnan/NgGithubIos????基于iOS端，使用Objective-C编写的Github个人版本基于MVC模式进行开发 ，用到的第三方库:AFNetworking SDWebImage
博客
Android——面向AOP编程(一)
08-22 307
前言：最近在工作中接触到了字节码插桩相关的知识，所以以本文来整理并实践一下相关的知识体系。字节码插桩:AOP编程 打包流程 自定义Gradle Task 查看，识别Java字节码 ASM使用 TransformAOP编程思想:面向切面编程思想，与面向过程和面向对象编程不同，AOP可以理解s为处理项目中一些统一的事物的过程，比如统计所有log，所有的点击事件监听，某个方法的全局操作等等。打包流程：java → class+jar → classes.dex+..
博客
iOS——面向AOP编程(方法交换)
08-15 874
前言：本文主要介绍ios中方法交换的各种方式具体使用，帮助新手快速入门并且上手。(毕竟我自己学的时候，找资料挺辛苦的，网上的资料大部分都是互相cv ????)本文主要包括以下几个部分：概念 分类实现方法交换 类之间的方法交换(内部交换) 类之间的方法交换(外部交换) C语言实现的方法交换 方法交换实现全局点击拦截概念方法交换:要理解方法交换的话，要了解一些概念:Objective-C 是一个动态语言,它有runtime运行时系统来动态得创建类和对象。然后oc的类的结构

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值